'How to get index of row in ant design table?
I want to show index of rows in ant design table. eg: 1 to 10 for 10 rows data i got.
const columns = [{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: '5%'
},
...
];
<Table key="table" columns={columns} dataSource={listData} pagination= {false} />
fixed:
title: "ID", width: "5%", render: (text, record) => ( listData.indexOf(record) + 1 ) i fixed it
Solution 1:[1]
const columns = [{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: '5%',
**render:(item, record, index)=>(<>{index}</>)**
}]
<Table key="table" columns={columns} dataSource={listData} pagination= {false}/>
you can find the index from your dataset by rendering the column.
Solution 2:[2]
Your requirement is not clear. Better you show us the output you want to achieve. If you need to get index of the objects in your 'columns' array then you can use iterators to get that.
Eg - 1:
columns.map((column, index) => {
// Your statements will go here
})
Eg - 2:
columns.forEach((column, index) => {
// Your statements will go here
})
Realtime example:
<Table key="table" columns={columns} dataSource={listData} pagination= {false} >
<tbody>
{columns.map((column, index) => (
<row>
<td>{index}</td>
</row>
))}
}
</tbody>
</Table>
There are other iterators too like 'lodash' 'forEach'. This could be your start learning iterators https://www.w3schools.com/js/js_array_iteration.asp
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Sharif Khan |
Solution 2 | Mehrdad Abbasi |