I have a requirement to display row index for every row in my table. I see two options:
Both options have some downsides. And I am surprised this feature doesn't come out-of-the box.
Are there some other options? I would prefer to be able to load all data into the browser, but with customRowRender I won't be able to keep original row styling...
The solution is to add an extra column to a source dataset with undefined or empty string value and then to use a custom cell body render function:
export function customRowIndexColumn() {
return ({
name: '#',
options: {
filter: false,
customBodyRender: (value: any, meta: MUIDataTableMeta) => {
return (
meta.rowIndex + 1
);
}
}
})
}
....
const columns: MUIDataTableColumnDef[] = [
customRowIndexColumn(),
{
name: 'Plane ID',
options: {
filter: false
}
},
{
name: 'Name',
options: {
filter: false
}
},
...
use customBodyRender pass rowIndex and dataIndex, then access dataIndex.rowIndex it has worked for me
name: "id",
label: "#",
options: {
filter: true,
sort: true,
customBodyRender: (rowIndex, dataIndex) => dataIndex.rowIndex + 1
}
},
increment with 1 to start at position 1
