Open quangkhuat1995 opened 2 months ago
@quangkhuat1995 did you happen to find a workaround for this?
Yes this is my workaround:
General idea: If the response is only 1 item, I will add another fake row. SO the table now will have 2 row and the resize column will not cause disappear anymore.
if (response.length === 1 && !screenMobile) {
setData([...response, FAKE_ROW]); // FAKE_ROW = { id: 'fakeId' };
} else {
// mobile doesn't have resize feature
setData(response);
}
And in your columns
, ignore the rendering value of that fake row in every column, even for row action column
const columns = [
{
id: "firstName",
accessorFn: (row) => {
if (row?.id === "fakeId") return null; // render nothing for this row
return (
<p>{row.firstName}</p>
);
},
....
},
{
id: "lastName",
accessorFn: (row) => {
if (row?.id === "fakeId") return null; // render nothing for this row
return (
<p>{row.lastName}</p>
);
},
....
},
....
]
renderRowActions: ({ row }) => {
if (row.original.id === "fakeId") return null;
return (
// your buttons
);
}
const handleExportCSV = () => {
const newData = data
.filter((row) => row.id !== "fakeId") // remove fake data
.map((row) => {
return {
// your data
};
});
// do something with your true data
};
This is the result, you will have a blank row at the bottom, but I think it's ok for this edge case
mantine-react-table version
v1.3.4
react & react-dom versions
18.2.0
Describe the bug and the steps to reproduce it
First of all, I understand that the document has already mentioned to use virtual only when there are many data, like at least 50 rows. However, here is the use case that we have.
We have a table that render data from our server, the table has total 24 columns (not all visibility at once so we don't use virtual column) and can render pagination from 50-100-250-1000 rows per page. We have a form to create filters/search to build our API query for the table data. So most of the time we will have a lot of things and we use enableRowVirtualization.
Since we have many columns so we also use
enableColumnResizing
.But, if user searches for something that return only 1 item, for example exact full name. And then performs a resize column, that single row data will disappear. With more than 1 item (eg: 2), everything works fine. I can replicate that with the code sandbox from document page.
Minimal, Reproducible Example - (Optional, but Recommended)
https://codesandbox.io/p/devbox/mantine-react-table-example-enable-row-virtualization-6scmjq?file=%2Fsrc%2FTS.tsx%3A59%2C36
This is the sandbox from this document
Please change these to replicate the issue:
enableColumnResizing: true,
touseMantineReactTable
setData(makeData(10_000));
tosetData(makeData(1));
// to replicate only 1 item responseRepeat again, but now with
setData(makeData(2))
, you won't see error anymore.Screenshots or Videos (Optional)
Do you intend to try to help solve this bug with your own PR?
No, because I do not have time to dig into it
Terms