Changing base table columns causes rendering loop

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:

https://github.com/icflorescu/mantine-datatable/blob/3ee01b0a3cb0de9b04fc2e20f00e3fded5084423/package/hooks/useDataTableColumns.ts#L123

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:

https://github.com/icflorescu/mantine-datatable/blob/3ee01b0a3cb0de9b04fc2e20f00e3fded5084423/package/hooks/useDataTableColumns.ts#L41

  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.

Start in package/hooks/useDataTableColumns.ts, especially alignColumnsOrder and the line near 123 that writes the column order. Reproduce with useDataTableColumns, local storage, and a newly inserted column; trace why the old order is persisted. Done means supplied columns render in their supplied order and repeated re-render hooks stop occurring.