gregnb / gregnb/mui-datatables
onTableChange event fires when state of parent component changes
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I'm not sure if this is a bug, but I've found that the "onTableChange" event fires whenever the parent component updates, even when the props passed to the table remain the "same"
```js
import React, { useState } from "react";
import MUIDataTable from "mui-datatables";
export default function App() {
const columns = ["Name", "Company", "City", "State"];
const [dummyCount, setDummyCount] = useState(0)
const data = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];
const handleTableChange = (action, tableState) => {
console.log("onTableChanged")
// Setting state here causes infinite loop
// setDummyCount(dummyCount + 1)
}
const options = {
onTableChange: handleTableChange
}
return (
CLICK ME HERE counter:{dummyCount}
);
}
```
The handleTableChange callback is fired whenever dummyCount increments.
I came across this because I wanted to store the tableState to a component state in the callback for "onTableChange", but setting any kind of state in the call back causes an infinite loop. I would have expected that the event would fire whenever the props or the internal state of the table changes
I ended up wrapping the table and using "shouldComponentUpdate" as a work around.
```js
import MUIDataTable from "mui-datatables"
import React from "react"
export default class TableWrapper extends React.Component {
constructor(props) {
super(props)
//removing eslint useless constructor warning
this.state = {}
}
shouldComponentUpdate(nextProps) {
return !(JSON.stringify(nextProps.data) === JSON.stringify(this.props.data))
}
render() {
return
}
}
```
I have an example repo here: https://github.com/brahms116/table-problem
It would be nice if this behaviour, if intended, was noted in the documentation.
Thanks
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by running the linked table-problem example and reproduce the onTableChange callback firing when the parent counter changes. Compare the table props before and after the parent update, then check the table's documented callback behavior; done means either the callback no longer fires for unchanged table inputs or the behavior is clearly documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100