gregnb / gregnb/mui-datatables

onTableChange event fires when state of parent component changes

Open
#1,738 1 comment 1 reaction 0 assignees View on GitHub
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 (


setDummyCount(dummyCount + 1)}>
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.