es-grid-template 1.8.56 → 1.8.57

package/lib/table-component/body/TableBodyCell.js

@@ -175,6 +175,7 @@ const TableBodyCell = props => {
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
+  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
 
   // const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
@@ -204,18 +205,13 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
         [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
-        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
-        // [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id),
       }),
       style: {
+        ...cellStyles,
         display: 'flex',
-        // height: '36px',
         userSelect: 'none',
         width: cell.column.getSize(),
-        // flexBasis: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        // flex: 1,
-        // maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       },
       onClick: e => {
@@ -279,12 +275,10 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {
+        ...cellStyles,
         display: 'flex',
-        // height: '36px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        // flex: 1,
-        // maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
     }, renderCommand({
@@ -305,51 +299,16 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {
+        ...cellStyles,
         display: 'flex',
-        // height: '36px',
         minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        // flex: 1,
-        // maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('ui-rc_cell-content', {})
-    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), cell.column.id === "selection_column" && renderSelection({
+    }, cell.column.id === "selection_column" && renderSelection({
       cell,
       table,
       selectionSettings,
@@ -392,13 +351,11 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
+      ...cellStyles,
       display: 'flex',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
       minHeight: 36,
-      // flex: 1,
-      // maxWidth: cell.column.getSize(),
-      // height: '36px',
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
     onMouseEnter: e => {

package/lib/table-component/body/TableBodyRow.js

@@ -34,7 +34,8 @@ const TableBodyRow = ({
     recordDoubleClick,
     focusedCell,
     rowClassName,
-    rowEditable
+    rowEditable,
+    onRowStyles
   } = _react.default.useContext(_useContext.TableContext);
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -46,23 +47,18 @@ const TableBodyRow = ({
   const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
   const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
+  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
     ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
     ,
-    key: row.id
-    // data-row-key={cell.row.id}
-    ,
-    "data-row-key": row.id
-
-    // className={} ui-rc-table-row-selected
-    ,
+    key: row.id,
+    "data-row-key": row.id,
     className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
       [`${prefix}-grid-row-selected`]: row.getIsSelected(),
       [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble
-      // [`${prefix}-grid-row-focus`]: true,
     }),
     style: {
       // display: 'flex',
@@ -70,12 +66,11 @@ const TableBodyRow = ({
       // position: 'absolute',
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
-      // width: '100%',
       // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      // gridTemplateColumns: `repeat(${centerCOlumns.length + fixedLeftColumns.length + fixedRightColumns.length}, minmax(0, 1fr))`,
       height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size
+      minHeight: isEditing ? undefined : virtualRow.size,
+      ...rowStyles
     },
     onDoubleClick: e => {
       recordDoubleClick?.({

package/lib/table-component/footer/TableFooterRow.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _TableFooterCell = _interopRequireDefault(require("./TableFooterCell"));
 var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
 // import type { Virtualizer } from "@tanstack/react-virtual";
 // import type { Person } from "../makeData";
 
@@ -28,17 +29,19 @@ const TableFooterRow = ({
 
   // const a  =  table.getVisibleFlatColumns()
   const visibleColumns = table.getVisibleLeafColumns();
+  const {
+    onRowFooterStyles
+  } = _react.default.useContext(_useContext.TableContext);
+  const rowStyles = typeof onRowFooterStyles === 'function' ? onRowFooterStyles() : onRowFooterStyles;
 
   // const 
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    // data-index={headerGroup.id}
     key: headerGroup.id,
     style: {
+      ...rowStyles,
       display: "grid",
       width: "100%",
-      // borderBottom: "1px solid #e0e0e0",
-      // borderTop: "1px solid #e0e0e0",
       height: 37,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     },

package/lib/table-component/header/TableHead.js

@@ -34,15 +34,18 @@ const TableHead = ({
   // fixedRightColumns
 }) => {
   const {
-    prefix
+    prefix,
+    onRowHeaderStyles
   } = (0, _react.useContext)(_useContext.TableContext);
   const headerGroups = table.getFlatHeaders();
   const leafColumns = table.getVisibleFlatColumns();
   // const leafColumns11 = table.getIsAllColumnsVisible();
   const headerDepth = table.getHeaderGroups().length;
+  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `${prefix}-grid-thead`,
     style: {
+      ...rowStyles,
       display: 'grid',
       position: 'sticky',
       top: 0,

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

@@ -18,15 +18,6 @@ var _renderFilter = require("./renderFilter");
 var _server = _interopRequireDefault(require("react-dom/server"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// import { useSortable } from "@dnd-kit/sortable"
-
-// import { CSS } from '@dnd-kit/utilities'
-// import type { Virtualizer } from '@tanstack/react-virtual'
-
-// import { ColumnTable } from "../type";
-
-// import { Tooltip } from 'react-tooltip'
-
 const TableHeadCell2 = props => {
   const {
     column,
@@ -34,9 +25,6 @@ const TableHeadCell2 = props => {
     getPopupContainer,
     table,
     depth,
-    // t,
-    // columnVirtualizer,
-    // rowHeaderVirtualizer,
     colSpan,
     rowSpan
   } = props;
@@ -61,33 +49,16 @@ const TableHeadCell2 = props => {
   const {
     filterIcon
   } = column.columnDef.meta ?? {};
-
-  // const column = (column.columnDef ?? {}) as ColumnTable
-  // const column = column.columnDef
-
   const originalColumn = column.columnDef.meta ?? {};
+  const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
   const filtered = (column.getFilterValue() ?? []).length > 0;
   const cellContent = (0, _reactTable.flexRender)(column.columnDef.header, header.getContext());
-  // const cellContent = 'aaaa'
-
   const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.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,
+    whiteSpace: 'nowrap',
+    ...cellStyles
   };
   const getDropdownTrigger = () => {
     let iconFilter;
@@ -241,25 +212,15 @@ const TableHeadCell2 = props => {
       [`${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(),
+      ...style,
       minWidth: column.getSize(),
-      // flex: 1,
-      // flexGrow: column.getSize(),
-
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
-      // maxWidth: header.getSize(),
       ...(0, _utils.getCommonPinningStyles)(column),
-      width: 'auto',
-      ...style
+      width: 'auto'
     },
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-delay-show": 500,
@@ -270,9 +231,7 @@ const TableHeadCell2 = props => {
       [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
     })
   }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
-    checked: table.getIsAllRowsSelected()
-    // indeterminate={table.getIsSomeRowsSelected()}
-    ,
+    checked: table.getIsAllRowsSelected(),
     indeterminate: table.getIsSomePageRowsSelected(),
     onChange: e => {
       table.getToggleAllRowsSelectedHandler()(e);

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

@@ -7,31 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _reactTable = require("@tanstack/react-table");
 var _react = _interopRequireWildcard(require("react"));
-var _antd = require("antd");
-var _becoxyIcons = require("becoxy-icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _rcMasterUi = require("rc-master-ui");
-var _constant = require("../hook/constant");
 var _utils = require("../hook/utils");
 var _useContext = require("../useContext");
-var _renderFilter = require("./renderFilter");
 var _server = _interopRequireDefault(require("react-dom/server"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// import { useSortable } from "@dnd-kit/sortable"
-
-// import { CSS } from '@dnd-kit/utilities'
-// import type { Virtualizer } from '@tanstack/react-virtual'
-
-// import { ColumnTable } from "../type";
-
-// import { Tooltip } from 'react-tooltip'
-
 const TableHeadGroupCell = props => {
   const {
     column,
     header,
-    getPopupContainer,
+    // getPopupContainer,
     table,
     depth,
     // t,
@@ -41,30 +28,21 @@ const TableHeadGroupCell = props => {
     rowSpan
   } = props;
   const {
-    t,
+    // t,
     prefix,
-    setSorterChange,
-    setFilterChange,
+    // setSorterChange,
+    // setFilterChange,
     wrapSettings,
     selectionSettings,
     setIsSelectionChange,
-    id,
-    locale
+    id
+    // locale
   } = (0, _react.useContext)(_useContext.TableContext);
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
-  const [selectedKeys, setSelectedKeys] = _react.default.useState([]);
-  const [visible, setVisible] = _react.default.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 cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
   const cellContent = (0, _reactTable.flexRender)(column.columnDef.header, header.getContext());
   const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
@@ -77,148 +55,10 @@ const TableHeadGroupCell = props => {
   //   })
 
   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,
+    whiteSpace: 'nowrap',
+    ...cellStyles
   };
-  const getDropdownTrigger = () => {
-    let iconFilter;
-    if (typeof filterIcon === 'function') {
-      iconFilter = filterIcon(filtered);
-    } else if (filterIcon) {
-      iconFilter = filterIcon;
-    } else {
-      iconFilter = /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
-        style: {
-          color: filtered ? '#E3165B' : '#283046'
-        },
-        fontSize: 12
-      });
-    }
-    return /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
-      tabIndex: -1,
-      className: (0, _classnames.default)(`${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() ?? (0, _utils.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 = (0, _utils.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 = (0, _utils.getTypeFilter)(originalColumn);
-      const operatorValue = column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(originalColumn);
-      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        // className='ui-rc-table-filter-dropdown'
-
-        className: (0, _classnames.default)(`${prefix}-grid-filter-dropdown`, {}),
-        style: {}
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          minWidth: 275,
-          padding: '8px'
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
-        className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
-        options: (0, _constant.translateOption)(operatorOptions, t),
-        style: {
-          width: '100%',
-          marginBottom: 8
-        },
-        value: operatorValue,
-        onChange: val => {
-          column.setFilterOperator(val);
-        }
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          marginBottom: 8
-        }
-      }, (0, _renderFilter.renderFilter)({
-        column: column,
-        selectedKeys,
-        setSelectedKeys
-        // selectedKeys: (column.getFilterValue() ?? []) as string[],
-        // setSelectedKeys: column.setFilterValue,
-      })), /*#__PURE__*/_react.default.createElement(_antd.Space, {
-        style: {
-          justifyContent: 'end',
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
-        type: "primary",
-        onClick: () => {
-          // column.setFilterValue(selectedKeys)
-
-          doFilter(true);
-        },
-        size: "small",
-        style: {
-          width: 90
-        }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement("div", {
     // ref={setNodeRef}
     className: (0, _classnames.default)(`${prefix}-grid-cell`, {
@@ -228,21 +68,14 @@ const TableHeadGroupCell = props => {
       [`${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}
-    ,
-
+    }),
     "data-col-span": colSpan,
     key: header.id,
     style: {
-      // display: 'flex',
-      // width: column.getSize(),
       minWidth: column.getSize(),
       flex: 1,
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
-      // maxWidth: header.getSize(),
       ...(0, _utils.getCommonPinningStyles2)(header),
       width: 'auto',
       ...style
@@ -276,52 +109,7 @@ const TableHeadGroupCell = props => {
       [`${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)), !_constant.nonActionColumn.includes(column.id) && column.columns.length < 1 && /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc-header-trigger"
-  }, column.getCanSort() && /*#__PURE__*/_react.default.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.default.createElement(_becoxyIcons.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.default.createElement(_becoxyIcons.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.default.createElement(_becoxyIcons.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: (0, _classnames.default)(`ui-rc-table-column-sorter-cancel`, {
-      active: true
-    })
-  })), column.getCanFilter() && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, mergedDropdownProps)))), column.getCanResize() && /*#__PURE__*/_react.default.createElement("div", {
+  }, cellContent))), column.getCanResize() && /*#__PURE__*/_react.default.createElement("div", {
     onDoubleClick: () => column.resetSize(),
     onMouseDown: header.getResizeHandler(),
     onTouchStart: header.getResizeHandler(),

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

@@ -9,40 +9,29 @@ var _sortable = require("@dnd-kit/sortable");
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
-// import type { Virtualizer } from '@tanstack/react-virtual'
-// import type { Person } from "../../tanstack-table/makeData"
-
-// import { getCommonPinningStyles } from '../hook/utils'
-
 const TableHeadRow = ({
   table,
   headerGroup,
   columnVirtualizer
-  // virtualPaddingLeft,
-  // virtualPaddingRight,
-  // fixedLeftColumns,
-  // fixedRightColumns
 }) => {
   const {
-    prefix
+    prefix,
+    onRowHeaderStyles
   } = _react.default.useContext(_useContext.TableContext);
-
-  // const virtualColumns = columnVirtualizer.getVirtualItems()
-
   const columnOrder = table.getState().columnOrder;
+  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
   return /*#__PURE__*/_react.default.createElement("div", {
     key: headerGroup.id
     // ref={el => {
     //   if (el) rowHeaderVirtualizer.measureElement(el)
     // }}
-    // data-index={rowHeaderVirtual?.index}
     ,
+
     "data-index": headerGroup.id,
-    className: `${prefix}-grid-row`,
+    className: `${prefix}-grid-row ${prefix}-grid-header`,
     style: {
-      // display: 'flex',
+      ...rowStyles,
       width: '100%'
-      // minHeight: rowHeaderVirtual?.size
     }
   }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
     items: columnOrder,
@@ -61,9 +50,7 @@ const TableHeadRow = ({
       key: header.id,
       header: header,
       table: table,
-      columnVirtualizer: columnVirtualizer
-      // rowHeaderVirtualizer={rowHeaderVirtualizer}
-      ,
+      columnVirtualizer: columnVirtualizer,
       colSpan: header.colSpan,
       rowSpan: rowSpan
     });