Changing base table columns causes rendering loop

[SchrodingersGat]

Describe the bug

I have been trying to track down a bug I have experienced in the InvenTree project

When using the useDataTableColumns hook, if the columns parameter changes, the order of rendered columns does not always match the provided order of columns.

To Reproduce
Steps to reproduce the behavior:

1. Create a simple table with the useDataTableColumns hook, e.g.

 const myColumns = useMemo(() => {
    return [
        ...
    ];
 }, []);

  const tableColumns = useDataTableColumns({
    key: 'my-table',
    columns: dataColumns,
  });

2. Render the table, which stores the column order data to local storage
3. Insert a new column (into myColumns) which is not at the end
4. The table will be rendered with the new column at the end.
5. Additionally, there may be multiple (ongoing, repeated) re-render hooks due to the mismatch of input and displayed column ordering

Additional calls to setColumnOrder do not seem to fix the problem, as the column order is "locked in" on first rendering call.

Expected behavior

The displayed column order always matches the order of the supplied columns.

Additional context

I believe that the bug arises from this line:

mantine-datatable/package/hooks/useDataTableColumns.ts

Line 123 in 3ee01b0

setColumnsOrder(alignedColumnsOrder);

In fact, I have resolved the issue entirely by commenting out this line.

So, this indicates that the alignedColumnsOrder is not being cached or updated correctly:

From:

mantine-datatable/package/hooks/useDataTableColumns.ts

Line 41 in 3ee01b0

function alignColumnsOrder<T>(columnsOrder: string[], columns: DataTableColumn<T>[]) {

  function alignColumnsOrder<T>(columnsOrder: string[], columns: DataTableColumn<T>[]) {
    const updatedColumnsOrder: string[] = [];
    columnsOrder.forEach((col) => {
      if (columns.find((c) => c.accessor === col)) {
        updatedColumnsOrder.push(col);
      }
    });
    columns.forEach((col) => {
      if (!updatedColumnsOrder.includes(col.accessor as string)) {
        updatedColumnsOrder.push(col.accessor as string);
      }
    });
    return updatedColumnsOrder;
  }

This function orders the columns by first looking in the stored columns, and then appending any newly detected columns after that.

However, there is a logic or sequence error which means that the old columns order is always written back to the localStorage.

[SchrodingersGat]

I think that this is a functionally separate issue to #727

[SchrodingersGat]

I'm not sure the best way to handle this, it seems like a potential race condition? Perhaps an option to disable the call to setColumnsOrder(alignedColumnsOrder)?

[SchrodingersGat]

@icflorescu any input on this one?