@canlooks/can-ui 0.0.24 → 0.0.26

package/dist/esm/components/dataGrid/dataGrid.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useMemo } from 'react';
 import { classes, style } from './dataGrid.style';
-import { classnames, useControlled, useDataGridColumns } from '../../utils';
-import { Table } from '../table';
-import { DataGridHead } from './dataGridHead';
-import { DataGridRows } from './dataGridRows';
-import { Pagination } from '../pagination';
+import { SelectionContext, useSelectionContext } from '../selectionContext';
+import { Table, TableContainer } from '../table';
+import { clsx, cloneRef, useControlled, useDataGridColumns } from '../../utils';
 import { Loading } from '../loading';
+import { DataGridHead } from './dataGridHead';
 import { Placeholder } from '../placeholder';
-import { SelectionContext, useSelectionContext } from '../selectionContext';
+import { DataGridRows } from './dataGridRows';
+import { ColumnResizeContext } from './columnResize';
 const DataGridContext = createContext({});
 export function useDataGridContext() {
-    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = useContext(DataGridContext);
-    return { primaryKey, indent, expandedSet, ...context };
+    return useContext(DataGridContext);
 }
-export const DataGrid = 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 }) => {
+export const DataGrid = 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 } = useSelectionContext();
     // 在SelectionContext内，且未disabled，需要默认打开selectable
     selectable ??= inSelection && !disabled;
+    /**
+     * ---------------------------------------------------------------
+     * 处理列
+     */
     const { completedColumns, columnMapByKey, flattedColumns } = useDataGridColumns({
         columns, selectable, childrenKey
     });
@@ -25,7 +32,11 @@ export const DataGrid = memo(({ columns, rows, rowProps, selectorProps, primaryK
      * ---------------------------------------------------------------
      * 行排序
      */
-    const [innerOrderColumn, setInnerOrderColumn] = useControlled(defaultOrderColumn, orderColumn);
+    const [innerOrderColumn, setInnerOrderColumn] = useControlled(() => {
+        return defaultOrderColumn ?? flattedColumns
+            ?.find(col => typeof col !== 'symbol' && typeof col.sorter === 'function')
+            ?._key;
+    }, orderColumn);
     const [innerOrderType, setInnerOrderType] = useControlled(defaultOrderType, orderType);
     const orderChangeHandler = (orderColumn, orderType) => {
         onOrderChange?.(orderColumn, orderType);
@@ -45,6 +56,24 @@ export const DataGrid = memo(({ columns, rows, rowProps, selectorProps, primaryK
             return innerOrderType.current === 'ascend' ? ret : -ret;
         });
     }, [rows, innerOrderColumn.current, innerOrderType.current]);
+    /**
+     * ---------------------------------------------------------------
+     * 展开行
+     */
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
+    const expandedSet = 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;
+        });
+    };
     /**
      * ---------------------------------------------------------------
      * 分页
@@ -70,35 +99,14 @@ export const DataGrid = memo(({ columns, rows, rowProps, selectorProps, primaryK
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize]);
-    /**
-     * ---------------------------------------------------------------
-     * 展开行
-     */
-    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
-    const expandedSet = 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 (_jsxs(Loading, { ...props, css: style, className: classnames(classes.root, props.className), loading: loading, children: [_jsx("div", { className: classes.container, children: _jsx(Table, { bordered: bordered, striped: striped, ...tableProps, children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
-                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
-                                        indent, expandedSet, toggleExpanded, multiple
-                                    }), [
-                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
-                                        indent, expandedSet, multiple
-                                    ]), children: paginatedRows?.length
-                                        ? _jsx(DataGridRows, { rows: paginatedRows })
-                                        : _jsx("tr", { className: classes.empty, children: _jsx("td", { colSpan: flattedColumns.length, children: _jsx(Placeholder, {}) }) }) }) })] }) }) }), renderPagination
-                ? renderPagination(_paginationProps)
-                : paginatable && _jsx(Pagination, { ..._paginationProps })] }));
+    return (_jsx(Loading, { ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(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: [_jsx(DataGridHead, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+                                            rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                            expandedSet, flattedColumns, toggleExpanded
+                                        }), [
+                                            rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                            expandedSet, flattedColumns
+                                        ]), children: !!paginatedRows?.length &&
+                                            _jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }) }));
 });
 DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 DataGrid.SELECT_COLUMN = Symbol('select-column');

package/dist/esm/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/esm/components/dataGrid/dataGrid.style.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils/style';
-import Color from 'color';
+import { defineClasses, defineCss } from '../../utils';
 export const classes = defineClasses('data-grid', [
     'container',
     'title',
@@ -12,23 +11,25 @@ export const classes = defineClasses('data-grid', [
     'sub',
     'subTd',
     'children',
-    'empty'
+    'empty',
+    'resizeHandle'
 ]);
 export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) => css `
     max-height: 100%;
     min-height: 0;
-    display: flex;
-    flex-direction: column;
-    gap: ${spacing[5]}px;
 
     .${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)};
@@ -49,7 +50,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
 
             .${classes.icon} {
                 color: ${text.placeholder};
-                transition: translate .2s ${easing.swing};
+                transition: translate .25s ${easing.swing};
             }
         }
 
@@ -61,24 +62,20 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
 
         &[data-order-type=ascend] {
             .${classes.icon} {
-                translate: 0 -4px;
+                translate: 0 -3px;
                 rotate: 180deg;
             }
         }
 
         &[data-order-type=descend] {
             .${classes.icon} {
-                translate: 0 4px;
+                translate: 0 3px;
                 rotate: 0deg;
             }
         }
     }
 
     tr {
-        &[data-selected=true] {
-            background-color: ${Color(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string()};
-        }
-        
         &.${classes.sub} {
             background-color: ${gray(mode === 'light' ? .02 : .22)};
         }
@@ -103,21 +100,15 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
             + *:before {
                 display: none;
             }
-        }
-    }
 
-    tr:not([data-selected=true]) {
-        th, td {
-            &[data-sticky=true] {
-                position: sticky;
-                left: 0;
-                background-color: ${gray(mode === 'light' ? .04 : .24)};
+            .${classes.resizeHandle} {
+                display: none;
             }
         }
-    }
 
-    th[data-sticky=true] {
-        z-index: 2;
+        &[data-grouped=true] {
+            text-align: center;
+        }
     }
 
     .${classes.expandable} {
@@ -131,4 +122,36 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
             gap: ${spacing[1]}px;
         }
     }
+    
+    .${classes.empty} {
+        position: sticky;
+        left: 0;
+    }
+    
+    .${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 {
+        .${classes.resizeHandle} {
+            width: 4px;
+            right: 0;
+        }
+    }
+
+    th:has(.${classes.resizeHandle}) {
+        overflow: visible;
+    }
 `);

package/dist/esm/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 {};

package/dist/esm/components/dataGrid/dataGridHead.js

@@ -1,90 +1,96 @@
 import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { DataGrid } from './dataGrid';
-import { CaretDownFilled } from '@ant-design/icons';
 import { classes } from './dataGrid.style';
-import { Tooltip } from '../tooltip';
+import { DataGrid } from './dataGrid';
+import { useRenderHead } from './columnResize';
 import { Checkbox } from '../checkbox';
-import { useSelectionContext } from '../selectionContext';
 import { isUnset } from '../../utils';
-export const DataGridHead = memo(({ columns, orderColumn, orderType, onOrderChange, allowSelectAll, multiple, primaryKey, rows, }) => {
-    const { value, setValue, selectionStatus } = useSelectionContext();
+import { Icon } from '../..';
+import { useSelectionContext } from '../selectionContext';
+import { Tooltip } from '../tooltip';
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
+export const DataGridHead = memo(({ flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, allowSelectAll, columnResizable }) => {
+    const { multiple, setValue, selectionStatus } = useSelectionContext();
     const allSelectionStatus = useMemo(() => {
         if (multiple && allowSelectAll) {
             const sum = rows?.reduce((prev, row) => {
-                const status = selectionStatus?.get(row[primaryKey]) || 0;
+                const status = selectionStatus.get(row[primaryKey]) || 0;
                 return prev + status;
             }, 0) || 0;
             return sum === 0 ? 0 : sum < rows.length * 2 ? 1 : 2;
         }
         return 0;
-    }, [value, multiple, allowSelectAll]);
-    const checkboxChangeHandler = (e) => {
-        setValue(e.target.checked
-            ? rows?.flatMap(r => {
-                return r[primaryKey] ?? [];
-            }) || []
-            : []);
+    }, [selectionStatus, multiple, allowSelectAll]);
+    const selectAllChangeHandler = (e) => {
+        e.target.checked
+            ? setValue(rows?.flatMap(r => r[primaryKey] ?? []) || [])
+            : setValue([]);
     };
-    const renderHead = () => {
-        if (!columns) {
+    const renderedHead = useRenderHead(Column => {
+        const columnDefinitions = columnResizable ? flattedColumns : completedColumns;
+        if (!columnDefinitions) {
             return;
         }
-        let allRows = 1;
-        const headRows = [];
-        const fn = (arr, parents = []) => {
-            let colSpan = 0;
-            arr?.forEach(col => {
-                if (typeof col !== 'symbol') {
-                    col._colSpan = fn(col.children, [...parents, col]) || 1;
-                    colSpan += col._colSpan;
-                    if (col.children?.length) {
-                        col['data-grouped'] = 'true';
-                        col.rowSpan = 1;
-                    }
-                    else {
-                        col._negativeRowSpan = col.children?.length ? 1 : parents.length;
-                    }
-                    if (parents.length + 1 > allRows) {
-                        allRows = parents.length + 1;
+        let headRows = [];
+        if (columnResizable) {
+            headRows = [columnDefinitions];
+        }
+        else {
+            // 处理表头分组情况
+            const fn = (cols, depth = 0) => {
+                let colSpan = 0;
+                cols?.forEach(col => {
+                    if (typeof col !== 'symbol') {
+                        if (col.children?.length) {
+                            col.colSpan = fn(col.children, depth + 1);
+                            colSpan += col.colSpan;
+                            col.rowSpan = 1;
+                            col['data-grouped'] = 'true';
+                        }
+                        else {
+                            col._negativeRowSpan = depth;
+                            colSpan++;
+                        }
                     }
-                }
-                headRows[parents.length] ||= [];
-                headRows[parents.length].push(col);
-            });
-            return colSpan;
-        };
-        fn(columns);
+                    headRows[depth] ||= [];
+                    headRows[depth].push(col);
+                });
+                return colSpan;
+            };
+            fn(columnDefinitions);
+        }
         return headRows.map((cols, i) => _jsx("tr", { children: cols.flatMap((col, j) => {
                 if (typeof col === 'symbol') {
-                    return col === DataGrid.EXPAND_COLUMN
-                        ? []
-                        : _jsx("th", { className: classes.selectable, children: multiple && allowSelectAll &&
-                                _jsx(Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: checkboxChangeHandler }) }, j + '_selectable');
+                    if (col === DataGrid.EXPAND_COLUMN) {
+                        return [];
+                    }
+                    // col === DataGrid.SELECT_COLUMN
+                    return (_jsx(Column, { className: classes.selectable, rowSpan: headRows.length, sticky: j === 0 ? 'left' : void 0, children: multiple && allowSelectAll &&
+                            _jsx(Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: selectAllChangeHandler }) }, j + '_selectable'));
                 }
                 const { 
                 // 排除无需加入dom节点的属性
-                title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ...colProps } = col;
+                title, key, children, sticky, field, render, sorter, _key, _negativeRowSpan = 0, ...colProps } = col;
+                const sortable = sorter && children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';
-                const renderedTh = (_createElement("th", { colSpan: _colSpan, rowSpan: allRows - (_negativeRowSpan || 0), ...colProps, key: _key ?? j, "data-sortable": !!sorter, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, "data-sticky": typeof sticky !== 'undefined', style: {
-                        ...typeof sticky === 'number' && { left: sticky },
-                        ...colProps.style
-                    }, onClick: e => {
+                const renderedTh = (_createElement(Column, { rowSpan: headRows.length - _negativeRowSpan, ...colProps, key: _key, sticky: sticky, "data-sortable": !!sortable, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, onClick: e => {
                         colProps.onClick?.(e);
-                        sorter && !isUnset(_key) && onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
+                        if (sortable && !isUnset(_key)) {
+                            onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
+                        }
                     } }, sorter
-                    ? _jsxs("div", { className: classes.sorter, children: [_jsx("div", { className: classes.title, children: title }), _jsx(CaretDownFilled, { className: classes.icon })] })
+                    ? _jsxs("div", { className: classes.sorter, children: [_jsx("div", { className: classes.title, children: title }), _jsx(Icon, { icon: faCaretDown, className: classes.icon })] })
                     : title));
                 return [
-                    sorter
+                    sortable
                         ? _jsx(Tooltip, { title: currentOrderType === 'descend'
                                 ? '点击升序'
                                 : '点击降序', children: renderedTh }, _key)
                         : renderedTh
                 ];
             }) }, i));
-    };
-    return (_jsx("thead", { children: renderHead() }));
+    });
+    return _jsx("thead", { children: renderedHead });
 });

package/dist/esm/components/dataGrid/dataGridRows.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement } from 'react';
-import { DataGridProps } from './dataGrid';
-import { Id, Obj } from '../../types';
-interface DataGridRowsProps<R extends Obj, V extends Id = Id> extends Pick<DataGridProps<R, V>, 'rows'> {
+import { Id } from '../../types';
+import { DataGridProps, RowType } from './dataGrid';
+type DataGridRowsProps<R extends RowType, V extends Id = Id> = {
+    rows: DataGridProps<R, V>['rows'] | undefined;
     /** @private 内部使用，用于缩进子行 */
     _level?: number;
-}
-export declare const DataGridRows: <R extends Obj, V extends Id = Id>(props: DataGridRowsProps<R, V>) => ReactElement;
+};
+export declare const DataGridRows: import("react").MemoExoticComponent<(<R extends RowType, V extends Id = Id>({ rows, _level }: DataGridRowsProps<R, V>) => import("@emotion/react/jsx-runtime").JSX.Element[] | undefined)>;
 export {};

package/dist/esm/components/dataGrid/dataGridRows.js

@@ -2,27 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { memo } from 'react';
 import { DataGrid, useDataGridContext } from './dataGrid';
-import { classnames, isUnset, renderCell } from '../../utils';
-import { classes } from './dataGrid.style';
-import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
-import { Button } from '../button';
-import { Collapse } from '../transitionBase';
+import { useSelectionContext } from '../selectionContext';
+import { clsx, isUnset, renderCell } from '../../utils';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
-import { useSelectionContext } from '../selectionContext';
+import { TdCell } from '../table';
+import { Button } from '../button';
+import { Collapse } from '../transitionBase';
+import { Icon } from '../..';
+import { faMinusSquare } from '@fortawesome/free-regular-svg-icons/faMinusSquare';
+import { faPlusSquare } from '@fortawesome/free-regular-svg-icons/faPlusSquare';
+import { classes } from './dataGrid.style';
 export const DataGridRows = memo(({ rows, _level = 0 }) => {
-    const { primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect, indent, expandedSet, toggleExpanded, renderExpandIcon, multiple } = useDataGridContext();
-    const { toggleSelected, selectionStatus } = useSelectionContext();
+    const { multiple, toggleSelected, selectionStatus } = useSelectionContext();
+    const { rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = useDataGridContext();
     return rows?.flatMap((row, i, arr) => {
         const trKey = row[primaryKey];
+        if (isUnset(trKey)) {
+            console.warn(`[@canlooks/can-ui/<DataGrid/>] primaryKey not found in row "${i}"`);
+        }
         const _rowProps = rowProps?.(row, i, arr);
         const status = selectionStatus?.get(trKey);
-        const children = childrenKey && row[childrenKey];
-        const expandable = !isUnset(children) && children !== false;
+        const children = childrenKey !== null ? row[childrenKey] : void 0;
+        const expandable = !isUnset(children) && typeof children !== 'boolean';
         const currentExpanded = expandable && expandedSet.has(trKey);
         let expandableIndex = -2;
         const ret = [
-            _createElement("tr", { ..._rowProps, key: trKey, className: classnames(_rowProps, _level > 0 && classes.sub), onClick: e => {
+            _createElement("tr", { ..._rowProps, key: trKey, className: clsx(_rowProps, _level > 0 && classes.sub), onClick: e => {
                     _rowProps?.onClick?.(e);
                     clickRowToSelect && toggleSelected(trKey, row);
                 }, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
@@ -37,19 +43,21 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
                         expandableIndex = j;
                     }
                     const Component = multiple ? Checkbox : Radio;
-                    return (_jsx("td", { className: classes.selectable, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => toggleSelected(trKey, row), onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                    return (_jsx(TdCell, { className: classes.selectable, sticky: j === 0 ? 'left' : void 0, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => toggleSelected(trKey, row), onClick: e => e.stopPropagation() }) }, j + '_selectable'));
                 }
                 const { 
                 // 排除无需加入dom节点的属性
-                title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ..._colProps } = col;
+                // width属性只需加入thead列中，普通列需排除
+                // rowSpan与colSpan需排除
+                title, key, children, sticky, field, render, sorter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
                 const renderedContent = renderCell({ render, field }, row, i, arr);
                 const shouldRenderExpand = expandableIndex === j - 1;
-                return (_createElement("td", { ..._colProps, key: _key ?? j, className: shouldRenderExpand ? classes.expandable : void 0, "data-sticky": typeof sticky !== 'undefined', style: typeof sticky === 'number' ? { left: sticky } : void 0 }, shouldRenderExpand
-                    ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "disabled", onClick: () => toggleExpanded?.(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
+                return (_createElement(TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
+                    ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
                                     ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
                                     : currentExpanded
-                                        ? _jsx(MinusSquareOutlined, {})
-                                        : _jsx(PlusSquareOutlined, {}) }), renderedContent] })
+                                        ? _jsx(Icon, { icon: faMinusSquare })
+                                        : _jsx(Icon, { icon: faPlusSquare }) }), renderedContent] })
                     : renderedContent));
             }))
         ];

package/dist/esm/components/dateTimePicker/calendar.d.ts

@@ -1,4 +1,4 @@
-import { DIVProps } from '../../types';
+import { DivProps } from '../../types';
 import { Dayjs } from 'dayjs';
 import { Dispatch, SetStateAction } from 'react';
 type SharedCalendarProps = {
@@ -6,7 +6,7 @@ type SharedCalendarProps = {
     value: Dayjs;
     onChange(value: Dayjs): void;
 };
-export interface CalendarProps extends SharedCalendarProps, Omit<DIVProps, 'onChange'> {
+export interface CalendarProps extends SharedCalendarProps, Omit<DivProps, 'onChange'> {
     type: 'dates' | 'months' | 'years';
 }
 export interface CommonCalendarProps extends SharedCalendarProps {

package/dist/esm/components/dateTimePicker/calendarDates.js

@@ -2,11 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes } from './calendar.style';
 import { Button } from '../button';
-import { DoubleLeftOutlined, DoubleRightOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { Tooltip } from '../tooltip';
 import dayjs from 'dayjs';
 import { style } from './calendar.style';
 import { useDateTimePickerContext } from './dateTimePicker';
+import { Icon } from '../..';
+import { faAnglesLeft } from '@fortawesome/free-solid-svg-icons/faAnglesLeft';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
+import { faAnglesRight } from '@fortawesome/free-solid-svg-icons/faAnglesRight';
 const days = ['一', '二', '三', '四', '五', '六', '日'];
 const renderedDaysList = (() => {
     const ret = [];
@@ -70,5 +74,5 @@ export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setIn
         }
         return ret;
     };
-    return (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(DoubleLeftOutlined, {}), '上一年', prevYear), renderHeadControl(_jsx(LeftOutlined, {}), '上一月', prevMonth)] }), _jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(RightOutlined, {}), '下一月', nextMonth), renderHeadControl(_jsx(DoubleRightOutlined, {}), '下一年', nextYear)] }), _jsxs("div", { className: classes.calendarHeadCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('years'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('months'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.calendarBody, "data-view-type": "dates", children: [renderedDaysList, renderDates()] }), _jsx("div", { className: classes.calendarFoot, children: _jsx(Button, { variant: "text", onClick: () => onChange(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
+    return (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(Icon, { icon: faAnglesLeft }), '上一年', prevYear), renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一月', prevMonth)] }), _jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一月', nextMonth), renderHeadControl(_jsx(Icon, { icon: faAnglesRight }), '下一年', nextYear)] }), _jsxs("div", { className: classes.calendarHeadCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('years'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('months'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.calendarBody, "data-view-type": "dates", children: [renderedDaysList, renderDates()] }), _jsx("div", { className: classes.calendarFoot, children: _jsx(Button, { variant: "text", onClick: () => onChange(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
 });

package/dist/esm/components/dateTimePicker/calendarYears.js

@@ -3,7 +3,9 @@ import { memo, useState } from 'react';
 import { classes, style } from './calendar.style';
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Icon } from '../..';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 export const CalendarYears = memo(({ innerD, setInnerD, setViewType }) => {
     const currentYear = innerD.year();
     const clickHandler = (year) => {
@@ -20,5 +22,5 @@ export const CalendarYears = memo(({ innerD, setInnerD, setViewType }) => {
         }
         return ret;
     };
-    return (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(LeftOutlined, {}), '上一页', () => setPage(p => p - 1)) }), _jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(RightOutlined, {}), '下一页', () => setPage(p => p + 1)) }), _jsx("div", { className: classes.calendarHeadCenter, children: "\u5E74\u4EFD" })] }), _jsx("div", { className: classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
+    return (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一页', () => setPage(p => p - 1)) }), _jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一页', () => setPage(p => p + 1)) }), _jsx("div", { className: classes.calendarHeadCenter, children: "\u5E74\u4EFD" })] }), _jsx("div", { className: classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
 });