gregnb / gregnb/mui-datatables
Non-serverSide filtering/searching re-renders whole MUIDatatable
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
## Expected Behavior
When we upgraded our version from `2.0.0-beta.58` to `2.5.1` we found that changing state in the component re-rendered the whole table, but in the previous version it only seemed to re-render the `TableBody`. When we filter with `serverSide: false` we would like for only the TableBody to re-render and include filtered changes.
Note: We also have are using `onTableChange` and a `customFooter` in our `options`.
## Current Behavior
Currently when we filter, whole table re-renders, check box column shows up on the left side of table, chips don't show on the top header, our `customFooter` doesn't not render correctly with totals, records don't filter.
## Steps to Reproduce (for bugs)
You'll see that a lot of complexity below is us trying to calculate the Quantity Submitted based on the filtered results we get `onTableChange`. We were so excited to have this work in a previous version, so sad that it's no longer supported. It seems like `2.5.1` assumes you're using `onTableChange` for serverSide filtering. We tried using `useRef` hooks to stop rendering without success. [My attempt at reproducing in sandbox](https://codesandbox.io/embed/blissful-thunder-khgs1) but copy pasting below as well..
```js
export const splitDateTime = results => {
return results.map(currentValue => {
return currentValue['Timestamp'] !== null && typeof currentValue['Timestamp'] !== 'undefined'
? Object.assign({}, currentValue, {
Time: `${currentValue['Timestamp'].split(' ')[1]} ${
currentValue['Timestamp'].split(' ')[2]
}`,
Timestamp: currentValue['Timestamp'].split(' ')[0],
})
: currentValue;
});
};
export const unfilteredQuantitySubmitted = results => {
if (results && results.length > 0) {
let quantitySubmitted = results.map(record => stringToNumber(record['Quantity Submitted']));
return quantitySubmitted.reduce((a, b) => a + b, 0);
}
};
export const filteredQuantitySubmitted = state => {
let columnNames = state.columns.map(column => column.name);
let index = columnNames.indexOf('Quantity Submitted');
let quantitySubmitted = state.displayData.map(record =>
stringToNumber(record.data[index].props.value)
);
return quantitySubmitted.reduce((a, b) => a + b, 0);
};
const ProductionSubmissionsTable = props => {
const { fetching, results } = props;
const [quantitySubmitted, setQuantitySubmitted] = useState(0);
useEffect(
() => {
setQuantitySubmitted(unfilteredQuantitySubmitted(results));
},
[results, setQuantitySubmitted]
);
if (fetching) {
return ;
}
if (results && results.length > 0) {
const columns = columnOptions;
const options = {
filterType: 'dropdown',
responsive: 'scroll',
selectableRows: false,
print: false,
download: false,
rowsPerPage: 100,
serverSide: false,
onTableChange: (action, state) => setQuantitySubmitted(filteredQuantitySubmitted(state)),
customFooter: function footer(count, page, rowsPerPage, changeRowsPerPage, changePage) {
return (
changePage(newPage)}
onChangeRowsPerPage={event => changeRowsPerPage(event.target.value)}
rowsPerPageOptions={[10, 15, 100]}
/>
);
},
};
return (
);
} else {
return
}
};
```
and customfooter
```js
const CustomFooter = ({
page,
rowsPerPage,
count,
quantitySubmitted,
onChangePage,
onChangeRowsPerPage,
rowsPerPageOptions,
}) => {
return (
Quantity Submitted: {formatNumber(quantitySubmitted)}
);
};
```
## Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | ^3.9.2 |
| MUI-datatables | ^2.5.1 |
| React | ^16.8.6 |
| browser | chrome |
| etc | using `onTableChange`, `serverSide:false`, `customFooter` in table options |
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.