feat: add column width cache

-ensures that column widths a retained even after reordering them
elastic · Oct 8, 2024 · 955cef7 · 955cef7
1 parent 26c72d5
commit 955cef7
Showing 1 changed file with 33 additions and 4 deletions.
diff --git a/packages/eui/src/components/datagrid/utils/col_widths.ts b/packages/eui/src/components/datagrid/utils/col_widths.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { useMemo, useCallback, useState } from 'react';
+import { useMemo, useCallback, useState, useRef } from 'react';
 import { useUpdateEffect } from '../../../services';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
 import {
@@ -18,6 +18,7 @@ import {
 } from '../data_grid_types';
 
 const DEFAULT_COLUMN_WIDTH = 100;
+const COLUMN_WIDTHS_CACHE = new Map<string, Map<string, number>>();
 
 export const useDefaultColumnWidth = (
   gridWidth: number,
@@ -79,11 +80,36 @@ export const useColumnWidths = ({
   setColumnWidth: (columnId: string, width: number) => void;
   getColumnWidth: (index: number) => number;
 } => {
+  const instance = useRef(`dataGridColumnWidths_${COLUMN_WIDTHS_CACHE.size}`);
+
   const computeColumnWidths = useCallback(() => {
+    let columnWidthsCache = COLUMN_WIDTHS_CACHE.get(instance.current);
+
     return columns
-      .filter(doesColumnHaveAnInitialWidth)
+      .filter(
+        (column) =>
+          (doesColumnHaveAnInitialWidth(column) ||
+            columnWidthsCache?.has(column.id)) ??
+          false
+      )
       .reduce<EuiDataGridColumnWidths>((initialWidths, column) => {
-        return { ...initialWidths, [column.id]: column.initialWidth! };
+        const width = columnWidthsCache?.get(column.id) ?? column.initialWidth!;
+
+        if (columnWidthsCache) {
+          columnWidthsCache.set(column.id, width);
+        } else {
+          COLUMN_WIDTHS_CACHE.set(
+            instance.current,
+            new Map([[column.id, width]])
+          );
+
+          columnWidthsCache = COLUMN_WIDTHS_CACHE.get(instance.current);
+        }
+
+        return {
+          ...initialWidths,
+          [column.id]: width,
+        };
       }, {});
   }, [columns]);
 
@@ -98,6 +124,8 @@ export const useColumnWidths = ({
 
   const setColumnWidth = useCallback(
     (columnId: string, width: number) => {
+      COLUMN_WIDTHS_CACHE.get(instance.current)?.set(columnId, width);
+
       setColumnWidths((prevColumnWidths) => ({
         ...prevColumnWidths,
         [columnId]: width,
@@ -134,7 +162,8 @@ export const useColumnWidths = ({
           ? columns[index - leadingControlColumns.length].id
           : '';
       return (
-        columnWidths[columnId] || defaultColumnWidth || DEFAULT_COLUMN_WIDTH
+        COLUMN_WIDTHS_CACHE.get(instance.current)?.get(columnId) ??
+        (columnWidths[columnId] || defaultColumnWidth || DEFAULT_COLUMN_WIDTH)
       );
     },
     [