[React] Can columns be updated dynamically without destroy/reinit?
[React] Can columns be updated dynamically without destroy/reinit?
choc
Posts: 137Questions: 15Answers: 12
Link to test case: https://stackblitz.com/edit/datatables-net-react-simple-n2g41axq?file=src%2FApp.tsx
Description of problem:
DataTables.net for React does not re-render or update when the columns prop changes.
To force it to reflect new column definitions, the only way I found is to to use the key prop.
However, this causes the entire table to unmount and re-mount, which can lead to performance issues and loss of internal states.
For simple case, for example, if one just want to update the name of column, that is possible with API:
const api = table.current?.dt({visible: true, api: true});
if (api) {
$(api.column(5).header()).html("new name");
}
It is intuitive that the table should also change when the columns prop changes. (That's why I use react component!)
However, this is not the case when we don't use the key prop to destroy the old table and mount a new one. (?)
I have a use case where I have 91~100 columns, with the first 1~10 columns being dynamically generated, followed by 90 columns that are always present. Depending on the user's selection, the generated columns can change from 1 to 10 columns (different titles and data). In this case, I updated the columns prop, but the table is not updated, only the data is updated!
To make it reactively update the columns, I have to use key prop, like I showed in the example.
But this is not optimal for very large table I think.
So I wonder if it is possible to update the columns dynamically without destroy/reinit the table?
Answers
Hi,
This is something that I need to do - apologies that it doesn't yet, but it is on my list!
Allan
Thank you Allan! That would be great!
Hi @allan, I'm wondering if this feature is available in version 3 or if it's already supported?
Since Vite is becoming more and more popular and HMR is very useful during development, the
columnprop isn't updated reactively, though.In some cases, the warning message “3. Warning: DataTable cannot be reinitialized” keeps popping up, which is very annoying.
Not yet I'm afraid. This isn't actually a DataTables 3 thing, but rather something that needs to be updated in the DataTables / React integration. I need to update it to look for changes to the columns property and when that happens destroy and re-init the table itself.
At the moment the
columnsproperty remains non-reactive. That is something I will look into, but it will be post DataTables 3, which has already taken way longer to get ready for release than I would like.Allan