@canlooks/can-ui 0.0.24 → 0.0.26

package/dist/cjs/components/dataGrid/columnResize.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnResizeContext = ColumnResizeContext;
+exports.useRenderHead = useRenderHead;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const table_1 = require("../table");
+const react_1 = require("react");
+const dataGrid_style_1 = require("./dataGrid.style");
+const utils_1 = require("../../utils");
+const ColumnResizeContextProvider = (0, react_1.createContext)({
+    columnResizable: false,
+    columnRefs: { current: [] },
+    scrollToEnd() {
+    }
+});
+function ColumnResizeContext({ columnResizable, children }) {
+    const scrollerRef = (0, react_1.useRef)(null);
+    const tableRef = (0, react_1.useRef)(null);
+    const columnRefs = (0, react_1.useRef)([]);
+    const scrollToEnd = () => {
+        scrollerRef.current.scrollLeft = scrollerRef.current.scrollWidth;
+    };
+    return ((0, jsx_runtime_1.jsx)(ColumnResizeContextProvider, { value: { columnResizable, columnRefs, scrollToEnd }, children: children({ scrollerRef, tableRef }) }));
+}
+function useRenderHead(render) {
+    const { columnRefs } = (0, react_1.useContext)(ColumnResizeContextProvider);
+    columnRefs.current = [];
+    return render(ResizableColumn);
+}
+function ResizableColumn(props) {
+    const { columnResizable, columnRefs, scrollToEnd } = (0, react_1.useContext)(ColumnResizeContextProvider);
+    const cellRef = (0, react_1.useRef)(null);
+    const findNext = () => {
+        const index = columnRefs.current.indexOf(cellRef.current);
+        let next = columnRefs.current[index + 1];
+        if (next?.classList.contains(dataGrid_style_1.classes.selectable)) {
+            next = columnRefs.current[index + 2];
+        }
+        return next;
+    };
+    const draggableHandle = (0, utils_1.useDraggableHandle)({
+        onDragStart(e) {
+            const next = findNext();
+            return {
+                startX: e.clientX,
+                selfStartWidth: cellRef.current.offsetWidth,
+                nextStartWidth: next?.offsetWidth
+            };
+        },
+        onDrag({ deltaX, startData }) {
+            const next = findNext();
+            cellRef.current.style.width = startData.selfStartWidth + deltaX + 'px';
+            if (next) {
+                next.style.width = startData.nextStartWidth - deltaX + 'px';
+            }
+            else {
+                scrollToEnd();
+            }
+        }
+    });
+    if (!columnResizable) {
+        return (0, jsx_runtime_1.jsx)(table_1.ThCell, { ...props });
+    }
+    return ((0, jsx_runtime_1.jsxs)(table_1.ThCell, { ...props, ref: r => {
+            if (r) {
+                columnRefs.current.push(r);
+                cellRef.current = r;
+            }
+        }, children: [props.children, (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.resizeHandle, ...draggableHandle })] }));
+}

package/dist/cjs/components/dataGrid/dataGrid.d.ts

@@ -1,48 +1,47 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { DIVProps, Id, Obj } from '../../types';
-import { FieldPath } from '../../utils';
-import { TableProps } from '../table';
-import { PaginationProps } from '../pagination';
+import { JSX, ReactElement, ReactNode } from 'react';
+import { DivProps, Id, Obj, ToRequired } from '../../types';
 import { SelectionContextProps } from '../selectionContext';
+import { PaginationProps } from '../pagination';
+import { TableProps } from '../table';
 import { CheckboxProps } from '../checkbox';
 import { RadioProps } from '../radio';
+import { FieldPath } from '../../utils';
 export type RowType = Obj;
-export interface ColumnType<R extends RowType = RowType> extends Omit<React.JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<React.JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
+export type OrderType = 'ascend' | 'descend';
+export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
-    /** 是否将列黏性固定在左侧，若指定number|string类型，表示left的值 */
-    sticky?: boolean | number | string;
     children?: ColumnType<R>[];
+    /** 是否将列固定在左侧或右侧 */
+    sticky?: 'left' | 'right';
     /** 指定children后，下列属性均不生效 */
     field?: FieldPath;
     render?(row: R, index?: number, rows?: R[]): ReactNode;
     /** 指定为true时表示使用服务端排序，组件只做样式处理，不做数据排序处理；本地排序需指定 “正序” 的排序方法，倒序会自动处理 */
     sorter?: boolean | ((a: R, b: R) => number);
-    /** @private 内部使用 */
+    /** @private 内部使用，在{@link useDataGridColumns}内赋值 */
     _key?: string | number;
-    /** @private 内部使用 */
-    _colSpan?: number;
-    /** @private 内部使用 */
+    /** @private 内部使用，在{@link DataGridHead}内计算 */
     _negativeRowSpan?: number;
 }
 type DataGridSharedProps<R extends RowType> = {
-    /** 数据的主键名，默认为"id" */
+    rowProps?(row: R, index: number, rows: R[]): JSX.IntrinsicElements['tr'];
+    /** 数据的主键名，默认为`id` */
     primaryKey?: keyof R;
     /**
-     * 当数据中存在该字段，则会渲染可展开的子行；
-     * children允许的值类型 @type {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
+     * 当数据中存在该字段，则会渲染可展开的子行，默认为`null`表示不使用子行功能,
+     * children允许的值类型：
+     * @types {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
      */
-    childrenKey?: keyof R;
+    childrenKey?: keyof R | null;
+    /** 点击行时是否触发选中，默认为`true` */
+    clickRowToSelect?: boolean;
+    /** 子行缩进，默认为`24` */
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-    rowProps?(row: R, index: number, rows: R[]): React.JSX.IntrinsicElements['tr'];
-    /** 点击行时是否触发选中，默认为true */
-    clickRowToSelect?: boolean;
-    selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
 };
-export type OrderType = 'ascend' | 'descend';
-export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProps<R>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];
     rows?: R[];
     defaultOrderColumn?: Id;
@@ -53,25 +52,30 @@ export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProp
     selectable?: boolean;
     /**
      * 行之间的关系
-     * @enum {"dependent"}：会自动判断子父行的选中关系。
-     * @enum {"standalone"}：所有行相互独立
+     * @enum {'dependent'}：会自动判断子父行的选中关系。
+     * @enum {'standalone'}：所有行相互独立
      * 默认为"dependent"
      */
     relation?: SelectionContextProps<R>['relation'];
     integration?: SelectionContextProps<R>['integration'];
     /** 是否允许全选，默认为true */
     allowSelectAll?: boolean;
+    selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
     defaultExpanded?: Id[];
     expanded?: Id[];
     onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;
-    loading?: boolean;
     /** 是否内置翻页，默认为true */
     paginatable?: boolean;
     paginationProps?: PaginationProps;
     renderPagination?(props: PaginationProps): ReactNode;
+    loading?: boolean;
+    emptyPlaceholder?: ReactNode;
+    /** 是否可以拖拽调整列宽，默认为`false`，开启此功能后表头分组功能将失效 */
+    columnResizable?: boolean;
     /** 传递给<Table />的属性 */
-    bordered?: boolean;
-    striped?: boolean;
+    size?: TableProps['size'];
+    bordered?: TableProps['bordered'];
+    striped?: TableProps['striped'];
     tableProps?: TableProps;
 }
 export interface DataGridSingleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
@@ -87,34 +91,12 @@ export interface DataGridMultipleProps<R extends RowType, V extends Id = Id> ext
     onChange?(value: V[]): void;
 }
 export type DataGridProps<R extends RowType, V extends Id = Id> = DataGridSingleProps<R, V> | DataGridMultipleProps<R, V>;
-export interface DataGridContext<R extends RowType> extends DataGridSharedProps<R> {
-    flattedColumns?: (ColumnType<R> | symbol)[];
-    expandedSet?: Set<Id>;
-    toggleExpanded?(key: Id): void;
-    multiple?: boolean;
-    innerValue?: Id | Id[];
-    toggleSelected?(key: Id): void;
-}
-export declare function useDataGridContext(): {
-    flattedColumns?: (symbol | ColumnType<RowType>)[] | undefined;
-    toggleExpanded?(key: Id): void;
-    multiple?: boolean;
-    innerValue?: Id | Id[];
-    toggleSelected?(key: Id): void;
-    /**
-     * 当数据中存在该字段，则会渲染可展开的子行；
-     * children允许的值类型 @type {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
-     */
-    childrenKey?: keyof RowType | undefined;
-    renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-    rowProps?(row: RowType, index: number, rows: RowType[]): React.JSX.IntrinsicElements["tr"];
-    /** 点击行时是否触发选中，默认为true */
-    clickRowToSelect?: boolean;
-    selectorProps?(row: RowType, index: number, rows: RowType[]): CheckboxProps | RadioProps;
-    primaryKey: keyof RowType;
-    indent: number;
+interface IDataGridContext<R extends RowType> extends ToRequired<DataGridSharedProps<R>, 'primaryKey' | 'childrenKey' | 'clickRowToSelect' | 'indent'> {
     expandedSet: Set<Id>;
-};
+    flattedColumns: (symbol | ColumnType<R>)[] | undefined;
+    toggleExpanded(key: Id): void;
+}
+export declare function useDataGridContext<R extends RowType>(): IDataGridContext<R>;
 export declare const DataGrid: {
     <R extends RowType, V extends Id = Id>(props: DataGridProps<R, V>): ReactElement;
     EXPAND_COLUMN: symbol;

package/dist/cjs/components/dataGrid/dataGrid.js

@@ -5,23 +5,30 @@ exports.useDataGridContext = useDataGridContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const dataGrid_style_1 = require("./dataGrid.style");
-const utils_1 = require("../../utils");
+const selectionContext_1 = require("../selectionContext");
 const table_1 = require("../table");
-const dataGridHead_1 = require("./dataGridHead");
-const dataGridRows_1 = require("./dataGridRows");
-const pagination_1 = require("../pagination");
+const utils_1 = require("../../utils");
 const loading_1 = require("../loading");
+const dataGridHead_1 = require("./dataGridHead");
 const placeholder_1 = require("../placeholder");
-const selectionContext_1 = require("../selectionContext");
+const dataGridRows_1 = require("./dataGridRows");
+const columnResize_1 = require("./columnResize");
 const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
-    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = (0, react_1.useContext)(DataGridContext);
-    return { primaryKey, indent, expandedSet, ...context };
+    return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, selectorProps, primaryKey = 'id', childrenKey, indent = 24, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, clickRowToSelect = true, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, defaultExpanded = [], expanded, onExpandedChange, loading, renderExpandIcon, multiple, defaultValue, value, onChange, paginatable = true, paginationProps = {}, renderPagination, bordered, striped, tableProps, ...props }) => {
+exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable = false, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded = [], expanded, onExpandedChange, paginatable = true, paginationProps = {}, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+    /**
+     * ---------------------------------------------------------------
+     * 选择行
+     */
     const { inSelection, disabled } = (0, selectionContext_1.useSelectionContext)();
     // 在SelectionContext内，且未disabled，需要默认打开selectable
     selectable ??= inSelection && !disabled;
+    /**
+     * ---------------------------------------------------------------
+     * 处理列
+     */
     const { completedColumns, columnMapByKey, flattedColumns } = (0, utils_1.useDataGridColumns)({
         columns, selectable, childrenKey
     });
@@ -29,7 +36,11 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, selectorProps,
      * ---------------------------------------------------------------
      * 行排序
      */
-    const [innerOrderColumn, setInnerOrderColumn] = (0, utils_1.useControlled)(defaultOrderColumn, orderColumn);
+    const [innerOrderColumn, setInnerOrderColumn] = (0, utils_1.useControlled)(() => {
+        return defaultOrderColumn ?? flattedColumns
+            ?.find(col => typeof col !== 'symbol' && typeof col.sorter === 'function')
+            ?._key;
+    }, orderColumn);
     const [innerOrderType, setInnerOrderType] = (0, utils_1.useControlled)(defaultOrderType, orderType);
     const orderChangeHandler = (orderColumn, orderType) => {
         onOrderChange?.(orderColumn, orderType);
@@ -49,6 +60,24 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, selectorProps,
             return innerOrderType.current === 'ascend' ? ret : -ret;
         });
     }, [rows, innerOrderColumn.current, innerOrderType.current]);
+    /**
+     * ---------------------------------------------------------------
+     * 展开行
+     */
+    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
+    const expandedSet = (0, react_1.useMemo)(() => {
+        return new Set(innerExpanded.current);
+    }, [innerExpanded.current]);
+    const toggleExpanded = (key) => {
+        const currentExpanded = expandedSet.has(key);
+        setInnerExpanded(o => {
+            const newExpanded = currentExpanded
+                ? o.filter(v => v !== key)
+                : [...o, key];
+            onExpandedChange?.(newExpanded, key, !currentExpanded);
+            return newExpanded;
+        });
+    };
     /**
      * ---------------------------------------------------------------
      * 分页
@@ -74,35 +103,14 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, selectorProps,
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize]);
-    /**
-     * ---------------------------------------------------------------
-     * 展开行
-     */
-    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
-    const expandedSet = (0, react_1.useMemo)(() => {
-        return new Set(innerExpanded.current);
-    }, [innerExpanded.current]);
-    const toggleExpanded = (key) => {
-        const currentExpanded = expandedSet.has(key);
-        setInnerExpanded(o => {
-            const newExpanded = currentExpanded
-                ? o.filter(v => v !== key)
-                : [...o, key];
-            onExpandedChange?.(newExpanded, key, !currentExpanded);
-            return newExpanded;
-        });
-    };
-    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: dataGrid_style_1.style, className: (0, utils_1.classnames)(dataGrid_style_1.classes.root, props.className), loading: loading, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.container, children: (0, jsx_runtime_1.jsx)(table_1.Table, { bordered: bordered, striped: striped, ...tableProps, children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
-                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
-                                        indent, expandedSet, toggleExpanded, multiple
-                                    }), [
-                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
-                                        indent, expandedSet, multiple
-                                    ]), children: paginatedRows?.length
-                                        ? (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows })
-                                        : (0, jsx_runtime_1.jsx)("tr", { className: dataGrid_style_1.classes.empty, children: (0, jsx_runtime_1.jsx)("td", { colSpan: flattedColumns.length, children: (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {}) }) }) }) })] }) }) }), renderPagination
-                ? renderPagination(_paginationProps)
-                : paginatable && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ..._paginationProps })] }));
+    return ((0, jsx_runtime_1.jsx)(loading_1.Loading, { ...props, css: dataGrid_style_1.style, className: (0, utils_1.clsx)(dataGrid_style_1.classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: (0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+                                            rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                            expandedSet, flattedColumns, toggleExpanded
+                                        }), [
+                                            rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                            expandedSet, flattedColumns
+                                        ]), children: !!paginatedRows?.length &&
+                                            (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }) }));
 });
 exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 exports.DataGrid.SELECT_COLUMN = Symbol('select-column');

package/dist/cjs/components/dataGrid/dataGrid.style.d.ts

@@ -1,15 +1,16 @@
 export declare const classes: {
     sub: string;
     title: string;
-    children: string;
-    icon: string;
     container: string;
     sorter: string;
+    icon: string;
     expandable: string;
     expandableWrap: string;
     selectable: string;
     subTd: string;
+    children: string;
     empty: string;
+    resizeHandle: string;
 } & {
     root: string;
 };

package/dist/cjs/components/dataGrid/dataGrid.style.js

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
-const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
-const style_1 = require("../../utils/style");
-const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, style_1.defineClasses)('data-grid', [
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('data-grid', [
     'container',
     'title',
     'sorter',
@@ -16,23 +14,25 @@ exports.classes = (0, style_1.defineClasses)('data-grid', [
     'sub',
     'subTd',
     'children',
-    'empty'
+    'empty',
+    'resizeHandle'
 ]);
-exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, easing }) => (0, react_1.css) `
+exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, easing }) => (0, react_1.css) `
     max-height: 100%;
     min-height: 0;
-    display: flex;
-    flex-direction: column;
-    gap: ${spacing[5]}px;
 
     .${exports.classes.container} {
         flex: 1;
-        overflow: auto;
+        
+        &:not(:last-of-type) {
+            margin-bottom: ${spacing[5]}px;
+        }
     }
 
     th[data-sortable=true] {
         cursor: pointer;
-        transition: background-color .2s ${easing.easeOut};
+        transition: background-color .25s ${easing.easeOut};
+        -webkit-tap-highlight-color: transparent;
 
         &:hover {
             background-color: ${gray(mode === 'light' ? .05 : .26)};
@@ -53,7 +53,7 @@ exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, eas
 
             .${exports.classes.icon} {
                 color: ${text.placeholder};
-                transition: translate .2s ${easing.swing};
+                transition: translate .25s ${easing.swing};
             }
         }
 
@@ -65,24 +65,20 @@ exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, eas
 
         &[data-order-type=ascend] {
             .${exports.classes.icon} {
-                translate: 0 -4px;
+                translate: 0 -3px;
                 rotate: 180deg;
             }
         }
 
         &[data-order-type=descend] {
             .${exports.classes.icon} {
-                translate: 0 4px;
+                translate: 0 3px;
                 rotate: 0deg;
             }
         }
     }
 
     tr {
-        &[data-selected=true] {
-            background-color: ${(0, color_1.default)(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string()};
-        }
-        
         &.${exports.classes.sub} {
             background-color: ${gray(mode === 'light' ? .02 : .22)};
         }
@@ -107,21 +103,15 @@ exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, eas
             + *:before {
                 display: none;
             }
-        }
-    }
 
-    tr:not([data-selected=true]) {
-        th, td {
-            &[data-sticky=true] {
-                position: sticky;
-                left: 0;
-                background-color: ${gray(mode === 'light' ? .04 : .24)};
+            .${exports.classes.resizeHandle} {
+                display: none;
             }
         }
-    }
 
-    th[data-sticky=true] {
-        z-index: 2;
+        &[data-grouped=true] {
+            text-align: center;
+        }
     }
 
     .${exports.classes.expandable} {
@@ -135,4 +125,36 @@ exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, eas
             gap: ${spacing[1]}px;
         }
     }
+    
+    .${exports.classes.empty} {
+        position: sticky;
+        left: 0;
+    }
+    
+    .${exports.classes.resizeHandle} {
+        width: 8px;
+        height: 100%;
+        cursor: col-resize;
+        touch-action: none;
+        position: absolute;
+        top: 0;
+        right: -4px;
+        z-index: 1;
+    }
+    
+    &[data-column-resizable=true] table {
+        width: max-content;
+        table-layout: fixed;
+    }
+    
+    th:last-of-type {
+        .${exports.classes.resizeHandle} {
+            width: 4px;
+            right: 0;
+        }
+    }
+
+    th:has(.${exports.classes.resizeHandle}) {
+        overflow: visible;
+    }
 `);

package/dist/cjs/components/dataGrid/dataGridHead.d.ts

@@ -1,9 +1,9 @@
 import { ReactElement } from 'react';
-import { DataGridProps, OrderType } from './dataGrid';
-import { Id, Obj } from '../../types';
-interface DataGridHeadProps<R extends Obj, V extends Id = Id> extends Pick<DataGridProps<R, V>, 'columns' | 'onOrderChange' | 'allowSelectAll' | 'multiple' | 'primaryKey' | 'rows'> {
-    orderColumn?: Id;
-    orderType?: OrderType;
+import { ColumnType, DataGridProps, RowType } from './dataGrid';
+import { Id } from '../../types';
+interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Required<Pick<DataGridProps<R, V>, 'primaryKey' | 'orderType' | 'onOrderChange' | 'allowSelectAll' | 'columnResizable'>>, Pick<DataGridProps<R, V>, 'rows' | 'orderColumn'> {
+    flattedColumns: (symbol | ColumnType<R>)[] | undefined;
+    completedColumns: (symbol | ColumnType<R>)[] | undefined;
 }
-export declare const DataGridHead: <R extends Obj, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;
+export declare const DataGridHead: <R extends RowType, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;
 export {};