zustand with resizing first steps

Author: RafaelGB

src/cdm/FolderModel.ts

@@ -63,8 +63,6 @@ export interface TableColumn extends BaseColumn {
     id: string;
     options?: RowSelectOption[];
     Cell?: any;
-    getHeaderProps?: any;
-    getResizerProps?: any;
 }
 
 export type RowDataType = {

src/cdm/TableStateInterface.ts

@@ -33,6 +33,7 @@ export interface ColumnsState {
     addOptionToColumn: (column: TableColumn, option: string, backgroundColor: string) => void;
     alterColumnType: (column: TableColumn, input: string, parsedRows?: RowDataType[]) => void;
     alterColumnLabel: (column: TableColumn, label: string) => void;
+    alterColumnSize: (columnSizing: Record<string, number>) => void;
 }
 export interface ColumnSortingState {
     state: SortingState;

src/components/Table.tsx

@@ -57,7 +57,10 @@ const defaultColumn: Partial<ColumnDef<RowDataType>> = {
 export function Table(tableData: TableDataType) {
   /** Main information about the table */
   const { view, tableStore } = tableData;
-  const [columns] = tableStore.columns((state) => [state.columns]);
+  const [columns, alterColumnSize] = tableStore.columns((state) => [
+    state.columns,
+    state.alterColumnSize,
+  ]);
   const [rows, addRow] = tableStore.data((state) => [state.rows, state.addRow]);
   LOGGER.debug(
     `=> Table. number of columns: ${columns.length}. number of rows: ${rows.length}`
@@ -197,13 +200,7 @@ export function Table(tableData: TableDataType) {
       // setting new timeout
       setPersistSizingTimeout(
         setTimeout(() => {
-          Object.keys(list)
-            .filter((key) => list[key] !== undefined)
-            .map((key) => {
-              view.diskConfig.updateColumnProperties(key, {
-                width: list[key],
-              });
-            });
+          alterColumnSize(list);
           // timeout until event is triggered after user has stopped typing
         }, 1500)
       );

src/stateManagement/useColumnsStore.tsx

@@ -156,6 +156,32 @@ const useColumnsStore = (view: DatabaseView) => {
         view.diskConfig.updateColumnKey(column.id, newKey, label);
         return { columns: updater.columns };
       }),
+    alterColumnSize: (columnSizing: Record<string, number>) =>
+      set((updater) => {
+        const alteredColumns = [...updater.columns];
+        console.log(
+          "before",
+          alteredColumns.map((col) => col.config.size)
+        );
+        Object.keys(columnSizing)
+          .filter((key) => columnSizing[key] !== undefined)
+          .map((key) => {
+            // Persist on disk
+            view.diskConfig.updateColumnProperties(key, {
+              width: columnSizing[key],
+            });
+            // Persist on memory
+            const indexCol = alteredColumns.findIndex(
+              (col: TableColumn) => col.id === key
+            );
+            alteredColumns[indexCol].config.size = columnSizing[key];
+          });
+        console.log(
+          "after",
+          alteredColumns.map((col) => col.config.size)
+        );
+        return { columns: alteredColumns };
+      }),
   }));
 };
 /**