将 'serial number' 列添加到 react-virtualized material-ui table?

Question

我正在尝试添加一个额外的列来展示 react-virtualized table 的序列号。让我们举一个简单的 table 例子。此外，如果我们正在对 table 进行排序，则序列号不应重新排序。有什么想法吗？

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 属性来完成此操作。 See docs

同时使用 disbaleSort 属性来禁用 Column 的排序行为。

这是一个例子：

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

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

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

这是一个演示：

将 'serial number' 列添加到 react-virtualized material-ui table?

Add a 'serial number' column to react-virtualized material-ui table?

sorting

material-ui

react-virtualized