在反应虚拟化物料UI表中添加“序列号”列？

Question

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

PS：序列号列不是其派生列所用数据的一部分，因此无法通过rowGetter获得。它必须是不使用'datakey'的单独的断开连接的列。

Func<PRT ,bool> whereClause

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;
}

这是一个演示：