Webix React DataTable Reusability Issue: Shared Column Mapping causing Unintended Updates

Webix JS
#1

Hey community,

I’ve encountered an interesting issue while working with Webix and React. I’ve created a reusable Webix DataTable component, and when I use it multiple times with the same set of columns, any updates I make to one table seem to reflect on all instances of the table.

It seems like the column mapping is shared between the tables, causing unexpected behavior. Has anyone else faced a similar challenge? If so, how did you go about resolving it? I would appreciate any insights or suggestions to help me tackle this issue.

Please find out my code in CodeSandbox
Webix datatable codesandbox

#2

it is expected behaviour.
to prevent it, you need to ensure, that columns are not shared between tables.
try to use columns’ deep cloning

      <DatatableView data={dataVal} columns={webix.copy(columns)} />
      <DatatableView data={dataVal} columns={webix.copy(columns)} />
1 Like