[React] Can columns be updated dynamically without destroy/reinit?
[React] Can columns be updated dynamically without destroy/reinit?
choc
Posts: 128Questions: 13Answers: 11
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!