es-grid-template 1.8.71 → 1.8.72

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactTable = require("@tanstack/react-table");
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMasterUi = require("rc-master-ui");
+var _utils = require("../hook/utils");
+var _useContext = require("../useContext");
+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; }
+const TableHeadGroupCell = props => {
+  const {
+    column,
+    header,
+    table,
+    depth,
+    colSpan,
+    rowSpan
+  } = props;
+  const {
+    prefix,
+    wrapSettings,
+    selectionSettings,
+    setIsSelectionChange,
+    id
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+  const originalColumn = column.columnDef.meta ?? {};
+  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;
+  const style = {
+    transition: 'width transform 0.2s ease-in-out',
+    whiteSpace: 'nowrap',
+    ...cellStyles
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    // 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-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
+      [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
+    }),
+    "data-col-span": colSpan,
+    key: header.id,
+    style: {
+      minWidth: column.getSize(),
+      flex: 1,
+      gridRow: `${depth + 1} / span ${rowSpan}`,
+      gridColumn: `span ${colSpan}`,
+      ...(0, _utils.getCommonPinningStyles2)(header),
+      width: 'auto',
+      ...style
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !hasValue ? '' : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement("div", null, cellContent))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('', {
+      [`${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.default.createElement(_rcMasterUi.Checkbox, {
+    checked: table.getIsAllRowsSelected(),
+    indeterminate: table.getIsSomeRowsSelected(),
+    onChange: e => {
+      setIsSelectionChange({
+        isChange: true,
+        type: 'all',
+        rowData: {},
+        rowsData: []
+      });
+      table.getToggleAllRowsSelectedHandler()(e);
+    }
+  }), column.id !== 'selection_column' && /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-column-title",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('', {
+      [`${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))), column.getCanResize() && /*#__PURE__*/_react.default.createElement("div", {
+    onDoubleClick: () => column.resetSize(),
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    className: `resizer ${column.getIsResizing() ? 'isResizing' : ''}`
+  }));
+};
+var _default = exports.default = TableHeadGroupCell;

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

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

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _sortable = require("@dnd-kit/sortable");
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
+var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
+const TableHeadRow = ({
+  table,
+  headerGroup,
+  columnVirtualizer
+}) => {
+  const {
+    prefix,
+    onRowHeaderStyles
+  } = _react.default.useContext(_useContext.TableContext);
+  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": headerGroup.id,
+    className: `${prefix}-grid-row ${prefix}-grid-header`,
+    style: {
+      ...rowStyles,
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: columnOrder,
+    strategy: _sortable.horizontalListSortingStrategy
+  }, 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,
+      colSpan: header.colSpan,
+      rowSpan: rowSpan
+    });
+  })));
+};
+var _default = exports.default = TableHeadRow;

package/lib/group-component/header/renderFilter.d.ts

@@ -0,0 +1,20 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import React from "react";
+import type { IFormat } from "../../grid-component/type";
+type RenderFilterProps<RecordType> = {
+    column: ColumnDef<RecordType, unknown>;
+    selectedKeys: any[];
+    setSelectedKeys: (keys: any[]) => void;
+    t?: any;
+    locale?: any;
+    dataSourceFilter?: {
+        key: string;
+        data: any[];
+    }[];
+    format?: IFormat;
+    buddhistLocale?: any;
+    dateRangeLocale?: any;
+    doFilter?: (type: boolean) => void;
+};
+export declare const renderFilter: <RecordType>(args: RenderFilterProps<RecordType>) => React.JSX.Element;
+export {};

package/lib/group-component/header/renderFilter.js

@@ -0,0 +1,301 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderFilter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _moment = _interopRequireDefault(require("moment/moment"));
+var _rcMasterUi = require("rc-master-ui");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _utils = require("../hook/utils");
+var _number = _interopRequireDefault(require("../components/number"));
+var _numberRange = _interopRequireDefault(require("../components/number-range"));
+var _CheckboxFilter = _interopRequireDefault(require("../components/checkbox-filter/CheckboxFilter"));
+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 type { IFormat } from "../../tanstack-table/type";
+
+// import type { AnyObject } from './type';
+
+const renderFilter = args => {
+  const {
+    column,
+    selectedKeys,
+    setSelectedKeys,
+    // confirm,
+    t,
+    locale,
+    buddhistLocale,
+    dateRangeLocale,
+    dataSourceFilter,
+    format,
+    doFilter
+  } = args;
+  const {
+    format: columnFormat,
+    typeFilter,
+    type: columnType,
+    field,
+    source
+  } = column?.meta ?? {};
+  const cellFormat = columnFormat ? typeof columnFormat === 'function' ? columnFormat({}) : columnFormat : format;
+  const type = (0, _utils.getTypeFilter)(column.meta ?? {});
+  const dateFormat = (0, _utils.getDatepickerFormat)(typeFilter ?? columnType, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = (0, _utils.convertFormat)((0, _utils.getDateRangeFormat)(columnType, cellFormat) ?? 'dd/MM/yyyy');
+  const find = dataSourceFilter?.find(it => it.key === field);
+  const options = find ? find.data : [];
+  switch (type) {
+    case 'Number':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_number.default, {
+        t: t,
+        value: selectedKeys[0],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        },
+        onPressEnter: () => doFilter?.(true)
+      }))));
+    case 'NumberRange':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_numberRange.default, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        },
+        onPressEnter: () => doFilter?.(true)
+      })));
+    case 'Date':
+      const dateValue = selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: dateValue,
+        defaultValue: dateValue
+        // placeholder={t ? t(column?.placeholder) : column?.placeholder}
+        ,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'DateRange':
+      // const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
+      const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DateRangePicker
+      // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
+      , {
+        style: {
+          width: 300
+        },
+        format: dateRangeFormat,
+        value: dateRangeValue,
+        onChange: value => {
+          const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
+          setSelectedKeys(newDateRangeValue);
+        },
+        menuClassName: "rc-menu-popup"
+      })))));
+    case 'Week':
+      const weekValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'week',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: weekValue,
+        defaultValue: weekValue
+        // placeholder={column?.placeholder}
+        ,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'Month':
+      const monthValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'month',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: monthValue,
+        defaultValue: monthValue
+        // placeholder={column?.placeholder}
+        ,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      })));
+
+    //   // case 'Quarter':
+    //   //
+    //   //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //   //
+    //   //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //   //
+    //   //   return (
+    //   //     <Fragment>
+    //   //       <div>
+    //   //
+    //   //
+    //   //         <div className={'mb-1'}>
+    //   //
+    //   //           <DatePicker
+    //   //             format={{
+    //   //               format: dateFormat,
+    //   //               type: 'mask'
+    //   //             }}
+    //   //             locale={buddhistLocale}
+    //   //             style={{width: '100%', height: '100%'}}
+    //   //             value={pickerValue}
+    //   //             defaultValue={pickerValue}
+    //   //             placeholder={column.placeholder}
+    //   //             onChange={(date, dateString) => {
+    //   //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //   //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //   //
+    //   //             }}
+    //   //
+    //   //           />
+    //   //         </div>
+    //   //
+    //   //
+    //   //       </div>
+    //   //     </Fragment>
+    //   //   )
+    //   //
+    //   // case 'Year':
+    //   //
+    //   //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //   //
+    //   //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //   //
+    //   //   return (
+    //   //     <Fragment>
+    //   //       <div>
+    //   //
+    //   //
+    //   //         <div className={'mb-1'}>
+    //   //
+    //   //           <DatePicker
+    //   //             format={{
+    //   //               format: dateFormat,
+    //   //               type: 'mask'
+    //   //             }}
+    //   //             locale={buddhistLocale}
+    //   //             style={{width: '100%', height: '100%'}}
+    //   //             value={pickerValue}
+    //   //             defaultValue={pickerValue}
+    //   //             placeholder={column.placeholder}
+    //   //             onChange={(date, dateString) => {
+    //   //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //   //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //   //
+    //   //             }}
+    //   //
+    //   //           />
+    //   //         </div>
+    //   //
+    //   //
+    //   //       </div>
+    //   //     </Fragment>
+    //   //   )
+
+    case 'Dropdown':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
+      // options={translateOption(numberOperator, t)}
+      // options={find ? options : column.source ?? []}
+      , {
+        options: source ? source : options ?? [],
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: selectedKeys[0],
+        notFoundContent: /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
+          image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
+          description: locale?.emptyText
+        }),
+        onChange: val => {
+          // setOperatorKey(val)
+          setSelectedKeys(val ? [val] : []);
+        },
+        showSearch: true,
+        allowClear: true
+      }))));
+    case 'Checkbox':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
+        locale: locale,
+        selectedKeys: selectedKeys,
+        onSelect: val => {
+          setSelectedKeys(val);
+        }
+        // options={options}
+        ,
+        options: source ? source : options ?? [],
+        filterMultiple: true
+        // open={visible}
+        // searchValue={searchValue}
+        // setSearchValue={setSearchValue}
+      })))));
+    case 'Text':
+    default:
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
+        className: "aaaa",
+        classNames: {
+          input: 'filter-input'
+        },
+        placeholder: t ? t('Search') : `Search`,
+        value: selectedKeys[0],
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
+        // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
+        ,
+        onPressEnter: () => doFilter?.(true),
+        allowClear: true
+        // autoFocus={true}
+      }))));
+  }
+};
+exports.renderFilter = renderFilter;

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

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

package/lib/group-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/group-component/hook/useColumns.d.ts

@@ -0,0 +1,28 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
+import type { Cell, ColumnDef } from '@tanstack/react-table';
+export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+    t?: any;
+    columns: ColumnsTable<T>;
+    format?: IFormat;
+    editAble?: boolean;
+}): ColumnDef<T, any>[];
+export type ToggleRow<T> = {
+    e: any;
+    cell: Cell<T, unknown>;
+    selectionSettings?: SelectionSettings;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+};
+export declare const toggleRowSelection: <T>(props: ToggleRow<T>) => void;