Добавить столбец «серийный номер» в таблицу реагирующих виртуализированных материалов?

Я пытаюсь включить дополнительный столбец, демонстрирующий серийный номер для виртуализированной таблицы реакции. давайте возьмем простой пример таблицы. Также, если мы сортируем эту таблицу, серийный номер не должен изменяться. Любые идеи?

PS: столбец серийного номера не является частью данных, из которых он выводит столбцы, и, следовательно, не может быть получен через rowGetter. Это должен быть отдельный отключенный столбец, который не использует «ключ данных».

import React from 'react';
import ReactDOM from 'react-dom';
import { Column, Table } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// Table data as an array of objects
const list = [
  { name: 'Brian Vaughn', description: 'Software engineer' }
  // And so on...
];

// Render your table
ReactDOM.render(
  <Table
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowCount={list.length}
    rowGetter={({ index }) => list[index]}
  >
    <Column
      label='Name'
      dataKey='name'
      width={100}
    />
    <Column
      width={200}
      label='Description'
      dataKey='description'
    />
  </Table>,
  document.getElementById('example')
);

material-ui sorting react-virtualized
person Kombo    schedule 08.02.2019    source источник
comment
Пожалуйста, поделитесь некоторыми примерами данных «столбца серийных номеров»   -  person mehamasum    schedule 08.02.2019
comment
простые числительные в порядке возрастания: 1,2,3,4.....   -  person Kombo    schedule 08.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать это с помощью cellDataGetter prop компонента Column. См. документы

Также используйте disbaleSort, чтобы отключить поведение сортировки столбца.

Вот пример:

<Column
  label="Serial"
  width={200}
  disableSort
  dataKey="serial"
  cellDataGetter={() => this.getSerial()}
/>

getSerial может быть простой функцией, которая генерирует следующий серийный номер, независимо от аргументов cellDataGetter:

getSerial() {
  return ++this.serial;
}

Вот демо:

Изменить реакцию-виртуализацию

person mehamasum    schedule 09.02.2019