@astral/ui 4.44.0 → 4.46.0

package/components/DataGrid/Body/Body.d.ts

@@ -1,99 +1,2 @@
-import { type ChangeEvent, type ReactNode } from 'react';
-import type { Variant } from '../enums';
-import type { CellValue, DataGridColumns, DataGridRowOptions } from '../types';
-export type BodyProps<TData extends Record<string, CellValue>> = {
-    /**
-     * Конфигурация колонок для таблицы
-     */
-    columns: DataGridColumns<TData>[];
-    /**
-     * Поле, которое будет использоваться в качестве ключа
-     */
-    keyId: keyof TData;
-    /**
-     * Конфигурация ширины колонок
-     */
-    gridColumns: string;
-    /**
-     * Если true, показывается анимация загрузки
-     */
-    isLoading?: boolean;
-    /**
-     * Флаг состояния ошибки
-     */
-    isError?: boolean;
-    /**
-     * Текст ошибки
-     */
-    errorMsg?: string;
-    /**
-     * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
-     */
-    activeRowId?: string;
-    /**
-     * Если true, то дерево будет раскрыто по умолчанию
-     * @default 'false'
-     */
-    isInitialExpanded: boolean;
-    /**
-     * Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
-     */
-    expandedLevel: number;
-    /**
-     * Количество отображаемых по умолчанию дочерних элементов
-     */
-    initialVisibleChildrenCount: number;
-    /**
-     * Номер колонки, в которой будет расположена кнопка "Показать все"
-     * Работает только для `variant="subrows"`
-     */
-    moreButtonColumnPosition: number;
-    /**
-     * Если false, кнопка разворачивания элементов не показывается
-     * Работает только для `variant="subrows"`
-     */
-    isVisibleCollapseButton: boolean;
-    /**
-     * Если true, то будет отображаться чекбокс для выбора элемента
-     */
-    isSelectable?: boolean;
-    /**
-     * Массив выбранных строк
-     */
-    selectedRows?: TData[];
-    /**
-     * Массив данных для отображения
-     */
-    rows: Array<TData & {
-        options?: DataGridRowOptions<TData>;
-    }>;
-    /**
-     * Вариант отображения вложенных элементов
-     */
-    variant: `${Variant}`;
-    /**
-     * Используется для отображения переданного кол-ва строк при отсутствии данных
-     */
-    minDisplayRows: number;
-    /**
-     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
-     */
-    emptyCellValue?: ReactNode;
-    /**
-     *  Используется для отображения placeholder при отсутствии данных в таблице
-     */
-    noDataPlaceholder?: ReactNode;
-    /**
-     * Обработчик выбора строки
-     */
-    onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Функция обработки нажатия на кнопку "Повторить запрос"
-     */
-    onRetry: () => void;
-    /**
-     * Обработчик клика строки таблицы
-     */
-    onRowClick?: (row: TData) => void;
-};
+import type { BodyProps } from './types';
 export declare const Body: <TData extends Record<string, unknown>>(props: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/Body/Body.js

@@ -1,30 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
-import { ContentState } from '../../ContentState';
-import { classNames } from '../../utils/classNames';
-import { dataGridClassnames } from '../constants';
 import { Row } from '../Row';
 import { RowContextProvider } from '../Row/RowContext';
 import { Wrapper } from './styles';
-import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
 export const Body = (props) => {
-    const { imagesMap, components } = useContext(ConfigContext);
-    const { isNoData, contentStateProps } = useLogic(props);
+    const { components } = useContext(ConfigContext);
     const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
-    const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
+    const { rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps } = props;
     const renderedRows = rows.map(({ children, options, ...row }) => {
         const rowId = row[keyId];
         const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
         return (_jsx(RowContextProvider, { children: _jsx(Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
     });
-    return (_jsx(Wrapper, { className: classNames(dataGridClassnames.body, {
-            [dataGridClassnames.bodyEmpty]: isNoData,
-        }), "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: _jsx(ContentState, { ...contentStateProps, errorState: {
-                imgAlt: 'Что-то пошло не так',
-                errorList: [errorMsg || ''],
-                imgSrc: imagesMap.defaultErrorImgSrc,
-                onRetry,
-            }, isSmoothLoading: false, children: rows.length ? renderedRows : noDataPlaceholder }) }));
+    return (_jsx(Wrapper, { className: className, "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: rows.length ? renderedRows : noDataPlaceholder }));
 };

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

@@ -1 +1,2 @@
 export * from './Body';
+export * from './types';

package/components/DataGrid/Body/index.js

@@ -1 +1,2 @@
 export * from './Body';
+export * from './types';

package/components/DataGrid/Body/types.d.ts

@@ -0,0 +1,110 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import { type Variant } from '../enums';
+import { type CellValue, type DataGridColumns, type DataGridRowOptions } from '../types';
+export type BodyProps<TData extends Record<string, CellValue>> = {
+    /**
+     * Конфигурация колонок для таблицы
+     */
+    columns: DataGridColumns<TData>[];
+    /**
+     * Поле, которое будет использоваться в качестве ключа
+     */
+    keyId: keyof TData;
+    /**
+     * Конфигурация ширины колонок
+     */
+    gridColumns: string;
+    /**
+     * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
+     */
+    activeRowId?: string;
+    /**
+     * Если true, то дерево будет раскрыто по умолчанию
+     * @default 'false'
+     */
+    isInitialExpanded: boolean;
+    /**
+     * Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
+     */
+    expandedLevel: number;
+    /**
+     * Количество отображаемых по умолчанию дочерних элементов
+     */
+    initialVisibleChildrenCount: number;
+    /**
+     * Номер колонки, в которой будет расположена кнопка "Показать все"
+     * Работает только для `variant="subrows"`
+     */
+    moreButtonColumnPosition: number;
+    /**
+     * Если false, кнопка разворачивания элементов не показывается
+     * Работает только для `variant="subrows"`
+     */
+    isVisibleCollapseButton: boolean;
+    /**
+     * Если true, то будет отображаться чекбокс для выбора элемента
+     */
+    isSelectable?: boolean;
+    /**
+     * Массив выбранных строк
+     */
+    selectedRows?: TData[];
+    /**
+     * Массив данных для отображения
+     */
+    rows: Array<TData & {
+        options?: DataGridRowOptions<TData>;
+    }>;
+    /**
+     * Вариант отображения вложенных элементов
+     */
+    variant: `${Variant}`;
+    /**
+     * Используется для отображения переданного кол-ва строк при отсутствии данных
+     */
+    minDisplayRows: number;
+    /**
+     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     *  Используется для отображения placeholder при отсутствии данных в таблице
+     */
+    noDataPlaceholder?: ReactNode;
+    /**
+     * Обработчик выбора строки
+     */
+    onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик клика строки таблицы
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * Смещение секции
+     */
+    sectionOffset?: number;
+    /**
+     * Общее количество колонок (для правильного определения последней ячейки)
+     */
+    totalColumnsCount?: number;
+    /**
+     * Регистрация элемента строки
+     */
+    registerRowElement: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Отмена регистрации элемента строки
+     */
+    unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Обработчик наведения на строку
+     */
+    onRowEnter: (rowId: string) => void;
+    /**
+     * Обработчик выхода из строки
+     */
+    onRowLeave: (rowId: string, e: PointerEvent) => void;
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
+};

package/components/DataGrid/Body/types.js

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/DataGrid.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext } from 'react';
 import { ConfigContext } from '../ConfigProvider';
-import { classNames } from '../utils/classNames';
+import { ContentState } from '../ContentState';
 import { getInertProps } from '../utils/getInertProps';
 import { Body } from './Body';
-import { dataGridClassnames, EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, MIN_DISPLAY_ROWS_BY_DEFAULT, } from './constants';
+import { EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, MIN_DISPLAY_ROWS_BY_DEFAULT, } from './constants';
 import { DataGridContextProvider } from './DataGridContext';
 import { Variant } from './enums';
 import { Head } from './Head';
 import { Loader } from './Loader';
 import { NoData } from './NoData';
+import { PinnedSections } from './PinnedSections';
 import { Container, DataGridWrapper, DisabledDataGridWrapper } from './styles';
 import { useLogic } from './useLogic';
 export const DataGrid = (props) => {
-    const { isDataGridDisabled, treeRenderConfig, headProps, bodyProps, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, } = useLogic(props);
+    const { isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, pinnedSectionsClassname, dataGridClassname, contentStateProps, rowHoverProps, containerRef, sections, isNoData, bodyClassName, } = useLogic(props);
     const { emptySymbol } = useContext(ConfigContext);
-    const { columns, selectedRows = [], sorting, maxHeight, minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, errorMsg, variant = Variant.Tree, footer, noDataPlaceholder, isLoading, isError, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, className, onRowClick, onSort, noDataOptions, onRetry, headPreAddon, } = props;
+    const { columns, selectedRows = [], maxHeight, minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, isLoading, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const TableContainer = isDataGridDisabled
@@ -27,5 +28,29 @@ export const DataGrid = (props) => {
         }
         return null;
     }, [noDataPlaceholder, noDataOptions, isLoading]);
-    return (_jsx(DataGridContextProvider, { isLoading: isLoading, children: _jsxs(Container, { "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: classNames(dataGridClassnames.root, className), children: [_jsxs(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...getInertProps(isDataGridDisabled), children: [headPreAddon, !isHideHead && (_jsx(Head, { ...headProps, sorting: sorting, onSort: onSort })), _jsx(Body, { ...bodyProps, activeRowId: activeRowId, keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, rows: renderRows, columns: columns, variant: variant, emptyCellValue: emptyCellValue, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, isLoading: isLoading, isError: isError, errorMsg: errorMsg, noDataPlaceholder: renderedPlaceholder(), onRowClick: onRowClick, onRetry: onRetry })] }), _jsx(Loader, { ...loaderProps }), footer && footer] }) }));
+    const commonBodyProps = {
+        ...bodyProps,
+        activeRowId,
+        keyId,
+        selectedRows,
+        minDisplayRows,
+        rows: renderRows,
+        variant,
+        emptyCellValue,
+        isInitialExpanded,
+        expandedLevel,
+        initialVisibleChildrenCount,
+        moreButtonColumnPosition,
+        isVisibleCollapseButton,
+        noDataPlaceholder: renderedPlaceholder(),
+        onRowClick,
+        ...rowHoverProps,
+    };
+    const renderTableContent = () => {
+        if (!hasPinnedColumns) {
+            return (_jsxs(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...getInertProps(isDataGridDisabled), children: [headPreAddon, !isHideHead && (_jsx(Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), _jsx(ContentState, { ...contentStateProps, children: _jsx(Body, { ...commonBodyProps, columns: columns, gridColumns: gridColumns, className: bodyClassName }) })] }));
+        }
+        return (_jsx(ContentState, { ...contentStateProps, children: _jsx(PinnedSections, { sections: sections, className: pinnedSectionsClassname, isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
+    };
+    return (_jsx(DataGridContextProvider, { isLoading: isLoading, children: _jsxs(Container, { ref: containerRef, "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: dataGridClassname, children: [renderTableContent(), _jsx(Loader, { ...loaderProps }), footer && footer] }) }));
 };

package/components/DataGrid/Head/Head.d.ts

@@ -37,5 +37,9 @@ export type HeadProps<TData extends Record<string, CellValue> = DataGridRow, TSo
      * Используется для скрытия чекбокса "Выбрать все"
      */
     isHideSelectAll?: boolean;
+    /**
+     * Смещение секции
+     */
+    sectionOffset?: number;
 };
 export declare const Head: <TData extends Record<string, unknown>, TSortField extends keyof TData>(props: HeadProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/Head/Head.js

@@ -7,10 +7,11 @@ import { CheckboxCell, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const Head = (props) => {
     const { checkboxProps, handleSort } = useLogic(props);
-    const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, } = props;
+    const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, sectionOffset, } = props;
     const renderColumns = useMemo(() => {
         return columns.map(({ field, label, sortable, align, columnHint }, index) => {
-            const isFirstCell = !index;
+            const globalIndex = (sectionOffset ?? 0) + index;
+            const isFirstCell = globalIndex === 0;
             const startAdornmentRender = () => {
                 const showCheckbox = isFirstCell && isSelectable && !isHideSelectAll;
                 if (!showCheckbox && !columnHint) {

package/components/DataGrid/Loader/Loader.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Backdrop, LoaderWrapper, StyledDivider, StyledLinearProgress, } from './styles';
 export const Loader = ({ isLoading = false, isDisabled = false, isVisibleDivider = true, }) => {
-    return (_jsxs(LoaderWrapper, { children: [(isLoading || isDisabled) && _jsx(Backdrop, {}), isLoading && _jsx(StyledLinearProgress, {}), !isLoading && isVisibleDivider && _jsx(StyledDivider, {})] }));
+    return (_jsxs(_Fragment, { children: [(isLoading || isDisabled) && _jsx(Backdrop, {}), _jsxs(LoaderWrapper, { children: [isLoading && _jsx(StyledLinearProgress, {}), !isLoading && isVisibleDivider && _jsx(StyledDivider, {})] })] }));
 };

package/components/DataGrid/Loader/styles.js

@@ -15,11 +15,13 @@ export const StyledDivider = styled(Divider) `
   border-width: 1px;
 `;
 export const LoaderWrapper = styled.div `
-  height: 2px;
+  position: sticky;
+  z-index: ${({ theme }) => theme.zIndex.fab};
+  left: 0;
 `;
 export const StyledLinearProgress = styled(LinearProgress) `
   height: 2px;
-  
+
   .${linearProgressClasses.barColorPrimary} {
     background-color: ${({ theme }) => theme.palette.primary[800]};
   }

package/components/DataGrid/PinnedSections/PinnedSections.d.ts

@@ -0,0 +1,35 @@
+import { type BodyProps } from '../Body';
+import { type HeadProps } from '../Head';
+import { type CellValue, type DataGridRow } from '../types';
+import type { PinnedSection } from './types';
+export type PinnedSectionsProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    /**
+     * Конфигурация закрепленных секций
+     */
+    sections: PinnedSection<TData>[];
+    /**
+     * Конфигурация ширины колонок
+     */
+    gridColumns: string;
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
+    /**
+     * Если true, таблица будет заблокирована для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Параметры предназначены для конфигурации таблицы
+     */
+    bodyProps: Omit<BodyProps<TData>, 'gridColumns' | 'columns'>;
+    /**
+     * Параметры предназначены для конфигурации шапки таблицы
+     */
+    headProps: Omit<HeadProps<TData, TSortField>, 'columns' | 'gridColumns'>;
+    /**
+     * Флаг для отображения placeholder при отсутствии данных
+     */
+    isNoData?: boolean;
+};
+export declare const PinnedSections: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ gridColumns, className, isDisabled, headProps, bodyProps, sections, isNoData, }: PinnedSectionsProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/PinnedSections/PinnedSections.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getInertProps } from '../../utils/getInertProps';
+import { Section } from './Section';
+import { PinnedColumnsContainer } from './styles';
+import { useLogic } from './useLogic';
+export const PinnedSections = ({ gridColumns, className, isDisabled, headProps, bodyProps, sections, isNoData, }) => {
+    const { pinnedContainerStyles, sectionOffsets } = useLogic({ sections });
+    return (_jsx(PinnedColumnsContainer, { "$gridColumns": gridColumns, className: className, ...getInertProps(isDisabled), style: pinnedContainerStyles, children: sections.map(({ columns, position }) => {
+            return (_jsx(Section, { columns: columns, position: position, sectionOffset: sectionOffsets[position], bodyProps: bodyProps, headProps: headProps, isNoData: isNoData }, position));
+        }) }));
+};

package/components/DataGrid/PinnedSections/Section/Section.d.ts

@@ -0,0 +1,3 @@
+import type { DataGridRow } from '../../types';
+import type { SectionProps } from './types';
+export declare const Section: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ columns, position, isNoData, headProps, bodyProps, sectionOffset, }: SectionProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element | null;

package/components/DataGrid/PinnedSections/Section/Section.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body } from '../../Body';
+import { dataGridClassnames } from '../../constants';
+import { Head } from '../../Head';
+import { DataGridSection } from './styles';
+import { useLogic } from './useLogic';
+export const Section = ({ columns, position, isNoData, headProps, bodyProps, sectionOffset, }) => {
+    const { classnames, gridColumns, shouldNotRenderSection } = useLogic({
+        position,
+        isNoData,
+        columns,
+    });
+    if (shouldNotRenderSection) {
+        return null;
+    }
+    return (_jsxs(DataGridSection, { className: classnames, children: [!isNoData && (_jsx(Head, { ...headProps, columns: columns, gridColumns: gridColumns, sectionOffset: sectionOffset })), _jsx(Body, { ...bodyProps, columns: columns, gridColumns: gridColumns, sectionOffset: sectionOffset, className: dataGridClassnames.body })] }));
+};

package/components/DataGrid/PinnedSections/Section/index.d.ts

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

package/components/DataGrid/PinnedSections/Section/index.js

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

package/components/DataGrid/PinnedSections/Section/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DataGridSection: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/PinnedSections/Section/styles.js

@@ -0,0 +1,100 @@
+import { styled } from '../../../styled';
+import { dataGridClassnames } from '../../constants';
+export const DataGridSection = styled.div `
+  display: flex;
+  grid-column: calc(var(--left-columns-count) + 1) / calc(var(--right-columns-count) * -1 - 1);
+  flex-direction: column;
+
+  min-width: 0;
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+
+  & .${dataGridClassnames.header} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab - 1};
+    top: 0;
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+  }
+
+  &.${dataGridClassnames.pinnedSectionNoData} {
+    grid-column: 1 / -1;
+  }
+
+  &.${dataGridClassnames.leftPinnedSection} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab};
+    left: 0;
+
+    container-name: data-grid-left-pinned-section;
+    container-type: scroll-state;
+    grid-column: 1 / calc(var(--left-columns-count) + 1);
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      z-index: ${({ theme }) => theme.zIndex.fab};
+      top: 0;
+      right: 0;
+
+      height: 100%;
+
+      border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
+
+    & .${dataGridClassnames.header} {
+      left: 0;
+    }
+      
+
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    @container data-grid-left-pinned-section scroll-state(stuck: left) {
+      &::after {
+        /* Ширина видимой части тени */
+        width: 4px;
+
+        box-shadow: 3px 0 4px 0 #63636326;
+      }
+    }
+  }
+
+  &.${dataGridClassnames.rightPinnedSection} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab};
+    right: 0;
+
+    container-name: data-grid-right-pinned-section;
+    container-type: scroll-state;
+    grid-column: calc(var(--right-columns-count) * -1 - 1) / -1;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      z-index: ${({ theme }) => theme.zIndex.fab};
+      top: 0;
+      left: 0;
+
+      height: 100%;
+
+      border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
+
+    & .${dataGridClassnames.header} {
+      right: 0;
+    }
+
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    @container data-grid-right-pinned-section scroll-state(stuck: right) {
+      &::after {
+        /* Ширина видимой части тени */
+        width: 4px;
+
+        box-shadow: -3px 0 4px 0 #63636326;
+      }
+    }
+  }
+`;

package/components/DataGrid/PinnedSections/Section/types.d.ts

@@ -0,0 +1,26 @@
+import { type BodyProps } from '../../Body';
+import { type HeadProps } from '../../Head';
+import { type CellValue, type DataGridColumns, type DataGridRow } from '../../types';
+export type SectionProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    /**
+     * Параметры предназначены для конфигурации таблицы
+     */
+    bodyProps: Omit<BodyProps<TData>, 'gridColumns' | 'columns'>;
+    /**
+     * Параметры предназначены для конфигурации шапки таблицы
+     */
+    headProps: Omit<HeadProps<TData, TSortField>, 'columns' | 'gridColumns'>;
+    /**
+     * Флаг для отображения placeholder при отсутствии данных
+     */
+    isNoData?: boolean;
+    /**
+     * Конфигурация колонок для секции
+     */
+    columns: DataGridColumns<TData>[];
+    /**
+     * Позиция секции
+     */
+    position: 'left' | 'center' | 'right';
+    sectionOffset: number;
+};

package/components/DataGrid/PinnedSections/Section/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import type { CellValue, DataGridRow } from '../../..//types';
+import { type SectionProps } from '../types';
+type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow> = Pick<SectionProps<TData>, 'isNoData' | 'position' | 'columns'>;
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow>({ position, isNoData, columns, }: UseLogicParams<TData>) => {
+    classnames: string;
+    gridColumns: string;
+    shouldNotRenderSection: boolean;
+};
+export {};

package/components/DataGrid/PinnedSections/Section/useLogic/useLogic.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { classNames } from '../../../../utils/classNames';
+import { dataGridClassnames } from '../../../constants';
+import { getGridTemplateColumns } from '../../../utils';
+export const useLogic = ({ position, isNoData, columns, }) => {
+    const classnames = useMemo(() => classNames({
+        [dataGridClassnames.leftPinnedSection]: position === 'left',
+        [dataGridClassnames.rightPinnedSection]: position === 'right',
+        [dataGridClassnames.pinnedSectionNoData]: isNoData && position === 'center',
+    }), []);
+    const shouldNotRenderSection = (isNoData && position !== 'center') || !columns || columns.length === 0;
+    const gridColumns = shouldNotRenderSection
+        ? ''
+        : getGridTemplateColumns(columns);
+    return { classnames, gridColumns, shouldNotRenderSection };
+};

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

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

package/components/DataGrid/PinnedSections/index.js

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

package/components/DataGrid/PinnedSections/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const PinnedColumnsContainer: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    $gridColumns: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/PinnedSections/styles.js

@@ -0,0 +1,18 @@
+import { styled } from '../../styled';
+import { dataGridClassnames } from '../constants';
+export const PinnedColumnsContainer = styled.div `
+  overflow: auto;
+  display: grid;
+  grid-template-columns: ${({ $gridColumns }) => $gridColumns};
+
+  width: 100%;
+  height: 100%;
+
+  &.${dataGridClassnames.disabled} {
+   pointer-events: none;
+
+  background: ${({ theme }) => theme.palette.background.element};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  mix-blend-mode: luminosity;
+  }
+`;