react-bootstrap-table - 将行号列添加到表中

Question

我正在尝试做一些简单的事情：在列上显示行号react-bootstrap-table。问题是似乎唯一可行的方法是添加一个带有索引的数据字段，如果打开排序，这些索引会被打乱。

理想情况下，会有一种方法可以做到这一点，但我似乎找不到任何方法。

Answer 1

我遇到过同样的问题。

添加

表头列

像这样：

<BootstrapTable data={data}>
    ...
    <TableHeaderColumn dataField="any" dataFormat={indexN}>#</TableHeaderColumn>
    ...
</BootstrapTable>

和功能：

function indexN(cell, row, enumObject, index) {
    return (<div>{index+1}</div>) 
}

Answer 2

现在 react-bootstrap-table2 有一个很大的变化，没有 TableHeaderColumn，而是应该在 BootstrapTable 上定义“columns”属性。我通过使用列格式化程序和数据映射来解决这个问题，如下所示：

在后端：

const ret = data.map((d, i) => {
    return { num: i + 1, id: d.id, name: d.name, age: d.age}
});
return ret;

在前端：

const columns = [{
    dataField: 'id',
    text: '#',
    sort: true,
    headerStyle: () => {
        return { width: '10%', textAlign: 'center' }
    },
    formatter: (rowContent: any, row: any) => {
        return (
            <div>
                {row.num}
            </div>
        )
    }
}

参考：https ://react-bootstrap-table.github.io/react-bootstrap-table2/docs/migration.html