是否向react-virtualized material-ui表添加“序列号”列？

Question

我正在尝试包含一个额外的列，用于显示react-virtualized表的序列号。让我们举一个简单的表格例子。另外，在对此表进行排序的情况下，序列号不应重新排序。有什么想法吗？

PS:序列号列不是从中派生列的数据的一部分，因此无法通过rowGetter获取。它必须是不使用“datakey”的单独的断开连接的列。

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

您可以在Column组件的cellDataGetter prop的帮助下执行此操作。See docs

还可以使用disbaleSort prop禁用列的排序行为。

下面是一个示例：

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

无论cellDataGetter的参数是什么，getSerial都可以是一个生成下一个序列的简单函数：

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

这是一个演示：

​

​