@astral/ui 4.62.2 → 4.64.0

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

@@ -20,6 +20,10 @@ exports.DataGridSection = styled_1.styled.div `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 
+  & .${constants_1.dataGridClassnames.body} {
+    scrollbar-gutter: unset;
+  }
+
   &.${constants_1.dataGridClassnames.pinnedSectionNoData} {
     grid-column: 1 / -1;
   }

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

@@ -14,7 +14,7 @@ const useLogic = ({ position, isNoData, columns, }) => {
     const shouldNotRenderSection = (isNoData && position !== 'center') || !columns || columns.length === 0;
     const gridColumns = shouldNotRenderSection
         ? ''
-        : (0, utils_1.getGridTemplateColumns)(columns);
+        : (0, utils_1.getGridTemplateColumns)((0, utils_1.getFlattenColumns)(columns));
     return { classnames, gridColumns, shouldNotRenderSection };
 };
 exports.useLogic = useLogic;

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

@@ -11,11 +11,15 @@ exports.PinnedColumnsContainer = styled_1.styled.div `
   width: 100%;
   height: 100%;
 
+  & .${constants_1.dataGridClassnames.header} {
+    padding-right: unset;
+  }
+
   &.${constants_1.dataGridClassnames.disabled} {
-   pointer-events: none;
+    pointer-events: none;
 
-  background: ${({ theme }) => theme.palette.background.element};
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  mix-blend-mode: luminosity;
+    background: ${({ theme }) => theme.palette.background.element};
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    mix-blend-mode: luminosity;
   }
 `;

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

@@ -2,19 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const utils_1 = require("../../utils");
 const useLogic = ({ sections, }) => {
+    const leftColumns = sections.find((section) => section.position === 'left')?.columns;
+    const rightColumns = sections.find((section) => section.position === 'right')?.columns;
     const pinnedContainerStyles = {
-        '--left-columns-count': sections.find((section) => section.position === 'left')?.columns
-            ?.length ?? 0,
-        '--right-columns-count': sections.find((section) => section.position === 'right')?.columns
-            ?.length ?? 0,
+        '--left-columns-count': leftColumns
+            ? (0, utils_1.getFlattenColumns)(leftColumns).length
+            : 0,
+        '--right-columns-count': rightColumns
+            ? (0, utils_1.getFlattenColumns)(rightColumns).length
+            : 0,
     };
     const sectionOffsets = (0, react_1.useMemo)(() => {
         const offsets = {};
         let currentOffset = 0;
         sections.forEach((section) => {
             offsets[section.position] = currentOffset;
-            currentOffset += section.columns?.length ?? 0;
+            currentOffset += (0, utils_1.getFlattenColumns)(section.columns).length;
         });
         return offsets;
     }, [sections]);

package/node/components/DataGrid/Row/Row.js

@@ -10,11 +10,13 @@ const checkIsDeepEqual_1 = require("../../utils/checkIsDeepEqual");
 const classNames_1 = require("../../utils/classNames");
 const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
+const Cell_1 = require("../Cell");
+const utils_1 = require("../utils");
 const constants_1 = require("./constants");
 const NestedChildren_1 = require("./NestedChildren");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const utils_1 = require("./utils");
+const utils_2 = require("./utils");
 const rootCva = (0, cva_1.cva)(constants_1.dataGridRowClassnames.root, {
     variants: {
         isShowConnector: {
@@ -29,6 +31,13 @@ const rowContentCva = (0, cva_1.cva)(constants_1.dataGridRowContentClassnames.ro
         },
     },
 });
+const groupedColumnLabelCva = (0, cva_1.cva)(constants_1.dataGridGroupedColumnLabelClassnames.root, {
+    variants: {
+        hidden: {
+            true: constants_1.dataGridGroupedColumnLabelClassnames.hidden,
+        },
+    },
+});
 const RowComponent = (props) => {
     const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, } = (0, useLogic_1.useLogic)(props);
     const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
@@ -50,8 +59,18 @@ const RowComponent = (props) => {
         return columns?.map((cell, index) => {
             const cellId = `${rowId}-${index}`;
             const globalIndex = (sectionOffset ?? 0) + index;
-            const isDisabledCell = (0, utils_1.checkIsDisabled)(disabled, availableCellsByIndex, globalIndex);
+            const isDisabledCell = (0, utils_2.checkIsDisabled)(disabled, availableCellsByIndex, globalIndex);
             const isFirstCell = globalIndex === 0;
+            if ((0, utils_1.isGroupColumns)(cell)) {
+                const { label, children, hideTitleOnMobile, isHideOnMobile } = cell;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.GroupedColumnLabel, { variant: "caption", color: "grey", colorIntensity: "700", className: groupedColumnLabelCva({
+                                hidden: hideTitleOnMobile || isHideOnMobile,
+                            }), children: label }), children.map((child, childIndex) => {
+                            const childCellId = `${cellId}-${childIndex}`;
+                            const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
+                            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, className: Cell_1.dataGridCellClassnames.grouped }, childCellId));
+                        })] }, cellId));
+            }
             return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
         });
     }, [

package/node/components/DataGrid/Row/constants.d.ts

@@ -12,3 +12,11 @@ export declare const dataGridRowContentClassnames: {
     root: string;
     hovered: string;
 };
+export declare const dataGridRowCellClassnames: {
+    single: string;
+    grouped: string;
+};
+export declare const dataGridGroupedColumnLabelClassnames: {
+    root: string;
+    hidden: string;
+};

package/node/components/DataGrid/Row/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridRowContentClassnames = exports.dataGridRowClassnames = exports.MOBILE_DRAWER_TITLE = exports.DISABLE_ROW_ATTR = void 0;
+exports.dataGridGroupedColumnLabelClassnames = exports.dataGridRowCellClassnames = exports.dataGridRowContentClassnames = exports.dataGridRowClassnames = exports.MOBILE_DRAWER_TITLE = exports.DISABLE_ROW_ATTR = void 0;
 const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.DISABLE_ROW_ATTR = 'data-row-disable';
 exports.MOBILE_DRAWER_TITLE = 'Причина ';
@@ -16,3 +16,11 @@ exports.dataGridRowContentClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content'),
     hovered: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content_hovered'),
 };
+exports.dataGridRowCellClassnames = {
+    single: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-cell_single'),
+    grouped: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-cell_grouped'),
+};
+exports.dataGridGroupedColumnLabelClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-grouped-column-label'),
+    hidden: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-grouped-column-label_hidden'),
+};

package/node/components/DataGrid/Row/styles.d.ts

@@ -43,3 +43,13 @@ export declare const BottomDrawerContent: import("@emotion/styled/dist/declarati
     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>, {}>;
+export declare const GroupedColumnLabel: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
+    color?: import("../../Typography").TypographyColor | undefined;
+    variant?: import("../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../Typography").Intensity | undefined;
+    component?: import("../../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/DataGrid/Row/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomDrawerContent = exports.ChevronIcon = exports.CollapseButton = exports.CollapseCell = exports.CheckboxCell = exports.CellStyled = exports.ContentWrapper = exports.Wrapper = void 0;
+exports.GroupedColumnLabel = exports.BottomDrawerContent = exports.ChevronIcon = exports.CollapseButton = exports.CollapseCell = exports.CheckboxCell = exports.CellStyled = exports.ContentWrapper = exports.Wrapper = void 0;
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
 const IconButton_1 = require("../../IconButton");
 const styled_1 = require("../../styled");
+const Typography_1 = require("../../Typography");
 const Cell_1 = require("../Cell");
 const constants_1 = require("../constants");
 const constants_2 = require("./constants");
@@ -105,7 +106,6 @@ exports.ContentWrapper = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-template-columns: 1fr;
-    gap: ${({ theme }) => theme.spacing(3)};
   }
 `;
 exports.CellStyled = (0, styled_1.styled)(Cell_1.Cell) `
@@ -157,3 +157,16 @@ exports.BottomDrawerContent = styled_1.styled.div `
       padding: ${({ theme }) => theme.spacing(5, 4)};
     }
 `;
+exports.GroupedColumnLabel = (0, styled_1.styled)(Typography_1.Typography) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+
+    margin-top: ${({ theme }) => theme.spacing(3)};
+
+    &.${constants_2.dataGridGroupedColumnLabelClassnames.hidden} {
+      display: none;
+    }
+  }
+`;

package/node/components/DataGrid/constants.d.ts

@@ -13,11 +13,14 @@ export declare const dataGridClassnames: {
     bodyEmpty: string;
     disabled: string;
     pinnedSectionNoData: string;
-    dataGridHasPinnedSections: string;
+    hasPinnedSections: string;
     pinnedSections: string;
     leftPinnedSection: string;
     rightPinnedSection: string;
     overflowed: string;
     wrapper: string;
     isAllowHorizontalScroll: string;
+    hasGroupedColumns: string;
+    gridViewFull: string;
+    gridViewStandard: string;
 };

package/node/components/DataGrid/constants.js

@@ -17,11 +17,14 @@ exports.dataGridClassnames = {
     bodyEmpty: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body_empty'),
     disabled: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_disabled'),
     pinnedSectionNoData: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__pinned-section_no-data'),
-    dataGridHasPinnedSections: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_has-pinned-sections'),
+    hasPinnedSections: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_has-pinned-sections'),
     pinnedSections: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__pinned-sections'),
     leftPinnedSection: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__left-pinned-section'),
     rightPinnedSection: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__right-pinned-section'),
     overflowed: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_overflowed'),
     wrapper: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__wrapper'),
     isAllowHorizontalScroll: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_is-allow-horizontal-scroll'),
+    hasGroupedColumns: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_has-grouped-columns'),
+    gridViewFull: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_grid-view-full'),
+    gridViewStandard: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_grid-view-standard'),
 };

package/node/components/DataGrid/faker.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeDataListWithTree = exports.makeDataList = exports.makeColumns = exports.makeRandomDate = void 0;
 const faker_1 = require("@ui/dev/faker");
+const utils_1 = require("./utils");
 const RECIPIENTS = [
     'ИП Иванов О.В.',
     'ООО "Новая организация"',
@@ -16,22 +17,25 @@ const makeRandomDate = () => {
 };
 exports.makeRandomDate = makeRandomDate;
 const makeColumns = (columnsTemplate, mergedColumns = []) => {
-    const mergedColumnsMap = mergedColumns.reduce((acc, { field, ...columnsOptions }) => {
-        if (field) {
+    const mergedColumnsMap = mergedColumns.reduce((acc, column) => {
+        if (!(0, utils_1.isGroupColumns)(column) && column.field) {
+            const { field, ...columnsOptions } = column;
             return {
-                // biome-ignore lint/performance/noAccumulatingSpread: <>
                 ...acc,
                 [field]: columnsOptions,
             };
         }
         return acc;
     }, {});
-    return columnsTemplate.map((column) => ({
-        ...column,
-        // biome-ignore lint/suspicious/noTsIgnore: <>
-        // @ts-ignore
-        ...(mergedColumnsMap[column?.field] || {}),
-    }));
+    return columnsTemplate.map((column) => {
+        if ((0, utils_1.isGroupColumns)(column) || !column.field) {
+            return column;
+        }
+        return {
+            ...column,
+            ...(mergedColumnsMap[column.field] || {}),
+        };
+    });
 };
 exports.makeColumns = makeColumns;
 const makeDataList = (dataObjTemplate, options) => {

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

@@ -1,4 +1,4 @@
 export { DataGrid } from './DataGrid';
-export type { DataGridProps, DataGridColumns, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
+export type { DataGridProps, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';

package/node/components/DataGrid/styles.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisabledDataGridWrapper = exports.DataGridWrapper = exports.Container = void 0;
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_1 = require("./Cell/constants");
+const constants_2 = require("./constants");
+const HeadCell_1 = require("./HeadCell");
+const constants_3 = require("./Row/constants");
 exports.Container = styled_1.styled.div `
   --max-height: initial;
 
@@ -16,48 +19,127 @@ exports.Container = styled_1.styled.div `
   height: 100%;
   max-height: var(--max-height);
 
-  &.${constants_1.dataGridClassnames.isAllowHorizontalScroll} {
+  &.${constants_2.dataGridClassnames.isAllowHorizontalScroll} {
     overflow: auto hidden;
 
-    & .${constants_1.dataGridClassnames.wrapper} {
+    & .${constants_2.dataGridClassnames.wrapper} {
       overflow: auto hidden;
     }
   }
 
-  &.${constants_1.dataGridClassnames.dataGridHasPinnedSections} {
+  &.${constants_2.dataGridClassnames.hasPinnedSections} {
     overflow: hidden;
   }
 
+  &.${constants_2.dataGridClassnames.hasGroupedColumns} {
+    & .${constants_2.dataGridClassnames.header} {
+      grid-template-rows: repeat(2, auto);
+
+      & .${HeadCell_1.headCellClassnames.groupParent} {
+        grid-column: var(--grid-column-start) / var(--grid-column-end);
+        grid-row: 1;
+        justify-content: center;
+      }
+
+      & .${HeadCell_1.headCellClassnames.groupChild} {
+        grid-row: 2;
+        justify-content: center;
+      }
+
+      & .${HeadCell_1.headCellClassnames.singleColumn} {
+        grid-row: 1 / -1;
+
+        height: 80px;
+      }
+    }
+  }
+
   @supports not (container-type: scroll-state) {
-    &.${constants_1.dataGridClassnames.overflowed} {
-      & .${constants_1.dataGridClassnames.rightPinnedSection} {
+    &.${constants_2.dataGridClassnames.overflowed} {
+      & .${constants_2.dataGridClassnames.rightPinnedSection} {
          box-shadow: -3px 0 4px 0 #63636326;
       }
 
-      & .${constants_1.dataGridClassnames.leftPinnedSection} {
+      & .${constants_2.dataGridClassnames.leftPinnedSection} {
          box-shadow: 3px 0 4px 0 #63636326;
       }
     }
   }
 
+  &.${constants_2.dataGridClassnames.gridViewFull} {
+    & .${constants_2.dataGridClassnames.header} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-top-left-radius: ${({ theme }) => theme.shape.medium};
+      border-top-right-radius: ${({ theme }) => theme.shape.medium};
+    }
+
+    & .${constants_1.dataGridCellClassnames.root},
+    & .${HeadCell_1.headCellClassnames.root} {
+      border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
+      border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+
+      &:first-of-type,
+      &:first-of-type + .${HeadCell_1.headCellClassnames.groupChild} {
+        border-left: none;
+      }
+    }
+
+    & .${HeadCell_1.headCellClassnames.singleColumn},
+    & .${HeadCell_1.headCellClassnames.groupParent} {
+      border-top: none;
+    }
+
+    & .${constants_3.dataGridRowClassnames.root}:last-of-type .${constants_1.dataGridCellClassnames.root} {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    }
+
+    &:not(.${constants_2.dataGridClassnames.hasPinnedSections}) .${constants_2.dataGridClassnames.body},
+    & .${constants_2.dataGridClassnames.pinnedSections} {
+      container-name: data-grid-scroll-container;
+      container-type: scroll-state;
+    }
+
+    /* Прогрессивное улучшение. Убираем нижнюю границу последней строки когда scrollbar находится в нижней точке. Для того что бы избежать двойного разделителя снизу */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    @container data-grid-scroll-container scroll-state((scrollable: y) and (not (scrollable: bottom))) {
+      & .${constants_3.dataGridRowClassnames.root}:last-of-type .${constants_1.dataGridCellClassnames.root} {
+        border-bottom: none;
+      }
+    }
+
+    & .${constants_3.dataGridRowClassnames.root}:first-of-type .${constants_1.dataGridCellClassnames.root} {
+      border-top: none;
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     overflow: initial;
 
-    & .${constants_1.dataGridClassnames.loadingPlaceholder} {
+    & .${constants_2.dataGridClassnames.loadingPlaceholder} {
       justify-content: flex-start;
     }
 
-    &.${constants_1.dataGridClassnames.dataGridHasPinnedSections} {
+    &.${constants_2.dataGridClassnames.hasPinnedSections} {
       overflow: initial;
     }
 
-    &.${constants_1.dataGridClassnames.isAllowHorizontalScroll} {
+    &.${constants_2.dataGridClassnames.isAllowHorizontalScroll} {
       overflow: initial;
 
-      & .${constants_1.dataGridClassnames.wrapper} {
+      & .${constants_2.dataGridClassnames.wrapper} {
         overflow: initial;
       }
     }
+
+    &.${constants_2.dataGridClassnames.gridViewFull} {
+      & .${constants_1.dataGridCellClassnames.root}, & .${HeadCell_1.headCellClassnames.root} {
+        border: none;
+      }
+
+      & .${constants_3.dataGridRowClassnames.root}:last-of-type .${constants_1.dataGridCellClassnames.root} {
+        border-bottom: none;
+      }
+    }
   }
 `;
 exports.DataGridWrapper = styled_1.styled.div `

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

@@ -175,6 +175,11 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * Убирает шапку таблицы, когда нет данных
      */
     isHideHeaderIfNoData?: boolean;
+    /**
+     * Режим отображения разделителей в таблице
+     * @default standard
+     */
+    gridViewMode?: 'full' | 'standard';
 };
 export type DataGridSort<TSortField> = {
     /**
@@ -188,7 +193,37 @@ export type DataGridSort<TSortField> = {
      */
     sort: SortState;
 };
-export type DataGridColumns<TData extends Record<string, CellValue>> = {
+export type DataGridGroupColumn<TData extends Record<string, CellValue>> = {
+    /**
+     * Группа дочерних колонок
+     */
+    children: DataGridSingleColumn<TData>[];
+    /**
+     * Принимает компонент DataGridColumnHintIcon - подсказка в шапке колонки
+     */
+    columnHint?: ReactNode;
+    /**
+     * Название колонки таблицы
+     */
+    label: string;
+    /**
+     * Закрепление группы дочерних колонок в таблице
+     */
+    pinned?: 'left' | 'right';
+    /**
+     * Скрывает группу колонок на мобильных устройствах
+     */
+    isHideOnMobile?: boolean;
+    /**
+     * Скрывает название группы колонок на мобильных устройствах
+     */
+    hideTitleOnMobile?: boolean;
+    /**
+     * Скрывает персональные данные в группе колонок
+     */
+    isHidePersonalData?: boolean;
+};
+export type DataGridSingleColumn<TData extends Record<string, CellValue>> = {
     /**
      * @example {field: 'test'}
      * Значение ключа поля данных для колонки
@@ -247,7 +282,9 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Скрывает заголовок колонки на мобильных устройствах
      */
     hideTitleOnMobile?: boolean;
+    children?: never;
 };
+export type DataGridColumns<TData extends Record<string, CellValue>> = DataGridSingleColumn<TData> | DataGridGroupColumn<TData>;
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**
      * Значение ключа поля данных для колонки

package/node/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/useDataGridMobileLogic.d.ts

@@ -1,9 +1,9 @@
 import { type RefObject } from 'react';
-import { type CellValue, type DataGridColumns, type DataGridRow } from '../../../types';
+import { type CellValue, type DataGridRow, type DataGridSingleColumn } from '../../../types';
 type UseDataGridMobileLogicParams<TData extends Record<string, CellValue> = DataGridRow> = {
     containerRef?: RefObject<HTMLDivElement | null>;
     isLoading?: boolean;
-    columns?: DataGridColumns<TData>[];
+    columns?: DataGridSingleColumn<TData>[];
     rows?: TData[];
     isNoScrollToTop?: boolean;
 };

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

@@ -1,7 +1,7 @@
 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, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, }: 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, maxHeight, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
     dataGridClassName: string | undefined;
     containerCssVars: import("react").CSSProperties;
     isDataGridDisabled: boolean | undefined;
@@ -37,12 +37,14 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     containerRef: import("react").RefObject<HTMLDivElement | null>;
     gridColumns: string;
     isNoData: boolean;
+    gridViewMode: "standard" | "full";
     headColumns: import("../types").DataGridColumns<TData>[];
     isLoading: boolean | undefined;
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
     };
+    hasGroupedColumns: boolean;
     headProps: {
         rowsCount: number;
         uncheckedRowsCount: number;

package/node/components/DataGrid/useLogic/useLogic.js

@@ -11,7 +11,7 @@ const enums_1 = require("../enums");
 const utils_1 = require("../utils");
 const hooks_1 = require("./hooks");
 const utils_2 = require("./utils");
-const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, }) => {
+const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -42,7 +42,7 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
     const { isMobile, mobileSkeletonProps } = (0, hooks_1.useDataGridMobileLogic)({
         containerRef,
         isLoading,
-        columns: processedColumns(),
+        columns: (0, utils_1.getFlattenColumns)(processedColumns()),
         rows,
         isNoScrollToTop: isLoading && isNoData,
     });
@@ -50,8 +50,8 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         ? { ...subrows, isInitialExpanded: true }
         : tree;
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
-    const gridColumns = (0, utils_1.getGridTemplateColumns)(columns);
-    const isAllowHorizontalScroll = (0, utils_2.getIsAllowHorizontalScroll)(columns);
+    const gridColumns = (0, react_1.useMemo)(() => (0, utils_1.getGridTemplateColumns)((0, utils_1.getFlattenColumns)(columns)), [columns]);
+    const isAllowHorizontalScroll = (0, utils_2.getIsAllowHorizontalScroll)((0, utils_1.getFlattenColumns)(columns));
     const uncheckedRowsCount = (0, react_1.useMemo)(() => {
         return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
     }, [availableRows, selectedRows, keyId]);
@@ -75,7 +75,9 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         }
         onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
     };
-    const isHideHead = isHideHeaderIfNoData && isNoData;
+    const hasGroupedColumns = columns.some(utils_1.isGroupColumns);
+    const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
+    const isHideHead = (isHideHeaderIfNoData && isNoData) || (hasGroupedColumns && isNoData);
     const contentStateProps = (0, react_1.useMemo)(() => {
         return {
             isLoading: (isLoading && isNoData) || (isMobile && isLoading),
@@ -107,9 +109,11 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         containerRef,
         gridColumns,
         isNoData,
+        gridViewMode,
         headColumns: processedColumns(),
         isLoading,
         mobileSkeletonProps,
+        hasGroupedColumns,
         headProps: {
             rowsCount: availableRows.length,
             uncheckedRowsCount,

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

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