将行号列添加到 table

Question

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

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

Answer 1

我遇到了同样的问题。

添加

TableHeaderColumn

像这样：

<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”prop。我通过使用列格式化程序和数据映射来解决这个问题，如下所示：

在后端：

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

将行号列添加到 table

Add row number column to table

react-bootstrap-table

在后端：

在前端：