es-grid-template 1.7.26 → 1.7.27

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _reactTable = require("@tanstack/react-table");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
+var _server = _interopRequireDefault(require("react-dom/server"));
 var _utils = require("../hook/utils");
 var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -15,8 +16,6 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
 var _constant = require("../hook/constant");
-// import ReactDOMServer from 'react-dom/server'
-
 // import { nonActionColumn } from "../hook/constant";
 
 // import type { Dispatch, SetStateAction } from "react";
@@ -132,14 +131,11 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
-  // const hasValue = html.trim().length > 0;
-
+  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
-  // const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined
-
+  const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record);
   // const allRows = table.getRowModel().rows;
   const allRows = table.getRowModel().flatRows;
@@ -192,7 +188,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -244,7 +242,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -264,7 +264,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable111 `, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -746,11 +748,9 @@ const TableBodyCellEdit = props => {
     "data-col-index": colIndex,
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
-    "data-row-key": cell.row.id
-    // data-tooltip-id={`${id}-tooltip-content`}
-    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
-    ,
-
+    "data-row-key": cell.row.id,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !isEditing && !hasValue && !message ? undefined : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -766,7 +766,9 @@ const TableBodyCellEdit = props => {
       'cell-paste-border-top': isInRangePaste && isTopPaste && (pasteRangeState.endRowIndex ?? 0) < (endRowIndex ?? 0),
       'cell-paste-border-left': isInRangePaste && isLeftPaste,
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
       display: 'flex',

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

@@ -61,7 +61,8 @@ const TableFooterCell = ({
       //  [`${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-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-right`]: true
     }),
     key: header.id,
     colSpan: header.colSpan,
@@ -71,6 +72,6 @@ const TableFooterCell = ({
       width: header?.getSize() ?? header.column.getSize(),
       backgroundColor: "#fafafa"
     }
-  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement("span", null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
+  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
 };
 var _default = exports.default = TableFooterCell;

package/lib/table-component/header/TableHead.d.ts

@@ -1,4 +1,4 @@
-import type { Column, Table } from '@tanstack/react-table';
+import { type Column, type Table } from '@tanstack/react-table';
 import { type Virtualizer } from '@tanstack/react-virtual';
 import React from 'react';
 interface TableHeadProps<T> {

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

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactTable = require("@tanstack/react-table");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _react = _interopRequireWildcard(require("react"));
 var _useContext = require("../useContext");
 var _TableHeadRow = _interopRequireDefault(require("./TableHeadRow"));
+var _utils = require("../hook/utils");
 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; }
 const TableHead = ({
@@ -32,7 +34,8 @@ const TableHead = ({
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
     overscan: 5
   });
-  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  // const virtualRows = rowVirtualizer.getVirtualItems()
 
   // const columnSizingState = table.getState().columnSizing
 
@@ -45,13 +48,12 @@ const TableHead = ({
   return /*#__PURE__*/_react.default.createElement("thead", {
     className: `${prefix}-grid-thead`,
     style: {
-      display: 'grid',
+      // display: 'grid',
       position: 'sticky',
       top: 0,
       zIndex: 1
     }
-  }, virtualRows.map(virtualRow => {
-    const headerGroup = table.getHeaderGroups()[virtualRow.index];
+  }, table.getHeaderGroups().map(headerGroup => {
     return /*#__PURE__*/_react.default.createElement(_TableHeadRow.default, {
       table: table,
       columnVirtualizer: columnVirtualizer,
@@ -61,9 +63,43 @@ const TableHead = ({
       virtualPaddingLeft: virtualPaddingLeft,
       virtualPaddingRight: virtualPaddingRight,
       fixedLeftColumns: fixedLeftColumns,
-      fixedRightColumns: fixedRightColumns,
-      rowHeaderVirtual: virtualRow
+      fixedRightColumns: fixedRightColumns
+      // rowHeaderVirtual={virtualRow}
     });
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      key: headerGroup.id
+    }, headerGroup.headers.map(header => {
+      const columnRelativeDepth = header.depth - header.column.depth;
+      if (columnRelativeDepth > 1) {
+        return null;
+      }
+      let rowSpan = 1;
+      if (header.isPlaceholder) {
+        const leafs = header.getLeafHeaders();
+        rowSpan = leafs[leafs.length - 1].depth - header.depth;
+      }
+      return /*#__PURE__*/_react.default.createElement("th", {
+        key: header.id,
+        colSpan: header.colSpan,
+        rowSpan: rowSpan,
+        style: {
+          padding: '12px',
+          textAlign: 'left',
+          fontSize: '0.75rem',
+          fontWeight: 'medium',
+          color: '#6b7280',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+          // backgroundColor: '#f9fafb',
+          // border: '1px solid #e5e7eb',
+          width: header.getSize(),
+          minWidth: header.getSize(),
+          maxWidth: header.getSize(),
+          // overflow: 'hidden',
+          ...(0, _utils.getCommonPinningStyles)(header.column)
+        }
+      }, (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
+    }));
   }));
 };
 var _default = exports.default = TableHead;

package/lib/table-component/header/TableHeadCell.d.ts

@@ -9,6 +9,8 @@ interface TableHeadCellProps<T> {
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     rowHeaderVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+    colSpan: any;
+    rowSpan: any;
 }
 declare const TableHeadCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
 export default TableHeadCell;

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

@@ -33,7 +33,9 @@ const TableHeadCell = props => {
     table,
     t,
     columnVirtualizer,
-    rowHeaderVirtualizer
+    rowHeaderVirtualizer,
+    colSpan,
+    rowSpan
   } = props;
   const {
     prefix,
@@ -46,7 +48,7 @@ const TableHeadCell = props => {
     locale
   } = (0, _react.useContext)(_useContext.TableContext);
   const isPinned = header.column.getIsPinned();
-  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
+  // const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left')
   const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
   const [selectedKeys, setSelectedKeys] = _react.default.useState([]);
   const [visible, setVisible] = _react.default.useState(false);
@@ -119,9 +121,9 @@ const TableHeadCell = props => {
   };
   const doFilter = type => {
     if (type) {
-      header.column.setFilterValue(selectedKeys);
+      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? [''] : selectedKeys);
     } else {
-      header.column.setFilterValue('');
+      header.column.setFilterValue(undefined);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -209,57 +211,24 @@ const TableHeadCell = props => {
       // return dropdownContent;
     }
   });
-
-  // if (header.column.id === "#" || header.column.id === "selection_column") {
-  //   return (
-  //     <th
-  //       ref={el => {
-  //         if (el) columnVirtualizer.measureElement(el)
-  //       }}
-  //       data-index={header.id}
-  //       // ref={setNodeRef}
-  //       key={header.id}
-  //       colSpan={header.colSpan}
-  //       style={{
-  //         display: 'flex',
-  //         ...getCommonPinningStyles(header.column),
-  //         ...style,
-  //         width: header?.getSize() ?? header.column.getSize()
-  //       }}
-  //     >
-
-  //       {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-  //       {/* <div> */}
-
-  //       <div
-  //         {...{
-  //           onDoubleClick: () => header.column.resetSize(),
-
-  //           onMouseDown: header.getResizeHandler(),
-  //           onTouchStart: header.getResizeHandler(),
-
-  //           className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""
-  //             }`,
-  //         }}
-  //       />
-
-  //       {/* </div> */}
-  //     </th>
-  //   )
-  // }
-
   return /*#__PURE__*/_react.default.createElement("th", {
     // ref={setNodeRef}
     className: (0, _classnames.default)(`${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-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: originalColumn?.headerTextAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: originalColumn?.headerTextAlign === 'right'
     }),
+    colSpan: colSpan,
+    rowSpan: rowSpan,
     key: header.id,
     style: {
-      display: 'flex',
+      // display: 'flex',
       width: header.getSize(),
+      minWidth: header.getSize(),
+      maxWidth: header.getSize(),
       ...(0, _utils.getCommonPinningStyles)(header.column),
       ...style
     },
@@ -291,7 +260,7 @@ const TableHeadCell = 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(header.id) && /*#__PURE__*/_react.default.createElement("span", {
+  }, cellContent)), !_constant.nonActionColumn.includes(header.column.id) && header.subHeaders.length < 2 && /*#__PURE__*/_react.default.createElement("span", {
     className: "ui-rc-header-trigger"
   }, header.column.getCanSort() && /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/lib/table-component/header/TableHeadRow.d.ts

@@ -1,5 +1,5 @@
-import type { Column, HeaderGroup, Table } from '@tanstack/react-table';
-import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import { type Column, type HeaderGroup, type Table } from '@tanstack/react-table';
+import type { Virtualizer } from '@tanstack/react-virtual';
 import React from 'react';
 interface TableHeadRowProps<T> {
     columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
@@ -10,7 +10,6 @@ interface TableHeadRowProps<T> {
     table: Table<T>;
     fixedLeftColumns: Column<T, unknown>[];
     fixedRightColumns: Column<T, unknown>[];
-    rowHeaderVirtual: VirtualItem;
 }
-declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
+declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, }: TableHeadRowProps<any>) => React.JSX.Element;
 export default TableHeadRow;

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

@@ -6,93 +6,90 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _sortable = require("@dnd-kit/sortable");
+var _reactTable = require("@tanstack/react-table");
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
+var _utils = require("../hook/utils");
 // import type { Person } from "../../tanstack-table/makeData"
 
 const TableHeadRow = ({
   table,
   columnVirtualizer,
   rowHeaderVirtualizer,
-  headerGroup,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  fixedLeftColumns,
-  fixedRightColumns,
-  rowHeaderVirtual
+  headerGroup
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // fixedLeftColumns,
+  // fixedRightColumns,
+  // rowHeaderVirtual
 }) => {
   const {
     prefix
   } = _react.default.useContext(_useContext.TableContext);
-  const virtualColumns = columnVirtualizer.getVirtualItems();
-  // const virtualColumns = columnVirtualizer.measurementsCache
 
-  // console.log('virtualColumns', virtualColumns)
+  // const virtualColumns = columnVirtualizer.getVirtualItems()
+  // const virtualColumns = columnVirtualizer.measurementsCache
 
   const columnOrder = table.getState().columnOrder;
   return /*#__PURE__*/_react.default.createElement("tr", {
-    key: headerGroup.id,
-    ref: el => {
-      if (el) rowHeaderVirtualizer.measureElement(el);
-    }
+    key: headerGroup.id
+    // ref={el => {
+    //   if (el) rowHeaderVirtualizer.measureElement(el)
+    // }}
     // data-index={rowHeaderVirtual?.index}
     ,
     "data-index": headerGroup.id,
     className: `${prefix}-grid-row`,
     style: {
-      display: 'flex',
-      width: '100%',
-      minHeight: rowHeaderVirtual?.size
+      // display: 'flex',
+      width: '100%'
+      // minHeight: rowHeaderVirtual?.size
     }
   }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
     items: columnOrder,
     strategy: _sortable.horizontalListSortingStrategy
-  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+  }, headerGroup.headers.map(header => {
+    const columnRelativeDepth = header.depth - header.column.depth;
+    if (columnRelativeDepth > 1) {
+      return null;
+    }
+    let rowSpan = 1;
+    if (header.isPlaceholder) {
+      const leafs = header.getLeafHeaders();
+      rowSpan = leafs[leafs.length - 1].depth - header.depth;
+    }
     return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
+      key: header.id,
+      header: header,
+      table: table,
       columnVirtualizer: columnVirtualizer,
       rowHeaderVirtualizer: rowHeaderVirtualizer,
-      key: column.id,
-      table: table,
-      header: headerGroup.headers.find(h => h.column.id === column.id)
-      // column={column as any}
+      colSpan: header.colSpan,
+      rowSpan: rowSpan
     });
-  }) : null, virtualPaddingLeft ? /*#__PURE__*/_react.default.createElement("th", {
-    className: "",
-    style: {
-      display: 'flex',
-      width: virtualPaddingLeft
-    }
-  }) : null, virtualColumns.map(virtualColumn => {
-    const header = headerGroup.headers[virtualColumn.index];
-    const isFixed = table.getState().columnPinning.left?.includes(header?.column?.id) || table.getState().columnPinning.right?.includes(header?.column?.id);
-    if (header && !isFixed) {
-      return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
-        key: header.id,
-        header: header,
-        table: table,
-        columnVirtualizer: columnVirtualizer,
-        rowHeaderVirtualizer: rowHeaderVirtualizer
-      });
-    }
-  }),
-  //fake empty column to the right for virtualization scroll padding
-  fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
-    columnVirtualizer: columnVirtualizer,
-    rowHeaderVirtualizer: rowHeaderVirtualizer,
-    table: table,
-    key: column.id,
-    header: headerGroup.headers.find(h => h.column.id === column.id)
-    // column={column as any}
-  })) : null, virtualPaddingRight ?
-  /*#__PURE__*/
-  //fake empty column to the right for virtualization scroll padding
-  _react.default.createElement("th", {
-    className: "nnnnnnnnnnnn",
-    style: {
-      display: 'flex',
-      width: virtualPaddingRight
-    }
-  }) : null));
+    return /*#__PURE__*/_react.default.createElement("th", {
+      key: header.id,
+      colSpan: header.colSpan,
+      rowSpan: rowSpan,
+      style: {
+        padding: '12px',
+        textAlign: 'left',
+        fontSize: '0.75rem',
+        fontWeight: 'medium',
+        color: '#6b7280',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        // backgroundColor: '#f9fafb',
+        // border: '1px solid #e5e7eb',
+        borderLeft: 0,
+        width: header.getSize(),
+        minWidth: header.getSize(),
+        maxWidth: header.getSize(),
+        // overflow: 'hidden',
+        ...(0, _utils.getCommonPinningStyles)(header.column)
+      }
+    }, (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
+  })));
 };
 var _default = exports.default = TableHeadRow;

package/lib/table-component/hook/convert.d.ts

@@ -0,0 +1 @@
+export declare function convertColumns(columns: any[]): any[];

package/lib/table-component/hook/convert.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertColumns = convertColumns;
+var _reactTable = require("@tanstack/react-table");
+const columnHelper = (0, _reactTable.createColumnHelper)();
+function convertColumns(columns) {
+  return columns.map(col => {
+    if (col.columns) {
+      // Group column
+      return columnHelper.group({
+        ...col,
+        columns: convertColumns(col.columns) // đệ quy
+      });
+    } else {
+      // Accessor column
+      let accessor;
+
+      // Ưu tiên accessorKey nếu có, nếu không thì dùng hàm row => row[col.id]
+      if (col.accessorKey) {
+        accessor = col.accessorKey;
+      } else if (col.id) {
+        accessor = row => row[col.id];
+      } else {
+        throw new Error('Column không có accessorKey hoặc id');
+      }
+      return columnHelper.accessor(accessor, {
+        ...col
+      });
+    }
+  });
+}

package/lib/table-component/hook/useColumns.js

@@ -123,6 +123,7 @@ function convertToTanStackColumns({
           }
         } else {
           return t ? t(headerText) : headerText;
+          // return field
         }
       },
       cell: props => {

package/lib/table-component/hook/utils.js

@@ -91,6 +91,9 @@ const getCommonPinningStyles = column => {
     position: isPinned ? "sticky" : "relative",
     width: column.getSize(),
     zIndex: isPinned ? 2 : 0
+    // border: '1px solid #e5e7eb',
+    // borderTop: 0,
+    // borderBottom: 0
   };
 };
 exports.getCommonPinningStyles = getCommonPinningStyles;