@snack-uikit/table 0.16.8-preview-e82f86de.0 → 0.16.8-preview-dff5750f.0

package/dist/components/Table/Table.js

@@ -123,6 +123,7 @@ export function Table(_a) {
         }
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
     const columnSizeVarsRef = useRef();
+    const headers = table.getFlatHeaders();
     const columnSizeVars = useMemo(() => {
         var _a;
         const sizeKey = (id) => `--table-column-${id}-size`;
@@ -138,7 +139,6 @@ export function Table(_a) {
             return 0;
         };
         const originalColumnDefs = table._getColumnDefs();
-        const headers = table.getFlatHeaders();
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
@@ -161,10 +161,14 @@ export function Table(_a) {
             colSizes[flexKey(header.id)] = size === '100%' ? 'unset' : '0';
         }
         return colSizes;
-        /* effect must be called only on columnSizingInfo.isResizingColumn changes
-          to reduce unnecessary recalculations */
+        /*
+          effect must be called only on columnSizingInfo.isResizingColumn changes
+          to reduce unnecessary recalculations
+    
+          headers ids can also change, so they also should present here
+          */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [table.getState().columnSizingInfo.isResizingColumn]);
+    }, [table.getState().columnSizingInfo.isResizingColumn, headers]);
     useEffect(() => {
         columnSizeVarsRef.current = columnSizeVars;
     }, [columnSizeVars]);

package/dist/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -26,5 +26,5 @@ export function HeaderCell({ header, className }) {
             return;
         return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
     };
-    return (_jsxs(Cell, { style: style, onMouseUp: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-header-id": header.id, "data-resizing": isResizing || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
+    return (_jsxs(Cell, { style: style, onMouseUp: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/helperComponents/Cells/HeaderCell/styles.module.css

@@ -69,6 +69,9 @@
      -moz-user-select:none;
           user-select:none;
 }
+.tableHeaderCell[data-align=right]{
+  justify-content:flex-end;
+}
 
 .tableHeaderCellMain{
   overflow:auto;

package/dist/types.d.ts

@@ -9,6 +9,8 @@ type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
 type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
     /** Заголовок колонки */
     header?: string | ((ctx: HeaderContext<TData, unknown>) => string);
+    /** Позиционирование заголовка колонки */
+    headerAlign?: ColumnAlign;
     /** Позиционирование контента ячейки в теле таблицы */
     align?: ColumnAlign;
     /** Отключить паддинг у ячейки в теле таблицы */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.16.8-preview-e82f86de.0",
+  "version": "0.16.8-preview-dff5750f.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,16 +33,16 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/chips": "0.13.4-preview-e82f86de.0",
+    "@snack-uikit/chips": "0.13.4-preview-dff5750f.0",
     "@snack-uikit/icon-predefined": "0.5.1",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/info-block": "0.3.4",
-    "@snack-uikit/list": "0.11.5-preview-e82f86de.0",
+    "@snack-uikit/list": "0.11.5-preview-dff5750f.0",
     "@snack-uikit/pagination": "0.6.7",
     "@snack-uikit/scroll": "0.5.3",
     "@snack-uikit/skeleton": "0.3.4",
     "@snack-uikit/toggles": "0.9.8",
-    "@snack-uikit/toolbar": "0.7.33-preview-e82f86de.0",
+    "@snack-uikit/toolbar": "0.7.33-preview-dff5750f.0",
     "@snack-uikit/truncate-string": "0.4.13",
     "@snack-uikit/typography": "0.6.2",
     "@snack-uikit/utils": "3.3.0",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "31a8e5230a8829ad3222c4bb9acb9b20e5345f4d"
+  "gitHead": "d01a41cec9d3731763b661f14a4cfed67f4a36ea"
 }

package/src/components/Table/Table.tsx

@@ -112,6 +112,7 @@ export function Table<TData extends object>({
     }
     return cols;
   }, [columnDefinitions, enableSelection]);
+
   const columnPinning = useMemo(() => {
     const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
     for (const col of tableColumns) {
@@ -196,6 +197,7 @@ export function Table<TData extends object>({
   }, [loading, rowSelectionProp?.multiRow, table]);
 
   const columnSizeVarsRef = useRef<Record<string, string>>();
+  const headers = table.getFlatHeaders();
 
   const columnSizeVars = useMemo(() => {
     const sizeKey = (id: string) => `--table-column-${id}-size`;
@@ -217,7 +219,6 @@ export function Table<TData extends object>({
     };
 
     const originalColumnDefs = table._getColumnDefs();
-    const headers = table.getFlatHeaders();
     const colSizes: Record<string, string> = {};
 
     for (let i = 0; i < headers.length; i++) {
@@ -248,10 +249,14 @@ export function Table<TData extends object>({
     }
 
     return colSizes;
-    /* effect must be called only on columnSizingInfo.isResizingColumn changes
-      to reduce unnecessary recalculations */
+    /*
+      effect must be called only on columnSizingInfo.isResizingColumn changes
+      to reduce unnecessary recalculations
+
+      headers ids can also change, so they also should present here
+      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table.getState().columnSizingInfo.isResizingColumn]);
+  }, [table.getState().columnSizingInfo.isResizingColumn, headers]);
 
   useEffect(() => {
     columnSizeVarsRef.current = columnSizeVars;

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -46,6 +46,7 @@ export function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>)
       data-no-padding={columnDef.noHeaderCellPadding || undefined}
       data-no-offset={columnDef.noHeaderCellBorderOffset || undefined}
       data-test-id={TEST_IDS.headerCell}
+      data-align={columnDef.headerAlign || undefined}
       data-header-id={header.id}
       data-resizing={isResizing || undefined}
       role='columnheader'

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

@@ -92,6 +92,10 @@
   &[data-resizing] {
     user-select: none;
   }
+
+  &[data-align='right'] {
+    justify-content: flex-end;
+  }
 }
 
 .tableHeaderCellMain {

package/src/types.ts

@@ -33,6 +33,8 @@ type BaseColumnDefinition<TData> = Except<
 > & {
   /** Заголовок колонки */
   header?: string | ((ctx: HeaderContext<TData, unknown>) => string);
+  /** Позиционирование заголовка колонки */
+  headerAlign?: ColumnAlign;
   /** Позиционирование контента ячейки в теле таблицы */
   align?: ColumnAlign;
   /** Отключить паддинг у ячейки в теле таблицы */