@moysklad/uikit 28.1.0 → 31.20.0

package/dist/data-grid/Filters/DateRangeFilter/types.d.ts

@@ -29,68 +29,80 @@ export interface DateRangeFilterNoDateValue extends DateRangeFilterValue {
     value: null;
 }
 export interface DateRangeFilterLocale {
-    radiobuttons: {
-        period: string;
-        day: string;
-        week: string;
-        month: string;
-        anyDate: string;
-        noDate: string;
-    };
-    dayQuickFilters: {
-        yesterday: string;
-        today: string;
-    };
-    footer: {
-        timeSelectionToggle: string;
-        timeSelectionToggleHint: string;
-        clearFilterButton: string;
-    };
-    slider: {
-        day: {
-            title: string;
-            placeholder: string;
-            dateFormat: string;
+    translate: {
+        radiobuttons: {
+            period: string;
+            day: string;
+            week: string;
+            month: string;
+            anyDate: string;
+            noDate: string;
         };
-        week: {
-            title: string;
-            placeholder: string;
-            dateFormat: {
-                sameMonth: {
-                    firstDate: string;
-                    endDate: string;
-                };
-                differentMonth: {
-                    firstDate: string;
-                    endDate: string;
-                };
+        dayQuickFilters: {
+            yesterday: string;
+            today: string;
+        };
+        footer: {
+            timeSelectionToggle: string;
+            timeSelectionToggleHint: string;
+            clearFilterButton: string;
+        };
+        slider: {
+            day: {
+                title: string;
+                placeholder: string;
+            };
+            week: {
+                title: string;
+                placeholder: string;
             };
-            tooltipDateFormat: {
-                sameMonth: {
-                    firstDate: string;
-                    endDate: string;
+            month: {
+                title: string;
+                placeholder: string;
+            };
+        };
+    };
+    format: {
+        slider: {
+            day: {
+                dateFormat: string;
+            };
+            week: {
+                dateFormat: {
+                    sameMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                    differentMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
                 };
-                differentMonth: {
-                    firstDate: string;
-                    endDate: string;
+                tooltipDateFormat: {
+                    sameMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                    differentMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
                 };
             };
+            month: {
+                dateFormat: string;
+            };
         };
-        month: {
-            title: string;
-            placeholder: string;
-            dateFormat: string;
+        inputMask: {
+            withTime: string;
+            withoutTime: string;
         };
+        emptyDate: {
+            withTime: string;
+            withoutTime: string;
+        };
+        dateFormat: string;
+        dateWithTimeFormat: string;
+        monthCalendarFormat: string;
     };
-    inputMask: {
-        withTime: string;
-        withoutTime: string;
-    };
-    emptyDate: {
-        withTime: string;
-        withoutTime: string;
-    };
-    dateFormat: string;
-    dateWithTimeFormat: string;
-    monthCalendarFormat: string;
 }

package/dist/data-grid/Filters/FiltersContainer/FiltersContainer.js

@@ -24,7 +24,8 @@ const FiltersContainer = (props)=>{
     });
     const { getRenderParams, getFilterValue, getFilterContainOption, filtersState, changeFiltersState } = useRenderParams({
         initialState: filters,
-        values: props.values
+        values: props.values,
+        onChange: props.onChange
     });
     const getInitialValue = (filter)=>{
         if (filter.initialValue) return filter.initialValue;

package/dist/data-grid/Filters/FiltersContainer/utils/useRenderParams.d.ts

@@ -3,6 +3,7 @@ import type { Filter, FilterContainerValues, FilterProps, FilterValue, RenderVal
 interface UseRenderParamsArgs {
     initialState: Filter[];
     values?: Map<string, FilterContainerValues>;
+    onChange?: (values: Map<string, FilterContainerValues>) => void;
 }
 export declare const useRenderParams: (args: UseRenderParamsArgs) => {
     getRenderParams: (filter: Filter) => RenderValueParams<FilterProps>;

package/dist/data-grid/Filters/FiltersContainer/utils/useRenderParams.js

@@ -12,6 +12,13 @@ const getInitialFiltersState = (initialState)=>{
 };
 const useRenderParams = (args)=>{
     const [filtersState, setFiltersState] = useState(()=>args.values ?? getInitialFiltersState(args.initialState));
+    const modifyFiltersState = (modifier)=>{
+        setFiltersState((filtersState)=>{
+            const modifiedState = modifier(filtersState);
+            args.onChange?.(modifiedState);
+            return modifiedState;
+        });
+    };
     useEffect(()=>{
         if (args.values) setFiltersState(args.values);
     }, [
@@ -34,7 +41,7 @@ const useRenderParams = (args)=>{
     const getSelectFilterRenderParams = (filter)=>({
             value: getFilterValue(filter),
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -48,7 +55,7 @@ const useRenderParams = (args)=>{
     const getInputFilterRenderParams = (filter)=>({
             value: getFilterValue(filter) ?? '',
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -62,7 +69,7 @@ const useRenderParams = (args)=>{
     const getMultiselectFilterRenderParams = (filter)=>({
             value: getFilterValue(filter) ?? [],
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -76,7 +83,7 @@ const useRenderParams = (args)=>{
     const getDateRangeFilterRenderParams = (filter)=>({
             value: getFilterValue(filter),
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -90,7 +97,7 @@ const useRenderParams = (args)=>{
     const getRangeFilterRenderParams = (filter)=>({
             value: getFilterValue(filter),
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -104,7 +111,7 @@ const useRenderParams = (args)=>{
     const getContainOptionRenderParams = (filter, defaultValue)=>({
             selectedContainOption: filtersState.get(filter.id)?.selectedContainOption,
             onChangeContainOption: (selectedContainOption)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -148,6 +155,7 @@ const useRenderParams = (args)=>{
     const getFilterContainOption = (filter, values)=>(values ?? filtersState).get(filter.id)?.selectedContainOption;
     const changeFiltersState = (filtersState)=>{
         setFiltersState(filtersState);
+        args.onChange?.(filtersState);
     };
     return {
         getRenderParams,

package/dist/data-grid/Filters/MultiselectFilter/MultiselectFilter.js

@@ -10,7 +10,7 @@ import { ContainOptionsList } from "../ContainOptionsList/index.js";
 import { OutlineInput } from "../OutlineInput/index.js";
 import { InputContent } from "./InputContent/index.js";
 import MultiselectFilter_module from "./MultiselectFilter.module.js";
-const MultiselectFilter = /*#__PURE__*/ forwardRef(({ items, values, containOptions, selectedContainOption, showSelectAllCheckbox, selectAllCheckboxText, closeDropdownOnCreateButtonClick, getManyItemsChipText, getNotFoundText, showCreateButton, getCreateButtonText, onCreateButtonClick, createButtonIcon, limit, getLimitText, loadingText, onSearch, tooltipDelay, dropdownZIndex, renderItem, optionsClassName, inputText, hideOptions, onChangeContainOption, onChange, onDropdownVisibleChange, ...props }, ref)=>{
+const MultiselectFilter = /*#__PURE__*/ forwardRef(({ items, values, containOptions, selectedContainOption, showSelectAllCheckbox, selectAllCheckboxText, closeDropdownOnCreateButtonClick, getManyItemsChipText, getOtherText, getNotFoundText, showCreateButton, getCreateButtonText, onCreateButtonClick, createButtonIcon, limit, getLimitText, loadingText, onSearch, tooltipDelay, dropdownZIndex, renderItem, optionsClassName, inputText, hideOptions, onChangeContainOption, onChange, onDropdownVisibleChange, ...props }, ref)=>{
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const dropdownId = useId();
     const outlineInputRef = useRef(null);
@@ -115,7 +115,7 @@ const MultiselectFilter = /*#__PURE__*/ forwardRef(({ items, values, containOpti
                     chipRefs: chipRefs,
                     onItemDelete: handleDeleteItemFromInputContent,
                     onDeleteFirstItem: handleDeleteFirstItemFromInputContent,
-                    getOtherText: getManyItemsChipText
+                    getOtherText: getOtherText
                 }),
                 staticActions: /*#__PURE__*/ jsx("div", {
                     onFocus: (e)=>e.preventDefault(),

package/dist/data-grid/Filters/OutlineInput/OutlineInput.js

@@ -5,7 +5,7 @@ import { Text, TextTag } from "../../../components/Text/Text.js";
 import { useId } from "../../../hooks/useId/index.js";
 import OutlineInput_module from "./OutlineInput.module.js";
 const DEFAULT_FOCUSED_WIDTH = 256;
-const OutlineInput = /*#__PURE__*/ forwardRef(({ id, className, value, label, name, testId, error, disabled, actions, focusedWidth, style, tabIndex, inputRef: inputRefProp, inputContent, focusedState, onClick, renderCustomInput, staticActions, ...props }, ref)=>{
+const OutlineInput = /*#__PURE__*/ forwardRef(({ id, className, value, label, name, testId, error, disabled, actions, focusedWidth, style, tabIndex, inputRef: inputRefProp, inputContent, focusedState, onClick, renderCustomInput, onChange, staticActions, ...props }, ref)=>{
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const inputId = useId(id);
@@ -82,7 +82,7 @@ const OutlineInput = /*#__PURE__*/ forwardRef(({ id, className, value, label, na
                                 onKeyUp: props.onKeyUp,
                                 ref: assignInputRef,
                                 value,
-                                onChange: props.onChange
+                                onChange
                             }),
                             actions ? /*#__PURE__*/ jsx("div", {
                                 className: OutlineInput_module.actionsContainer,

package/dist/data-grid/Filters/OutlineInput/OutlineInput_module.css

@@ -86,7 +86,7 @@
 }
 
 .wrapper-rrsJYW:focus-within, .wrapper-rrsJYW.focused-czIkxi {
-  --input-filter-border: var(--elements-hover, #091739);
+  --input-filter-border: var(--border-focused, #091739);
   --input-filter-label: var(--text-primary, #9fa7af);
   outline: none;
 }

package/dist/data-grid/Table/Table.d.ts

@@ -1,54 +1,46 @@
 import React, { type CSSProperties, type ReactNode } from 'react';
-import type { ColumnSizingState, Row, RowData, Table as TanstackTable, VisibilityState } from '@tanstack/react-table';
-import type { ValueOf } from '../../common';
-import { TableRowSize } from '../types';
-import { type HighlightedRowColor } from './components';
-import type { DnDConfig, TFooterToggleConfig, WithRowClickLink } from './types';
+import type { ListRange } from 'react-virtuoso';
+import type { ColumnSizingState, Row, RowData, Table as TanstackTable } from '@tanstack/react-table';
+import { type TableRowSizeValue } from '../types';
+import { type DnDConfig, type HighlightedRowColor, type RowClickCallOrderValue, type TFooterToggleConfig, type WithRowClickLink } from './types';
 declare module '@tanstack/react-table' {
     interface TableMeta<TData extends RowData> {
         updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
         onSelectAll?: () => void;
+        [key: string]: unknown;
     }
 }
 export type TableProps<T extends WithRowClickLink> = {
     wrapperClassName?: string;
     className?: string;
     isLoading: boolean;
-    /**
-     * @deprecated Используется table.getState().rowSelection
-     */
-    rowSelection?: Record<string, boolean>;
-    /**
-     * @deprecated Используется table.getState().columnVisibility
-     */
-    columnVisibility?: VisibilityState;
     dataTestId?: string;
     pagination?: ReactNode;
     footerToggleConfig?: TFooterToggleConfig;
     tableHeightCalcDeps?: unknown[];
     bottomOffset?: number;
     table: TanstackTable<T>;
-    /**
-     * @deprecated Согласно дизайну строки доходят до правой границы контейнера
-     */
-    fillContainerSpace?: boolean;
-    /**
-     * @deprecated Согласно дизайну таблица принимает 100% от ширины родителя
-     */
     fullWidth?: boolean;
     fullHeight?: boolean;
     dndConfig?: DnDConfig;
     renderRowContent?: (row: Row<T>) => ReactNode;
     getRowHighlightColor?: (row: Row<T>) => HighlightedRowColor | undefined;
     onRowClick?: (row: Row<T>) => void;
+    rowClickCallOrder?: RowClickCallOrderValue;
     onResizeColumn?: (sizing: ColumnSizingState) => void;
     headerStyle?: CSSProperties;
     isAdaptiveSizeColumns?: boolean;
-    rowSize?: ValueOf<typeof TableRowSize>;
+    rowSize?: TableRowSizeValue;
+    isVirtualization?: boolean;
+    overscan?: number | {
+        main: number;
+        reverse: number;
+    };
+    rangeChanged?: (range: ListRange) => void;
 };
 type TableInnerProps<T extends WithRowClickLink> = TableProps<T> & {
     activeRowId?: string | null;
 };
-export declare const TableComponent: <T extends WithRowClickLink>({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps, bottomOffset, table, fullHeight, dndConfig, renderRowContent, onRowClick, onResizeColumn, headerStyle, isAdaptiveSizeColumns, rowSize, getRowHighlightColor, activeRowId, }: TableInnerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableComponent: <T extends WithRowClickLink>({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps, bottomOffset, table, fullHeight, dndConfig, renderRowContent, onRowClick, rowClickCallOrder, onResizeColumn, headerStyle, isAdaptiveSizeColumns, rowSize, getRowHighlightColor, activeRowId, isVirtualization, overscan, rangeChanged, }: TableInnerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Table: <T extends WithRowClickLink>(props: TableProps<T>) => React.JSX.Element;
 export {};

package/dist/data-grid/Table/Table.js

@@ -1,20 +1,23 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { cn } from "../../common/css/cn.js";
 import { TableRowSize } from "../types/index.js";
-import { Body, Footer, Header, TableDragOverlay, TotalsToggle } from "./components/index.js";
-import { TableContextProvider, useColumnSizes, useIntersection, useRect, useTableHeight } from "./hooks/index.js";
-import { withDnD } from "./utils/index.js";
+import { Body } from "./components/Body/Body.js";
+import { FooterContent } from "./components/Footer/FooterContent.js";
+import { HeaderContent } from "./components/Header/HeaderContent.js";
+import { TableDragOverlay } from "./components/TableDragOverlay/TableDragOverlay.js";
+import { TableRow } from "./components/TableRow/TableRow.js";
+import { TotalsToggle } from "./components/TotalsToggle/TotalsToggle.js";
+import { VirtualTable } from "./components/VirtualTable/VirtualTable.js";
+import { RowContextProvider, TableContextProvider, useColumnSizes, useIntersection, useRect, useTableHeight } from "./hooks/index.js";
+import { RowClickCallOrder } from "./types.js";
+import { getTableColumnIds, withDnD } from "./utils/index.js";
 import Table_module from "./Table.module.js";
-const TableComponent = ({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps = [], bottomOffset = 0, table, fullHeight = true, dndConfig, renderRowContent, onRowClick, onResizeColumn, headerStyle, isAdaptiveSizeColumns = true, rowSize = TableRowSize.Comfort, getRowHighlightColor, activeRowId })=>{
+const TableComponent = ({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps = [], bottomOffset = 0, table, fullHeight = true, dndConfig, renderRowContent, onRowClick, rowClickCallOrder = RowClickCallOrder.Default, onResizeColumn, headerStyle, isAdaptiveSizeColumns = true, rowSize = TableRowSize.Comfort, getRowHighlightColor, activeRowId, isVirtualization = false, overscan = 5, rangeChanged })=>{
     const { rows } = table.getRowModel();
-    const headerGroups = table.getHeaderGroups();
-    const footerGroups = table.getFooterGroups();
-    const footers = footerGroups.map((group)=>group.headers.map((header)=>header.column.columnDef.footer)).flat().filter(Boolean);
-    const hasFooters = footers.length > 0;
-    const isTotalsToggleVisible = hasFooters && footerToggleConfig?.showTotalsToggle;
+    const { columnVisibility, rowSelection } = table.getState();
+    const columnIds = getTableColumnIds(table);
     const tableWrapperRef = useRef(null);
-    const tableRef = useRef(null);
     const rect = useRect(tableWrapperRef);
     const tableWrapperRefIntersectionObserver = useIntersection(tableWrapperRef, {
         threshold: 1
@@ -32,63 +35,98 @@ const TableComponent = ({ wrapperClassName, className, isLoading, dataTestId, pa
     });
     const columnSizeVars = useColumnSizes(table, isAdaptiveSizeColumns);
     const isDragging = Boolean(activeRowId);
+    const tableWrapperStyles = fullHeight ? {
+        ...columnSizeVars,
+        height: maxHeight,
+        minHeight
+    } : {
+        ...columnSizeVars
+    };
+    const virtualTableProps = fullHeight ? {
+        customScrollParent: tableWrapperRef?.current ?? void 0
+    } : {
+        useWindowScroll: true
+    };
+    const getFooterContent = ()=>{
+        const footerGroups = table.getFooterGroups();
+        const footers = footerGroups.map((group)=>group.headers.map((header)=>header.column.columnDef.footer)).flat().filter(Boolean);
+        const hasFooters = footers.length > 0;
+        const isTotalsToggleVisible = hasFooters && footerToggleConfig?.showTotalsToggle;
+        if (hasFooters || pagination || isTotalsToggleVisible) return /*#__PURE__*/ jsx(FooterContent, {
+            footerGroups: footerGroups,
+            isEmptyFooter: isTotalsToggleVisible,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: Table_module.footerControlBar,
+                children: [
+                    pagination,
+                    isTotalsToggleVisible && /*#__PURE__*/ jsx(TotalsToggle, {
+                        onClick: footerToggleConfig.handleOnShow,
+                        label: footerToggleConfig.label,
+                        testId: `${dataTestId}-totals-toggle`
+                    })
+                ]
+            })
+        });
+        return null;
+    };
+    const footerContent = getFooterContent();
     return /*#__PURE__*/ jsx(TableContextProvider, {
-        table: table,
+        className: className,
+        isLoading: isLoading,
         onResizeColumn: onResizeColumn,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: Table_module.container,
+        rowSize: rowSize,
+        table: table,
+        headerStyle: headerStyle,
+        children: /*#__PURE__*/ jsxs(RowContextProvider, {
+            draggingZIndex: dndConfig?.draggingZIndex,
+            enableRowOrdering: dndConfig?.enableRowOrdering,
+            getRowHighlightColor: getRowHighlightColor,
+            onRowClick: onRowClick,
+            rowClickCallOrder: rowClickCallOrder,
+            renderRowContent: renderRowContent,
             children: [
-                isLoading && /*#__PURE__*/ jsx("div", {
-                    className: Table_module.spinner,
-                    "data-test-id": `${dataTestId}-spinner`
-                }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: cn(Table_module.tableWrapper, wrapperClassName ?? ''),
-                    ref: tableWrapperRef,
-                    "data-test-id": dataTestId,
-                    "data-dnd-dragging": isDragging || void 0,
-                    style: fullHeight ? {
-                        height: maxHeight,
-                        minHeight
-                    } : {},
+                    className: Table_module.container,
                     children: [
-                        /*#__PURE__*/ jsxs("table", {
-                            ref: tableRef,
-                            style: columnSizeVars,
-                            className: cn(Table_module.table, className ?? ''),
-                            "data-row-height": rowSize,
-                            children: [
-                                /*#__PURE__*/ jsx(Header, {
-                                    headerGroups: headerGroups,
-                                    style: headerStyle
-                                }),
-                                /*#__PURE__*/ jsx(Body, {
-                                    columnVisibility: table.getState().columnVisibility,
-                                    rows: rows,
-                                    isLoading: isLoading,
-                                    rowSelection: table.getState().rowSelection,
-                                    dndConfig: dndConfig,
-                                    renderRowContent: renderRowContent,
-                                    onRowClick: onRowClick,
-                                    getRowHighlightColor: getRowHighlightColor
-                                })
-                            ]
+                        isLoading && /*#__PURE__*/ jsx("div", {
+                            className: Table_module.spinner,
+                            "data-test-id": `${dataTestId}-spinner`
                         }),
-                        (hasFooters || pagination || isTotalsToggleVisible) && /*#__PURE__*/ jsx("table", {
-                            style: columnSizeVars,
-                            className: cn(Table_module.table, Table_module.footerTable, className ?? ''),
-                            "data-row-height": rowSize,
-                            children: /*#__PURE__*/ jsx(Footer, {
-                                footerGroups: footerGroups,
-                                isEmptyFooter: isTotalsToggleVisible,
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    className: Table_module.footerControlBar,
+                        /*#__PURE__*/ jsx("div", {
+                            ref: tableWrapperRef,
+                            className: cn(Table_module.tableWrapper, wrapperClassName),
+                            style: tableWrapperStyles,
+                            "data-test-id": dataTestId,
+                            "data-dnd-dragging": isDragging || void 0,
+                            children: isVirtualization ? /*#__PURE__*/ jsx(VirtualTable, {
+                                footerContent: footerContent,
+                                overscan: overscan,
+                                rangeChanged: rangeChanged,
+                                ...virtualTableProps
+                            }) : /*#__PURE__*/ jsx(Fragment, {
+                                children: /*#__PURE__*/ jsxs("table", {
+                                    "data-row-height": rowSize,
+                                    style: columnSizeVars,
+                                    className: cn(Table_module.table, className),
                                     children: [
-                                        pagination,
-                                        isTotalsToggleVisible && /*#__PURE__*/ jsx(TotalsToggle, {
-                                            onClick: footerToggleConfig.handleOnShow,
-                                            label: footerToggleConfig.label,
-                                            testId: `${dataTestId}-totals-toggle`
+                                        /*#__PURE__*/ jsx("thead", {
+                                            className: Table_module.thead,
+                                            style: headerStyle,
+                                            children: /*#__PURE__*/ jsx(HeaderContent, {})
+                                        }),
+                                        /*#__PURE__*/ jsx(Body, {
+                                            isLoading: isLoading,
+                                            rows: rows,
+                                            columnVisibility: columnVisibility,
+                                            columnIds: columnIds,
+                                            rowSelection: rowSelection,
+                                            children: rows.map((row)=>/*#__PURE__*/ jsx(TableRow, {
+                                                    row: row
+                                                }, row.id))
+                                        }),
+                                        footerContent && /*#__PURE__*/ jsx("tfoot", {
+                                            className: Table_module.tfoot,
+                                            children: footerContent
                                         })
                                     ]
                                 })

package/dist/data-grid/Table/Table.module.js

@@ -3,6 +3,8 @@ const Table_module = {
     container: "container-Aa44t5",
     tableWrapper: "tableWrapper-alPFf4",
     table: "table-ltDBYw",
+    thead: "thead-KKRmHF",
+    tfoot: "tfoot-YTLtwD",
     footerTable: "footerTable-__XFnr",
     footerControlBar: "footerControlBar-JmhT5T",
     spinner: "spinner-MztZm2",

package/dist/data-grid/Table/Table_module.css

@@ -47,6 +47,29 @@
   --cell-padding-bottom: 2px;
 }
 
+.thead-KKRmHF {
+  z-index: 1;
+  background: var(--light-white);
+  position: sticky;
+  inset-block-start: 0;
+}
+
+.thead-KKRmHF:after {
+  background: var(--light-grey-400);
+  content: "";
+  width: 100%;
+  height: 1px;
+  position: absolute;
+}
+
+.tfoot-YTLtwD {
+  box-shadow: 0 -1px 0 0 var(--light-grey-400),0 2px 0 0 var(--light-white);
+  background-color: var(--light-white);
+  margin-top: auto;
+  position: sticky;
+  inset-block-end: 0;
+}
+
 .footerTable-__XFnr {
   margin-top: auto;
   position: sticky;
@@ -64,7 +87,6 @@
   margin-top: -32px;
   display: flex;
   position: absolute;
-  bottom: 0;
   overflow: visible;
 }
 

package/dist/data-grid/Table/components/Body/Body.d.ts

@@ -1,17 +1,13 @@
-import { type ReactNode } from 'react';
+import { type PropsWithChildren } from 'react';
 import type { Row, VisibilityState } from '@tanstack/react-table';
-import type { DnDConfig, WithRowClickLink } from '../../types';
-import { type HighlightedRowColor } from '../TableRow/TableRow';
-type Props<T extends WithRowClickLink> = {
-    rows: Row<T>[];
+import type { WithRowClickLink } from '../../types';
+export type Props<T extends WithRowClickLink> = PropsWithChildren<{
     isLoading: boolean;
-    rowSelection?: Record<string, boolean>;
-    columnVisibility?: VisibilityState;
-    dndConfig?: DnDConfig;
-    renderRowContent?: (row: Row<T>) => ReactNode;
-    getRowHighlightColor?: (row: Row<T>) => HighlightedRowColor | undefined;
-    onRowClick?: (row: Row<T>) => void;
-};
-export declare const BodyComponent: <T extends WithRowClickLink>({ rows, isLoading, dndConfig, renderRowContent, getRowHighlightColor, onRowClick, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+    rowSelection: Record<string, boolean>;
+    columnVisibility: VisibilityState;
+    columnIds: string[];
+    rows: Row<T>[];
+}>;
+export declare function areEqual<T extends WithRowClickLink>(prevProps: Props<T>, nextProps: Props<T>): boolean;
+export declare const BodyComponent: <T extends WithRowClickLink>({ children, isLoading, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Body: <T extends WithRowClickLink>(props: Props<T>) => JSX.Element;
-export {};