@astral/ui 4.45.0 → 4.47.0

package/components/DataGrid/Row/useLogic/useLogic.d.ts

@@ -1,12 +1,13 @@
 import { type MouseEvent, type SyntheticEvent } from 'react';
 import type { CellValue } from '../../types';
-import { type RowProps } from '../Row';
+import type { RowProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = RowProps<TData>;
-export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, }: UseLogicParams<TData>) => {
     isOpen: boolean;
     isShowConnector: boolean;
     childrenColumns: any[];
     rowId: string;
+    rowRef: (element: HTMLElement | null) => void;
     disabled: boolean | undefined;
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;

package/components/DataGrid/Row/useLogic/useLogic.js

@@ -1,14 +1,25 @@
-import { useContext, useEffect, useMemo, useState, } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { redirectToLink } from '../../../utils/redirectToLink';
 import { DataGridContext } from '../../DataGridContext';
 import { Variant } from '../../enums';
 import { DISABLE_ROW_ATTR } from '../constants';
 import { RowContext } from '../RowContext';
 import { mergeColumnsOptions } from './utils';
-export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, }) => {
+export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, }) => {
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
     const { checkIsOpened, toggleOpenItems } = useContext(DataGridContext);
     const { isDisabled, disabledReason } = useContext(RowContext);
+    const savedElementRef = useRef(null);
+    const rowRef = (element) => {
+        if (element) {
+            savedElementRef.current = element;
+            registerRowElement?.(rowId, element);
+        }
+        else if (savedElementRef.current) {
+            unregisterRowElement?.(rowId, savedElementRef.current);
+            savedElementRef.current = null;
+        }
+    };
     const [isVisibleTooltip, setVisibleTooltip] = useState(false);
     const rowId = row[keyId];
     const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
@@ -61,6 +72,7 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         isShowConnector,
         childrenColumns,
         rowId,
+        rowRef,
         disabled,
         isRenderCollapseButton,
         handleToggle,

package/components/DataGrid/constants.d.ts

@@ -9,4 +9,11 @@ export declare const dataGridClassnames: {
     root: string;
     body: string;
     bodyEmpty: string;
+    disabled: string;
+    pinnedSectionNoData: string;
+    dataGridHasPinnedSections: string;
+    pinnedSections: string;
+    leftPinnedSection: string;
+    rightPinnedSection: string;
+    overflowed: string;
 };

package/components/DataGrid/constants.js

@@ -10,4 +10,11 @@ export const dataGridClassnames = {
     root: createUIKitClassname('data-grid'),
     body: createUIKitClassname('data-grid__body'),
     bodyEmpty: createUIKitClassname('data-grid__body_empty'),
+    disabled: createUIKitClassname('data-grid_disabled'),
+    pinnedSectionNoData: createUIKitClassname('data-grid__pinned-section_no-data'),
+    dataGridHasPinnedSections: createUIKitClassname('data-grid_has-pinned-sections'),
+    pinnedSections: createUIKitClassname('data-grid__pinned-sections'),
+    leftPinnedSection: createUIKitClassname('data-grid__left-pinned-section'),
+    rightPinnedSection: createUIKitClassname('data-grid__right-pinned-section'),
+    overflowed: createUIKitClassname('data-grid_overflowed'),
 };

package/components/DataGrid/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useRowHover';

package/components/DataGrid/hooks/index.js

@@ -0,0 +1 @@
+export * from './useRowHover';

package/components/DataGrid/hooks/useRowHover/index.d.ts

@@ -0,0 +1 @@
+export * from './useRowHover';

package/components/DataGrid/hooks/useRowHover/index.js

@@ -0,0 +1 @@
+export * from './useRowHover';

package/components/DataGrid/hooks/useRowHover/useRowHover.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+type UseRowHoverParams = {
+    hasPinnedColumns?: boolean;
+};
+/**
+ * Хук для синхронизации hover-состояния строк DataGrid через прямую работу с DOM.
+ */
+export declare const useRowHover: ({ hasPinnedColumns, }: UseRowHoverParams) => {
+    rowsMapRef: import("react").RefObject<Map<string, Set<HTMLElement>>>;
+    registerRowElement: (rowId: string, el: HTMLElement) => void;
+    unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+    onRowEnter: (rowId: string) => void;
+    onRowLeave: (rowId: string, e: PointerEvent) => void;
+};
+export {};

package/components/DataGrid/hooks/useRowHover/useRowHover.js

@@ -0,0 +1,93 @@
+import { useCallback, useRef } from 'react';
+import { dataGridRowClassnames } from '../../Row/constants';
+/**
+ * Хук для синхронизации hover-состояния строк DataGrid через прямую работу с DOM.
+ */
+export const useRowHover = ({ hasPinnedColumns = false, }) => {
+    const rowsMapRef = useRef(new Map());
+    const hoveredRowIdRef = useRef(null);
+    const highlight = useCallback((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const elements = rowsMapRef.current.get(rowId);
+        if (!elements) {
+            return;
+        }
+        elements.forEach((el) => {
+            if (!el.classList.contains(dataGridRowClassnames.hover)) {
+                el.classList.add(dataGridRowClassnames.hover);
+            }
+        });
+    }, [hasPinnedColumns]);
+    const unhighlight = useCallback((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const elements = rowsMapRef.current.get(rowId);
+        if (!elements) {
+            return;
+        }
+        elements.forEach((el) => el.classList.remove(dataGridRowClassnames.hover));
+        return;
+    }, [hasPinnedColumns]);
+    const registerRowElement = useCallback((rowId, el) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const map = rowsMapRef.current;
+        if (!map.has(rowId)) {
+            map.set(rowId, new Set());
+        }
+        map.get(rowId).add(el);
+    }, [hasPinnedColumns]);
+    const unregisterRowElement = useCallback((rowId, el) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const map = rowsMapRef.current;
+        const set = map.get(rowId);
+        if (!set) {
+            return;
+        }
+        set.delete(el);
+        if (set.size === 0) {
+            map.delete(rowId);
+        }
+    }, [hasPinnedColumns]);
+    const onRowEnter = useCallback((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        if (hoveredRowIdRef.current === rowId) {
+            return;
+        }
+        if (hoveredRowIdRef.current) {
+            unhighlight(hoveredRowIdRef.current);
+        }
+        highlight(rowId);
+        hoveredRowIdRef.current = rowId;
+    }, [hasPinnedColumns, highlight, unhighlight]);
+    /**
+     * Обрабатывает уход курсора со строки.
+     * Убирает hover, если курсор действительно покинул строку.
+     */
+    const onRowLeave = useCallback((rowId, e) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const next = e.relatedTarget;
+        if (next?.closest(`[data-row-id="${rowId}"]`)) {
+            return;
+        }
+        unhighlight(rowId);
+        hoveredRowIdRef.current = null;
+    }, [hasPinnedColumns, unhighlight]);
+    return {
+        rowsMapRef,
+        registerRowElement,
+        unregisterRowElement,
+        onRowEnter,
+        onRowLeave,
+    };
+};

package/components/DataGrid/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../styled';
+import { dataGridClassnames } from './constants';
 export const Container = styled('div', {
     shouldForwardProp: (prop) => !['$maxHeight', '$isAllowHorizontalScroll'].includes(prop),
 }) `
@@ -11,6 +12,22 @@ export const Container = styled('div', {
   width: 100%;
   height: 100%;
   max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : 'initial'};
+
+  &.${dataGridClassnames.dataGridHasPinnedSections} {
+    overflow: hidden;
+  }
+
+  @supports not (container-type: scroll-state) {
+    &.${dataGridClassnames.overflowed} {
+      & .${dataGridClassnames.rightPinnedSection} {
+         box-shadow: -3px 0 4px 0 #63636326;
+      }
+
+      & .${dataGridClassnames.leftPinnedSection} {
+         box-shadow: 3px 0 4px 0 #63636326;
+      }
+    }
+  }
 `;
 export const DataGridWrapper = styled('div', {
     shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),

package/components/DataGrid/types.d.ts

@@ -232,6 +232,10 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Принимает компонент DataGridColumnHintIcon - подсказка в шапке колонки
      */
     columnHint?: ReactNode;
+    /**
+     * Закрепление колонки в таблице
+     */
+    pinned?: 'left' | 'right';
 };
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**

package/components/DataGrid/useLogic/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePinnedColumns';
+export * from './useClassnames';

package/components/DataGrid/useLogic/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './usePinnedColumns';
+export * from './useClassnames';

package/components/DataGrid/useLogic/hooks/useClassnames/index.d.ts

@@ -0,0 +1 @@
+export * from './useClassnames';

package/components/DataGrid/useLogic/hooks/useClassnames/index.js

@@ -0,0 +1 @@
+export * from './useClassnames';

package/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.d.ts

@@ -0,0 +1,12 @@
+type UseClassnamesParams = {
+    isDataGridDisabled?: boolean;
+    dataGridClassName?: string;
+    hasPinnedColumns?: boolean;
+    isNoData?: boolean;
+};
+export declare const useClassnames: ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }: UseClassnamesParams) => {
+    pinnedSectionsClassname: string;
+    dataGridClassname: string;
+    bodyClassName: string;
+};
+export {};

package/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.js

@@ -0,0 +1,14 @@
+import { classNames } from '../../../../utils/classNames';
+import { dataGridClassnames } from '../../../constants';
+export const useClassnames = ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }) => {
+    const pinnedSectionsClassname = classNames(dataGridClassnames.pinnedSections, {
+        [dataGridClassnames.disabled]: isDataGridDisabled,
+    });
+    const dataGridClassname = classNames(dataGridClassnames.root, dataGridClassName, {
+        [dataGridClassnames.dataGridHasPinnedSections]: hasPinnedColumns,
+    });
+    const bodyClassName = classNames(dataGridClassnames.body, {
+        [dataGridClassnames.bodyEmpty]: isNoData,
+    });
+    return { pinnedSectionsClassname, dataGridClassname, bodyClassName };
+};

package/components/DataGrid/useLogic/hooks/usePinnedColumns/index.d.ts

@@ -0,0 +1 @@
+export * from './usePinnedColumns';

package/components/DataGrid/useLogic/hooks/usePinnedColumns/index.js

@@ -0,0 +1 @@
+export * from './usePinnedColumns';

package/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type CellValue, type DataGridColumns, type DataGridRow } from '../../../types';
+type UsePinnedColumnsParams<TData extends Record<string, CellValue> = DataGridRow> = {
+    isLoading?: boolean;
+    columns: DataGridColumns<TData>[];
+};
+export declare const usePinnedColumns: <TData extends Record<string, unknown> = DataGridRow>({ isLoading, columns, }: UsePinnedColumnsParams<TData>) => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    rowHoverProps: {
+        registerRowElement: (rowId: string, el: HTMLElement) => void;
+        unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+        onRowEnter: (rowId: string) => void;
+        onRowLeave: (rowId: string, e: PointerEvent) => void;
+    };
+    sections: import("../../../PinnedSections/types").PinnedSection<TData>[];
+    hasPinnedColumns: boolean;
+};
+export {};

package/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.js

@@ -0,0 +1,43 @@
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { dataGridClassnames } from '../../../constants';
+import { useRowHover } from '../../../hooks/useRowHover';
+import { getColumnSections } from '../../utils/getColumnSections';
+import { syncRowsHeight } from '../../utils/syncRowsHeight';
+export const usePinnedColumns = ({ isLoading, columns, }) => {
+    const containerRef = useRef(null);
+    const hasPinnedColumns = useMemo(() => columns.some((column) => column.pinned), [columns]);
+    const { rowsMapRef, ...rowHoverProps } = useRowHover({ hasPinnedColumns });
+    const isScrollStateSupported = CSS.supports('container-type', 'scroll-state');
+    const checkOverflow = useCallback((element) => {
+        if (element) {
+            return element.scrollWidth > element.clientWidth;
+        }
+        return false;
+    }, []);
+    const { sections } = useMemo(() => getColumnSections(columns), [columns]);
+    useLayoutEffect(() => {
+        if (isLoading || !hasPinnedColumns || typeof window === 'undefined') {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            syncRowsHeight(rowsMapRef.current);
+            if (isScrollStateSupported) {
+                return;
+            }
+            if (checkOverflow(containerRef.current)) {
+                containerRef.current?.classList.add(dataGridClassnames.overflowed);
+            }
+            else {
+                containerRef.current?.classList.remove(dataGridClassnames.overflowed);
+            }
+        });
+        if (!containerRef.current) {
+            return;
+        }
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [hasPinnedColumns, isLoading]);
+    return { containerRef, rowHoverProps, sections, hasPinnedColumns };
+};

package/components/DataGrid/useLogic/useLogic.d.ts

@@ -1,7 +1,9 @@
 import { type ChangeEvent } from 'react';
 import type { CellValue, DataGridProps, DataGridRow } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, }: UseLogicParams<TData, TSortField>) => {
+    pinnedSectionsClassname: string;
+    dataGridClassname: string;
     isDataGridDisabled: boolean | undefined;
     treeRenderConfig: {
         isInitialExpanded?: boolean | undefined;
@@ -11,20 +13,44 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     renderRows: TData[];
     isAllowHorizontalScroll: boolean;
     isHideHead: boolean;
+    hasPinnedColumns: boolean;
+    contentStateProps: {
+        isLoading: boolean | undefined;
+        isError: boolean | undefined;
+        loadingTitle: string;
+        errorState: {
+            imgAlt: string;
+            errorList: string[];
+            imgSrc: string;
+            onRetry: () => void;
+        };
+        isSmoothLoading: boolean;
+    };
+    rowHoverProps: {
+        registerRowElement: (rowId: string, el: HTMLElement) => void;
+        unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+        onRowEnter: (rowId: string) => void;
+        onRowLeave: (rowId: string, e: PointerEvent) => void;
+    };
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    gridColumns: string;
+    isNoData: boolean;
+    headColumns: import("../types").DataGridColumns<TData>[];
     headProps: {
         rowsCount: number;
         uncheckedRowsCount: number;
-        gridColumns: string;
         isSelectable: boolean;
-        columns: import("../types").DataGridColumns<TData>[];
         onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
         isHideSelectAll: boolean | undefined;
+        sorting: import("../types").DataGridSort<TSortField> | undefined;
+        onSort: ((sorting: import("../types").DataGridSort<TSortField> | undefined) => void) | undefined;
     };
     bodyProps: {
-        gridColumns: string;
         isSelectable: boolean;
         onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
     };
+    bodyClassName: string;
+    sections: import("../PinnedSections/types").PinnedSection<TData>[];
     loaderProps: {
         isLoading: boolean | undefined;
         isVisibleDivider: boolean;

package/components/DataGrid/useLogic/useLogic.js

@@ -1,33 +1,28 @@
-import { useCallback, useEffect, useMemo, useRef, } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, } from 'react';
+import { ConfigContext } from '../../ConfigProvider';
 import { useFirstMountState } from '../../useFirstMountState';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
 import { Variant } from '../enums';
-import { getGridTemplateColumns, getIsAllowHorizontalScroll } from './utils';
-export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
+import { getGridTemplateColumns } from '../utils/getGridTemplateColumns';
+import { useClassnames, usePinnedColumns } from './hooks';
+import { getIsAllowHorizontalScroll } from './utils';
+export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, }) => {
     const isFirstRender = useFirstMountState();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
+    const { imagesMap } = useContext(ConfigContext);
     // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
     const selectedRowsRef = useRef(selectedRows);
     useEffect(() => {
         selectedRowsRef.current = selectedRows;
     }, [selectedRows]);
-    const treeRenderConfig = Object.is(variant, Variant.Subrows)
-        ? { ...subrows, isInitialExpanded: true }
-        : tree;
-    const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
     const prevRowsRef = useRef([]);
     useEffect(() => {
         if (!isLoading) {
             prevRowsRef.current = rows;
         }
     }, [rows, isLoading]);
-    const gridColumns = getGridTemplateColumns(columns);
-    const isAllowHorizontalScroll = getIsAllowHorizontalScroll(columns);
-    const uncheckedRowsCount = useMemo(() => {
-        return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
-    }, [availableRows, selectedRows, keyId]);
     const processedColumns = useCallback(() => {
         if (rows.length <= 1) {
             return columns.map((column) => ({ ...column, sortable: false }));
@@ -35,6 +30,26 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         return columns;
     }, [columns, rows]);
     const renderRows = isLoading ? prevRowsRef.current : rows;
+    const isNoData = !renderRows.length;
+    const { containerRef, rowHoverProps, sections, hasPinnedColumns } = usePinnedColumns({
+        isLoading,
+        columns: processedColumns(),
+    });
+    const { pinnedSectionsClassname, dataGridClassname, bodyClassName } = useClassnames({
+        isDataGridDisabled,
+        dataGridClassName: className,
+        hasPinnedColumns,
+        isNoData,
+    });
+    const treeRenderConfig = Object.is(variant, Variant.Subrows)
+        ? { ...subrows, isInitialExpanded: true }
+        : tree;
+    const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
+    const gridColumns = getGridTemplateColumns(columns);
+    const isAllowHorizontalScroll = getIsAllowHorizontalScroll(columns);
+    const uncheckedRowsCount = useMemo(() => {
+        return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
+    }, [availableRows, selectedRows, keyId]);
     const handleSelectAllRows = (event) => {
         if (!onSelectRow) {
             return;
@@ -55,27 +70,51 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         }
         onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
     };
-    const isHideHead = isHideHeaderIfNoData && rows.length === 0;
+    const isHideHead = isHideHeaderIfNoData && isNoData;
+    const contentStateProps = useMemo(() => {
+        return {
+            isLoading: isLoading && isNoData,
+            isError: isError && isNoData,
+            loadingTitle: 'Загрузка данных',
+            errorState: {
+                imgAlt: 'Что-то пошло не так',
+                errorList: [errorMsg || ''],
+                imgSrc: imagesMap.defaultErrorImgSrc,
+                onRetry,
+            },
+            isSmoothLoading: false,
+        };
+    }, [isLoading, isError, isNoData, errorMsg, onRetry, imagesMap]);
     return {
+        pinnedSectionsClassname,
+        dataGridClassname,
         isDataGridDisabled,
         treeRenderConfig,
         renderRows,
         isAllowHorizontalScroll,
         isHideHead,
+        hasPinnedColumns,
+        contentStateProps,
+        rowHoverProps,
+        containerRef,
+        gridColumns,
+        isNoData,
+        headColumns: processedColumns(),
         headProps: {
             rowsCount: availableRows.length,
             uncheckedRowsCount,
-            gridColumns,
             isSelectable,
-            columns: processedColumns(),
             onSelectAllRows: handleSelectAllRows,
             isHideSelectAll,
+            sorting,
+            onSort,
         },
         bodyProps: {
-            gridColumns,
             isSelectable,
             onSelectRow: handleSelectRow,
         },
+        bodyClassName,
+        sections,
         loaderProps: {
             isLoading: !isFirstRender && isLoading,
             isVisibleDivider: Boolean(rows.length),

package/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.d.ts

@@ -0,0 +1,17 @@
+import type { PinnedSection } from '../../../PinnedSections/types';
+import type { DataGridColumns, DataGridRow } from '../../../types';
+/**
+ * Валидирует корректность комбинаций закрепления колонок.
+ * Выбрасывает ошибку, если колонки с pinned="right" не идут непрерывным блоком в конце
+ * или колонки с pinned="left" не идут непрерывным блоком в начале.
+ */
+export declare const validatePinnedColumns: (positions: ('left' | 'right' | 'center')[]) => void;
+/**
+ * Группирует колонки DataGrid по закреплённым позициям (pinned):
+ * - left (закреплены слева)
+ * - center (обычные, не закреплённые)
+ * - right (закреплены справа)
+ */
+export declare const getColumnSections: <TData extends Record<string, unknown> = DataGridRow>(columns: DataGridColumns<TData>[]) => {
+    sections: PinnedSection<TData>[];
+};

package/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.js

@@ -0,0 +1,45 @@
+/**
+ * Валидирует корректность комбинаций закрепления колонок.
+ * Выбрасывает ошибку, если колонки с pinned="right" не идут непрерывным блоком в конце
+ * или колонки с pinned="left" не идут непрерывным блоком в начале.
+ */
+export const validatePinnedColumns = (positions) => {
+    const firstRight = positions.indexOf('right');
+    if (firstRight !== -1 &&
+        positions.slice(firstRight).some((p) => p !== 'right')) {
+        // biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
+        console.error('DataGrid: Колонки с pinned="right" должны идти непрерывным блоком в конце');
+    }
+    // left: должны быть в начале
+    const lastLeft = positions.lastIndexOf('left');
+    if (lastLeft !== -1 &&
+        positions.slice(0, lastLeft + 1).some((p) => p !== 'left')) {
+        // biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
+        console.error('DataGrid: Колонки с pinned="left" должны идти непрерывным блоком в начале');
+    }
+};
+/**
+ * Группирует колонки DataGrid по закреплённым позициям (pinned):
+ * - left (закреплены слева)
+ * - center (обычные, не закреплённые)
+ * - right (закреплены справа)
+ */
+export const getColumnSections = (columns) => {
+    const groups = columns.reduce((acc, col) => {
+        const position = col.pinned ?? 'center';
+        if (!acc[position]) {
+            acc[position] = [];
+        }
+        acc[position].push(col);
+        return acc;
+    }, {});
+    const positions = columns.map((c) => c.pinned ?? 'center');
+    validatePinnedColumns(positions);
+    return {
+        sections: [
+            { position: 'left', columns: groups.left },
+            { position: 'center', columns: groups.center },
+            { position: 'right', columns: groups.right },
+        ],
+    };
+};

package/components/DataGrid/useLogic/utils/getColumnSections/index.d.ts

@@ -0,0 +1 @@
+export * from './getColumnSections';

package/components/DataGrid/useLogic/utils/getColumnSections/index.js

@@ -0,0 +1 @@
+export * from './getColumnSections';

package/components/DataGrid/useLogic/utils/index.d.ts

@@ -1,2 +1,3 @@
-export { getGridTemplateColumns } from './getGridTemplateColumns';
 export { getIsAllowHorizontalScroll } from './getIsAllowHorizontalScroll';
+export { syncRowsHeight } from './syncRowsHeight';
+export { getColumnSections } from './getColumnSections';

package/components/DataGrid/useLogic/utils/index.js

@@ -1,2 +1,3 @@
-export { getGridTemplateColumns } from './getGridTemplateColumns';
 export { getIsAllowHorizontalScroll } from './getIsAllowHorizontalScroll';
+export { syncRowsHeight } from './syncRowsHeight';
+export { getColumnSections } from './getColumnSections';

package/components/DataGrid/useLogic/utils/syncRowsHeight/index.d.ts

@@ -0,0 +1 @@
+export * from './syncRowsHeight';

package/components/DataGrid/useLogic/utils/syncRowsHeight/index.js

@@ -0,0 +1 @@
+export * from './syncRowsHeight';

package/components/DataGrid/useLogic/utils/syncRowsHeight/syncRowsHeight.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Синхронизирует высоту строк DataGrid на основе высоты их содержимого.
+ * Каждая строка устанавливает высоту равной максимальной высоте всех своих ячеек.
+ */
+export declare const syncRowsHeight: (rowsMap: Map<string, Set<HTMLElement>>) => void;