@snack-uikit/table 0.29.0 → 0.30.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.30.0 (2025-02-26)
+
+
+### Features
+
+* **PDS-1487:** freeze columns size on resize ([f5f5694](https://github.com/cloud-ru-tech/snack-uikit/commit/f5f56948a5e0ba42f071a66e2de225465f67e980))
+
+
+
+
+
 # 0.29.0 (2025-02-25)
 
 

package/dist/cjs/components/Table/Table.js

@@ -229,10 +229,17 @@ function Table(_a) {
   }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
   const columnSizeVarsRef = (0, react_1.useRef)();
   const headers = table.getFlatHeaders();
-  const columnSizeVars = (0, react_1.useMemo)(() => {
+  const columnSizes = (0, react_1.useMemo)(() => {
     var _a;
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes = {};
+    const vars = {};
+    const realSizes = {};
+    const resizedColumnIndex = headers.findIndex(_ref => {
+      let {
+        column
+      } = _ref;
+      return column.getIsResizing();
+    });
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const {
@@ -241,8 +248,8 @@ function Table(_a) {
       } = (0, utils_3.getColumnStyleVars)(header.id);
       const originalColDef = originalColumnDefs.find(col => (0, helperComponents_1.getColumnId)(header) === col.id);
       if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[flexKey] = '100%';
+        vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+        vars[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -261,12 +268,9 @@ function Table(_a) {
         if (header.column.getCanResize()) {
           const currentSize = header.getSize();
           const colDefSize = header.column.columnDef.size;
-          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-          if (prevSize === '100%' && currentSize !== colDefSize) {
-            const realSize = (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id);
-            table.setColumnSizing(old => Object.assign(Object.assign({}, old), {
-              [header.id]: realSize
-            }));
+          if (currentSize !== colDefSize || i < resizedColumnIndex && prevSize === '100%') {
+            const realSize = prevSize === '100%' ? (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id) : currentSize;
+            realSizes[header.id] = realSize;
             size = `${realSize}px`;
           }
         }
@@ -277,11 +281,14 @@ function Table(_a) {
             size
           });
         }
-        colSizes[sizeKey] = size;
-        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        vars[sizeKey] = size;
+        vars[flexKey] = size === '100%' ? 'unset' : '0';
       }
     }
-    return colSizes;
+    return {
+      vars,
+      realSizes
+    };
     /*
       effect must be called only on columnSizingInfo.isResizingColumn changes
       to reduce unnecessary recalculations
@@ -291,8 +298,11 @@ function Table(_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
   (0, react_1.useEffect)(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => Object.assign(Object.assign({}, old), columnSizes.realSizes));
+    }
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
   const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -374,7 +384,7 @@ function Table(_a) {
           ref: scrollContainerRef,
           children: [(0, jsx_runtime_1.jsx)("div", {
             className: styles_module_scss_1.default.tableContent,
-            style: columnSizeVars,
+            style: columnSizes.vars,
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
               value: {
                 table

package/dist/cjs/components/Table/utils.js

@@ -12,12 +12,15 @@ function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
     const cell = document.querySelector(`[data-header-id="${id}"]`);
     const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
-    if (cell && resizeHandler) {
+    if (cell) {
       const {
         width
       } = cell.getBoundingClientRect();
-      const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-      return width + offset;
+      if (resizeHandler) {
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+      return width;
     }
   }
   return 0;

package/dist/esm/components/Table/Table.js

@@ -155,17 +155,19 @@ export function Table(_a) {
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
-    const columnSizeVars = useMemo(() => {
+    const columnSizes = useMemo(() => {
         var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const colSizes = {};
+        const vars = {};
+        const realSizes = {};
+        const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
             if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-                colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-                colSizes[flexKey] = '100%';
+                vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+                vars[flexKey] = '100%';
             }
             else {
                 const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
@@ -182,21 +184,20 @@ export function Table(_a) {
                 if (header.column.getCanResize()) {
                     const currentSize = header.getSize();
                     const colDefSize = header.column.columnDef.size;
-                    size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-                    if (prevSize === '100%' && currentSize !== colDefSize) {
-                        const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-                        table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
+                    if (currentSize !== colDefSize || (i < resizedColumnIndex && prevSize === '100%')) {
+                        const realSize = prevSize === '100%' ? getCurrentlyConfiguredHeaderWidth(header.id) : currentSize;
+                        realSizes[header.id] = realSize;
                         size = `${realSize}px`;
                     }
                 }
                 if (isResizeSavedToStore) {
                     saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
                 }
-                colSizes[sizeKey] = size;
-                colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+                vars[sizeKey] = size;
+                vars[flexKey] = size === '100%' ? 'unset' : '0';
             }
         }
-        return colSizes;
+        return { vars, realSizes };
         /*
           effect must be called only on columnSizingInfo.isResizingColumn changes
           to reduce unnecessary recalculations
@@ -208,8 +209,11 @@ export function Table(_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
     useEffect(() => {
-        columnSizeVarsRef.current = columnSizeVars;
-    }, [columnSizeVars]);
+        if (Object.keys(columnSizes.realSizes).length) {
+            table.setColumnSizing(old => (Object.assign(Object.assign({}, old), columnSizes.realSizes)));
+        }
+        columnSizeVarsRef.current = columnSizes.vars;
+    }, [columnSizes, table]);
     const tableRows = table.getRowModel().rows;
     const tableCenterRows = table.getCenterRows();
     const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -245,7 +249,7 @@ export function Table(_a) {
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/components/Table/utils.js

@@ -3,10 +3,13 @@ export function getCurrentlyConfiguredHeaderWidth(id) {
     if (isBrowser()) {
         const cell = document.querySelector(`[data-header-id="${id}"]`);
         const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
-        if (cell && resizeHandler) {
+        if (cell) {
             const { width } = cell.getBoundingClientRect();
-            const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-            return width + offset;
+            if (resizeHandler) {
+                const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+                return width + offset;
+            }
+            return width;
         }
     }
     return 0;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "59426d0dd21ec9b22909d8350ca1d988665b4215"
+  "gitHead": "afb93f86dbab6039f4c267a9d0e85350b59053c5"
 }

package/src/components/Table/Table.tsx

@@ -256,9 +256,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
 
-  const columnSizeVars = useMemo(() => {
+  const columnSizes = useMemo(() => {
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes: Record<string, string> = {};
+    const vars: Record<string, string> = {};
+    const realSizes: Record<string, number> = {};
+    const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
 
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
@@ -267,8 +269,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
 
       if (header.id === 'snack_predefined_statusColumn' && !originalColDef?.header && !originalColDef?.enableSorting) {
-        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[flexKey] = '100%';
+        vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+        vars[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef?.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -289,12 +291,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           const currentSize = header.getSize();
           const colDefSize = header.column.columnDef.size;
 
-          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-
-          if (prevSize === '100%' && currentSize !== colDefSize) {
-            const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-            table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
-
+          if (currentSize !== colDefSize || (i < resizedColumnIndex && prevSize === '100%')) {
+            const realSize = prevSize === '100%' ? getCurrentlyConfiguredHeaderWidth(header.id) : currentSize;
+            realSizes[header.id] = realSize;
             size = `${realSize}px`;
           }
         }
@@ -303,12 +302,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
         }
 
-        colSizes[sizeKey] = size;
-        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        vars[sizeKey] = size;
+        vars[flexKey] = size === '100%' ? 'unset' : '0';
       }
     }
 
-    return colSizes;
+    return { vars, realSizes };
     /*
       effect must be called only on columnSizingInfo.isResizingColumn changes
       to reduce unnecessary recalculations
@@ -321,8 +320,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
 
   useEffect(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => ({ ...old, ...columnSizes.realSizes }));
+    }
+
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
 
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
@@ -413,7 +416,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
 
         <div className={styles.scrollWrapper} data-outline={outline || undefined}>
           <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
-            <div className={styles.tableContent} style={columnSizeVars}>
+            <div className={styles.tableContent} style={columnSizes.vars}>
               <TableContext.Provider value={{ table }}>
                 {loading ? (
                   <SkeletonContextProvider loading>

package/src/components/Table/utils.ts

@@ -7,10 +7,15 @@ export function getCurrentlyConfiguredHeaderWidth(id: string): number {
       '[data-test-id="table__header-cell-resize-handle-moving-part"]',
     );
 
-    if (cell && resizeHandler) {
+    if (cell) {
       const { width } = cell.getBoundingClientRect();
-      const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-      return width + offset;
+
+      if (resizeHandler) {
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+
+      return width;
     }
   }
 

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -58,7 +58,7 @@
     left: 0;
     transform: translateX(-50%);
 
-    width: calc(100% + styles-tokens-table.$dimension-4m);
+    width: calc(100% + #{styles-tokens-table.$dimension-4m});
     height: 100%;
   }
 }
@@ -86,7 +86,7 @@
     left: 50%;
     transform: translateX(-50%);
 
-    width: calc(100% - styles-tokens-table.$space-table-head-separator-padding * 2);
+    width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding} * 2);
     height: styles-tokens-table.$border-width-table;
 
     background-color: styles-tokens-table.$sys-neutral-decor-default;
@@ -106,7 +106,7 @@
     &::after {
       left: 0;
       transform: none;
-      width: calc(100% - styles-tokens-table.$space-table-head-separator-padding);
+      width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding});
     }
   }
 
@@ -136,7 +136,7 @@
       }
 
       .tableHeaderResizeIndicator {
-        right: calc(styles-tokens-table.$dimension-1m / 2);
+        right: calc(#{styles-tokens-table.$dimension-1m} / 2);
       }
     }
   }

package/src/helperComponents/Rows/styles.module.scss

@@ -42,8 +42,8 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     content: '';
 
     position: absolute;
-    top: calc(0px - styles-tokens-table.$border-width-table);
-    bottom: calc(0px - styles-tokens-table.$border-width-table);
+    top: calc(0px - #{styles-tokens-table.$border-width-table});
+    bottom: calc(0px - #{styles-tokens-table.$border-width-table});
 
     box-sizing: border-box;
     width: styles-tokens-table.$border-width-table;