将“序列号”列添加到 react-virtualized material-ui 表？答案

【问题标题】：Add a 'serial number' column to react-virtualized material-ui table?将“序列号”列添加到 react-virtualized material-ui 表？
【发布时间】：2019-07-02 11:17:48
【问题描述】：

我正在尝试添加一个额外的列，显示反应虚拟化表的序列号。让我们举一个简单的表格示例。此外，如果我们正在对该表进行排序，则不应重新排序序列号。有什么想法吗？

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

【问题讨论】：

请分享一些“序列号列”的示例数据
简单数字升序：1,2,3,4.....

标签： sorting material-ui react-virtualized

【解决方案1】：

您可以借助 Column 组件的 cellDataGetter 属性来实现。 See docs

还可以使用disbaleSort 属性来禁用 Column 的排序行为。

这是一个例子：

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

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

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

这是一个演示：

【讨论】：