es-grid-template 1.7.47 → 1.8.0

package/es/table-component/header/TableHeadCell2.js

@@ -0,0 +1,331 @@
+// import { useSortable } from "@dnd-kit/sortable"
+
+import { flexRender } from '@tanstack/react-table';
+import React, { useContext } from 'react';
+// import { CSS } from '@dnd-kit/utilities'
+// import type { Virtualizer } from '@tanstack/react-virtual'
+import { Button, Space } from 'antd';
+import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
+import classNames from 'classnames';
+import { Checkbox, Dropdown, Select } from 'rc-master-ui';
+import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
+import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
+import { TableContext } from "../useContext";
+import { renderFilter } from "./renderFilter";
+import ReactDOMServer from 'react-dom/server';
+
+// import { ColumnTable } from "../type";
+
+// import { Tooltip } from 'react-tooltip'
+
+const TableHeadCell2 = props => {
+  const {
+    column,
+    header,
+    getPopupContainer,
+    table,
+    depth,
+    // t,
+    // columnVirtualizer,
+    // rowHeaderVirtualizer,
+    colSpan,
+    rowSpan
+  } = props;
+  const {
+    t,
+    prefix,
+    setSorterChange,
+    setFilterChange,
+    wrapSettings,
+    selectionSettings,
+    setIsSelectionChange,
+    id,
+    locale
+  } = useContext(TableContext);
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+  const [selectedKeys, setSelectedKeys] = React.useState([]);
+  const [visible, setVisible] = React.useState(false);
+  const {
+    filterIcon
+  } = column.columnDef.meta ?? {};
+
+  // const column = (column.columnDef ?? {}) as ColumnTable
+  // const column = column.columnDef
+
+  const originalColumn = column.columnDef.meta ?? {};
+  const filtered = (column.getFilterValue() ?? []).length > 0;
+  const cellContent = flexRender(column.columnDef.header, header.getContext());
+  // const cellContent = 'aaaa'
+
+  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
+
+  // const filtered = column.getIsFiltered()
+
+  // const { attributes, isDragging, listeners, setNodeRef, transform } =
+  //   useSortable({
+  //     id: column.id,
+  //   })
+
+  const style = {
+    // opacity: isDragging ? 0.8 : 1,
+    // position: 'relative',
+    // transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
+    transition: 'width transform 0.2s ease-in-out',
+    whiteSpace: 'nowrap'
+    // width: column.getSize(),
+    // zIndex: isDragging ? 1 : 0,
+  };
+  const getDropdownTrigger = () => {
+    let iconFilter;
+    if (typeof filterIcon === 'function') {
+      iconFilter = filterIcon(filtered);
+    } else if (filterIcon) {
+      iconFilter = filterIcon;
+    } else {
+      iconFilter = /*#__PURE__*/React.createElement(FilterFill, {
+        style: {
+          color: filtered ? '#E3165B' : '#283046'
+        },
+        fontSize: 12
+      });
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      role: "button",
+      tabIndex: -1,
+      className: classNames(`${prefix}-trigger`, {
+        active: filtered
+      }),
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }, iconFilter);
+  };
+  const triggerVisible = newVisible => {
+    setVisible(newVisible);
+  };
+  const onVisibleChange = (newVisible, info) => {
+    if (info.source === 'trigger') {
+      if (newVisible) {
+        const filterValue = column.getFilterValue() ?? [];
+        const operatorValue = column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
+        setSelectedKeys(filterValue);
+        column.setFilterOperator?.(operatorValue);
+      } else {}
+      triggerVisible(newVisible);
+    }
+  };
+  const doFilter = type => {
+    if (type) {
+      column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+    } else {
+      column.setFilterValue(undefined);
+      setSelectedKeys([]);
+    }
+    setFilterChange(true);
+    triggerVisible(false);
+    setTimeout(() => {
+      setFilterChange(false);
+    }, 10);
+  };
+  const mergedDropdownProps = extendsObject({
+    trigger: ['click'],
+    placement: 'bottomRight',
+    // placement: direction === 'rtl' ? 'bottomLeft' : 'bottomRight',
+    children: getDropdownTrigger(),
+    getPopupContainer
+  }, {
+    // ...filterDropdownProps,
+    // rootClassName: classNames(rootClassName, filterDropdownProps.rootClassName),
+    open: visible,
+    onOpenChange: onVisibleChange,
+    destroyPopupOnHide: true,
+    dropdownRender: () => {
+      const type = getTypeFilter(originalColumn);
+      const operatorValue = column.getFilterOperator() ?? getDefaultOperator(originalColumn);
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
+      return /*#__PURE__*/React.createElement("div", {
+        // className='ui-rc-table-filter-dropdown'
+
+        className: classNames(`${prefix}-grid-filter-dropdown`, {}),
+        style: {}
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          minWidth: 275,
+          padding: '8px'
+        }
+      }, /*#__PURE__*/React.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select, {
+        options: translateOption(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorValue,
+        onChange: val => {
+          column.setFilterOperator(val);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, renderFilter({
+        column: column,
+        selectedKeys,
+        setSelectedKeys
+        // selectedKeys: (column.getFilterValue() ?? []) as string[],
+        // setSelectedKeys: column.setFilterValue,
+      })), /*#__PURE__*/React.createElement(Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: () => {
+          // column.setFilterValue(selectedKeys)
+
+          doFilter(true);
+        },
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          // column.setFilterValue([])
+          // column.setFilterOperator('')
+
+          setSelectedKeys([]);
+          doFilter(false);
+        }
+      }, t ? t('Clear') : 'Clear'))));
+
+      // if (typeof filterDropdownProps?.dropdownRender === 'function') {
+      //   return filterDropdownProps.dropdownRender(dropdownContent);
+      // }
+      // return dropdownContent;
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    // ref={setNodeRef}
+    className: classNames(`${prefix}-grid-cell`, {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
+      [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
+    })
+    // colSpan={colSpan}
+    // rowSpan={rowSpan}
+    ,
+
+    key: column.id,
+    style: {
+      // display: 'flex',
+      // width: column.getSize(),
+      minWidth: column.getSize(),
+      // flex: 1,
+      flexGrow: column.getSize(),
+      gridRow: `${depth + 1} / span ${rowSpan}`,
+      gridColumn: `span ${colSpan}`,
+      // maxWidth: header.getSize(),
+      ...getCommonPinningStyles(column),
+      width: 'auto',
+      ...style
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-delay-show": 500,
+    "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement("div", null, cellContent))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('', {
+      [`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
+      [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
+    })
+  }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
+    checked: table.getIsAllRowsSelected(),
+    indeterminate: table.getIsSomeRowsSelected(),
+    onChange: e => {
+      setIsSelectionChange({
+        isChange: true,
+        type: 'all',
+        rowData: {}
+      });
+      table.getToggleAllRowsSelectedHandler()(e);
+    }
+  }), column.id !== 'selection_column' && /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-column-title",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('', {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
+    })
+  }, cellContent)), !nonActionColumn.includes(column.id) && column.columns.length < 1 && /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-header-trigger"
+  }, column.getCanSort() && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginInlineEnd: 6,
+      cursor: 'pointer'
+    },
+    onClick: e => {
+      setSorterChange(true);
+      const toggleSortingHandler = column.getToggleSortingHandler();
+      if (typeof toggleSortingHandler === 'function') {
+        toggleSortingHandler(e);
+      }
+    }
+  }, column.getIsSorted() ? column.getIsSorted() === 'asc' ? /*#__PURE__*/React.createElement(ArrowUp, {
+    fontSize: 15,
+    color: '#000'
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp giảm dần'
+    ,
+    "data-tooltip-content": locale?.triggerDesc ?? 'Click to sort descending'
+  }) : /*#__PURE__*/React.createElement(ArrowDown, {
+    fontSize: 15,
+    color: '#000',
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    // data-tooltip-content='Nhấp để hủy sắp xếp'
+    ,
+    "data-tooltip-content": locale?.cancelSort ?? 'Click to cancel sorting'
+  }) : /*#__PURE__*/React.createElement(SortCancel
+  // data-tooltip-id={`${id}-tooltip-header-trigger`}
+  , {
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp tăng dần'
+    ,
+    "data-tooltip-content": locale?.triggerAsc ?? 'Click to sort ascending',
+    fontSize: 15,
+    style: {
+      display: 'flex'
+    },
+    className: classNames(`ui-rc-table-column-sorter-cancel`, {
+      active: true
+    })
+  })), column.getCanFilter() && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), column.getCanResize() && /*#__PURE__*/React.createElement("div", {
+    onDoubleClick: () => column.resetSize(),
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    // onMouseUp: () => {
+    //   requestAnimationFrame(() => {
+    //     columnVirtualizer.measure()
+    //     // rowHeaderVirtualizer.measure()
+    //   })
+    // },
+
+    className: `resizer ${column.getIsResizing() ? 'isResizing' : ''}`
+  }));
+};
+export default TableHeadCell2;

package/es/table-component/header/TableHeadGroupCell.d.ts

@@ -0,0 +1,17 @@
+import type { Table } from '@tanstack/react-table';
+import { type Header } from '@tanstack/react-table';
+import React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+interface TableHeadCellProps<T> {
+    t?: any;
+    table: Table<T>;
+    column: any;
+    header: Header<T, unknown>;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    colSpan: number;
+    rowSpan: number;
+    depth: number;
+}
+declare const TableHeadGroupCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
+export default TableHeadGroupCell;

package/es/table-component/header/TableHeadGroupCell.js

@@ -0,0 +1,327 @@
+// import { useSortable } from "@dnd-kit/sortable"
+
+import { flexRender } from '@tanstack/react-table';
+import React, { useContext } from 'react';
+// import { CSS } from '@dnd-kit/utilities'
+// import type { Virtualizer } from '@tanstack/react-virtual'
+import { Button, Space } from 'antd';
+import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
+import classNames from 'classnames';
+import { Checkbox, Dropdown, Select } from 'rc-master-ui';
+import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
+import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
+import { TableContext } from "../useContext";
+import { renderFilter } from "./renderFilter";
+import ReactDOMServer from 'react-dom/server';
+
+// import { ColumnTable } from "../type";
+
+// import { Tooltip } from 'react-tooltip'
+
+const TableHeadGroupCell = props => {
+  const {
+    column,
+    header,
+    getPopupContainer,
+    table,
+    depth,
+    // t,
+    // columnVirtualizer,
+    // rowHeaderVirtualizer,
+    colSpan,
+    rowSpan
+  } = props;
+  const {
+    t,
+    prefix,
+    setSorterChange,
+    setFilterChange,
+    wrapSettings,
+    selectionSettings,
+    setIsSelectionChange,
+    id,
+    locale
+  } = useContext(TableContext);
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+  const [selectedKeys, setSelectedKeys] = React.useState([]);
+  const [visible, setVisible] = React.useState(false);
+  const {
+    filterIcon
+  } = column.columnDef.meta ?? {};
+
+  // const column = (column.columnDef ?? {}) as ColumnTable
+  // const column = column.columnDef
+
+  const originalColumn = column.columnDef.meta ?? {};
+  const filtered = (column.getFilterValue() ?? []).length > 0;
+  const cellContent = flexRender(column.columnDef.header, header.getContext());
+  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
+
+  // const filtered = column.getIsFiltered()
+
+  // const { attributes, isDragging, listeners, setNodeRef, transform } =
+  //   useSortable({
+  //     id: column.id,
+  //   })
+
+  const style = {
+    // opacity: isDragging ? 0.8 : 1,
+    // position: 'relative',
+    // transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
+    transition: 'width transform 0.2s ease-in-out',
+    whiteSpace: 'nowrap'
+    // width: column.getSize(),
+    // zIndex: isDragging ? 1 : 0,
+  };
+  const getDropdownTrigger = () => {
+    let iconFilter;
+    if (typeof filterIcon === 'function') {
+      iconFilter = filterIcon(filtered);
+    } else if (filterIcon) {
+      iconFilter = filterIcon;
+    } else {
+      iconFilter = /*#__PURE__*/React.createElement(FilterFill, {
+        style: {
+          color: filtered ? '#E3165B' : '#283046'
+        },
+        fontSize: 12
+      });
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      role: "button",
+      tabIndex: -1,
+      className: classNames(`${prefix}-trigger`, {
+        active: filtered
+      }),
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }, iconFilter);
+  };
+  const triggerVisible = newVisible => {
+    setVisible(newVisible);
+  };
+  const onVisibleChange = (newVisible, info) => {
+    if (info.source === 'trigger') {
+      if (newVisible) {
+        const filterValue = column.getFilterValue() ?? [];
+        const operatorValue = column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
+        setSelectedKeys(filterValue);
+        column.setFilterOperator?.(operatorValue);
+      } else {}
+      triggerVisible(newVisible);
+    }
+  };
+  const doFilter = type => {
+    if (type) {
+      column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+    } else {
+      column.setFilterValue(undefined);
+      setSelectedKeys([]);
+    }
+    setFilterChange(true);
+    triggerVisible(false);
+    setTimeout(() => {
+      setFilterChange(false);
+    }, 10);
+  };
+  const mergedDropdownProps = extendsObject({
+    trigger: ['click'],
+    placement: 'bottomRight',
+    // placement: direction === 'rtl' ? 'bottomLeft' : 'bottomRight',
+    children: getDropdownTrigger(),
+    getPopupContainer
+  }, {
+    // ...filterDropdownProps,
+    // rootClassName: classNames(rootClassName, filterDropdownProps.rootClassName),
+    open: visible,
+    onOpenChange: onVisibleChange,
+    destroyPopupOnHide: true,
+    dropdownRender: () => {
+      const type = getTypeFilter(originalColumn);
+      const operatorValue = column.getFilterOperator() ?? getDefaultOperator(originalColumn);
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
+      return /*#__PURE__*/React.createElement("div", {
+        // className='ui-rc-table-filter-dropdown'
+
+        className: classNames(`${prefix}-grid-filter-dropdown`, {}),
+        style: {}
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          minWidth: 275,
+          padding: '8px'
+        }
+      }, /*#__PURE__*/React.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select, {
+        options: translateOption(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorValue,
+        onChange: val => {
+          column.setFilterOperator(val);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, renderFilter({
+        column: column,
+        selectedKeys,
+        setSelectedKeys
+        // selectedKeys: (column.getFilterValue() ?? []) as string[],
+        // setSelectedKeys: column.setFilterValue,
+      })), /*#__PURE__*/React.createElement(Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: () => {
+          // column.setFilterValue(selectedKeys)
+
+          doFilter(true);
+        },
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          // column.setFilterValue([])
+          // column.setFilterOperator('')
+
+          setSelectedKeys([]);
+          doFilter(false);
+        }
+      }, t ? t('Clear') : 'Clear'))));
+
+      // if (typeof filterDropdownProps?.dropdownRender === 'function') {
+      //   return filterDropdownProps.dropdownRender(dropdownContent);
+      // }
+      // return dropdownContent;
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    // ref={setNodeRef}
+    className: classNames(`${prefix}-grid-cell`, {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
+      [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
+    })
+    // colSpan={colSpan}
+    // rowSpan={rowSpan}
+    ,
+
+    key: column.id,
+    style: {
+      // display: 'flex',
+      // width: column.getSize(),
+      minWidth: column.getSize(),
+      flex: 1,
+      gridRow: `${depth + 1} / span ${rowSpan}`,
+      gridColumn: `span ${colSpan}`,
+      // maxWidth: header.getSize(),
+      ...getCommonPinningStyles(column),
+      width: 'auto',
+      ...style
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement("div", null, cellContent))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('', {
+      [`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
+      [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
+    })
+  }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
+    checked: table.getIsAllRowsSelected(),
+    indeterminate: table.getIsSomeRowsSelected(),
+    onChange: e => {
+      setIsSelectionChange({
+        isChange: true,
+        type: 'all',
+        rowData: {}
+      });
+      table.getToggleAllRowsSelectedHandler()(e);
+    }
+  }), column.id !== 'selection_column' && /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-column-title",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('', {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
+    })
+  }, cellContent)), !nonActionColumn.includes(column.id) && column.columns.length < 1 && /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-header-trigger"
+  }, column.getCanSort() && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginInlineEnd: 6,
+      cursor: 'pointer'
+    },
+    onClick: e => {
+      setSorterChange(true);
+      const toggleSortingHandler = column.getToggleSortingHandler();
+      if (typeof toggleSortingHandler === 'function') {
+        toggleSortingHandler(e);
+      }
+    }
+  }, column.getIsSorted() ? column.getIsSorted() === 'asc' ? /*#__PURE__*/React.createElement(ArrowUp, {
+    fontSize: 15,
+    color: '#000'
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp giảm dần'
+    ,
+    "data-tooltip-content": locale?.triggerDesc ?? 'Click to sort descending'
+  }) : /*#__PURE__*/React.createElement(ArrowDown, {
+    fontSize: 15,
+    color: '#000',
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    // data-tooltip-content='Nhấp để hủy sắp xếp'
+    ,
+    "data-tooltip-content": locale?.cancelSort ?? 'Click to cancel sorting'
+  }) : /*#__PURE__*/React.createElement(SortCancel
+  // data-tooltip-id={`${id}-tooltip-header-trigger`}
+  , {
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp tăng dần'
+    ,
+    "data-tooltip-content": locale?.triggerAsc ?? 'Click to sort ascending',
+    fontSize: 15,
+    style: {
+      display: 'flex'
+    },
+    className: classNames(`ui-rc-table-column-sorter-cancel`, {
+      active: true
+    })
+  })), column.getCanFilter() && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), column.getCanResize() && /*#__PURE__*/React.createElement("div", {
+    onDoubleClick: () => column.resetSize(),
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    // onMouseUp: () => {
+    //   requestAnimationFrame(() => {
+    //     columnVirtualizer.measure()
+    //     // rowHeaderVirtualizer.measure()
+    //   })
+    // },
+
+    className: `resizer ${column.getIsResizing() ? 'isResizing' : ''}`
+  }));
+};
+export default TableHeadGroupCell;

package/es/table-component/header/TableHeadRow.js

@@ -22,7 +22,7 @@ const TableHeadRow = ({
   // const virtualColumns = columnVirtualizer.getVirtualItems()
 
   const columnOrder = table.getState().columnOrder;
-  return /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement("div", {
     key: headerGroup.id
     // ref={el => {
     //   if (el) rowHeaderVirtualizer.measureElement(el)