Добавить столбец «серийный номер» в таблицу «Виртуализированный материал-интерфейс»?

Question

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

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')
);

Answer 1

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

Также используйте disbaleSort prop для отключения режима сортировки Column.

Вот пример:

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

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

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

Вот демонстрационная версия: