gregnb / gregnb/mui-datatables

Non-serverSide filtering/searching re-renders whole MUIDatatable

Open
#739 1 comment 0 reactions 0 assignees View on GitHub
needs verification
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

Unable to render Ingredient Submissions Table
;
}
};

```

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.