Just thought I should share another tip, if you just want to intercept/intervene and operate on the currently displayed data before render you can override the component for the table body as Tyler showed in the "issue" link.
But instead of adding a render method, like Tyler did, you can just intercept the props on it's "way down" like this and inject it in the next component (Body, Row, etc.
Note; look for EditRow and other components in https://material-table.com/#/docs/features/component-overriding
<MaterialTable
//...
/**
* be aware when making changes on data that there is a tableData object attached
* rowData: {
* name: 'some name',
* tableData : {id: 3}
* }
*/
components={{
Body: (props) => {
//intervene before rendering table
console.log("tampering with some table data ", props);
console.log(" -- table data looks like this ", props.renderData);
// do stuff..
const myRenderData = props.renderData;
return (
<>
<MTableBody {...props} renderData={myRenderData} />
{/* to show that you will make impact */}
{/* <MTableBody {...props} renderData={[]} /> */}
</>
)
},
Row: (props) => {
//intervene before rendering row
console.log("tampering with some row data ", props);
console.log(" -- row data looks like this ", props.data);
console.log(" -- row table data looks like this ", props.data.tableData);
// do stuff..
const myRenderData = props.data;
return (
<>
<MTableBodyRow {...props} data={myRenderData} />
</>
)
}
}}
