es-grid-template 1.8.68 → 1.8.70

package/es/grid-component/type.d.ts

@@ -159,6 +159,8 @@ export type ColumnTable<RecordType = AnyObject> = {
     onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    sumGroup?: boolean;
+    onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
 };
 export type Locale = TableLocale & {
     ok_btn?: string;
@@ -193,11 +195,13 @@ export type Locale = TableLocale & {
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
+    id?: string;
     theme?: {
         theme?: 'dark' | 'light';
         backgroundColor?: string;
         color?: string;
     };
+    className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;

package/es/table-component/components/checkbox-filter/CheckboxFilter.js

@@ -64,7 +64,7 @@ const CheckboxFilter = props => {
     prefixCls = 'ui-rc-table-filter',
     dropdownPrefixCls = 'ui-rc-dropdown',
     filterMultiple,
-    selectedKeys,
+    selectedKeys: propsSelectedKeys,
     locale,
     options,
     filterMode = 'tree',
@@ -74,6 +74,12 @@ const CheckboxFilter = props => {
     // setSearchValue,
     onSelect
   } = props;
+  const selectedKeys = React.useMemo(() => {
+    if (propsSelectedKeys) {
+      return propsSelectedKeys.map(it => String(it));
+    }
+    return [];
+  }, [propsSelectedKeys]);
   const [searchValue, setSearchValue] = React.useState('');
   const [openKeys, setOpenKeys] = React.useState([]);
 
@@ -129,6 +135,7 @@ const CheckboxFilter = props => {
     const key = String(filter.value);
     const item = {
       title: filter.label,
+      id: filter.value !== undefined ? filter.value : index,
       key: filter.value !== undefined ? key : String(index)
     };
     if (filter.children) {
@@ -146,7 +153,7 @@ const CheckboxFilter = props => {
   });
   const onCheckAll = e => {
     if (e.target.checked) {
-      const allFilterKeys = flattenKeys(options).map(key => String(key));
+      const allFilterKeys = flattenKeys(options).map(key => key);
 
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
@@ -161,10 +168,17 @@ const CheckboxFilter = props => {
   }) => {
     if (!filterMultiple) {
       // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
-      onSelect?.(checked && node.key ? [node.key] : []);
+
+      onSelect?.(checked && node.key ? [node.id] : []);
     } else {
+      if (!checked) {
+        const rs = propsSelectedKeys.filter(it => it !== node.id);
+        onSelect?.(rs);
+      } else {
+        const rs = [...propsSelectedKeys, node.id];
+        onSelect?.(rs);
+      }
       // onSelectKeys({ selectedKeys: keys });
-      onSelect?.(keys);
     }
   };
   if (filterMode === 'tree') {

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

@@ -137,7 +137,7 @@ const TableHeadCell = props => {
           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", {
+      }, /*#__PURE__*/React.createElement("div", null), column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(operatorOptions, t),

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

@@ -136,7 +136,7 @@ const TableHeadCell2 = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, /*#__PURE__*/React.createElement("div", null), column.columnDef?.meta?.showOperator !== false && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", null), column.columnDef?.meta?.hideOperator === true && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(operatorOptions, t),

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

@@ -258,7 +258,9 @@ export const renderFilter = args => {
       }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
         locale: locale,
         selectedKeys: selectedKeys,
-        onSelect: setSelectedKeys
+        onSelect: val => {
+          setSelectedKeys(val);
+        }
         // options={options}
         ,
         options: source ? source : options ?? [],

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

@@ -819,6 +819,89 @@ export const shouldInclude = (item, queries) => {
   }
   return result;
 };
+
+// function compareValues(a: any, b: any, order: "ascend" | "descend") {
+//   const desc = order === "descend";
+
+//   if (a == null && b == null) return 0;
+//   if (a == null) return desc ? 1 : -1;
+//   if (b == null) return desc ? -1 : 1;
+
+//   // Nếu là số
+//   if (typeof a === "number" && typeof b === "number") {
+//     return desc ? b - a : a - b;
+//   }
+
+//   // Nếu là ngày hợp lệ
+//   const dateA = new Date(a);
+//   const dateB = new Date(b);
+//   if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
+//     return desc
+//       ? dateB.getTime() - dateA.getTime()
+//       : dateA.getTime() - dateB.getTime();
+//   }
+
+//   // Mặc định coi như string
+//   return desc
+//     ? String(b).localeCompare(String(a))
+//     : String(a).localeCompare(String(b));
+// }
+
+// export function sortData(data: any[], sorter: Sorter[]): any[] {
+//   const sorted = [...data].sort((a, b) => {
+//     for (const { field, order } of sorter) {
+//       const result = compareValues(a[field], b[field], order);
+//       if (result !== 0) return result;
+//     }
+//     return 0;
+//   });
+
+//   return sorted.map(item => ({
+//     ...item,
+//     children: item.children
+//       ? sortData(item.children, sorter)
+//       : undefined
+//   }));
+// }
+
+// export function filterDataByColumns(data: any[], queries: any[], sorter: Sorter[], keysFilter: string[] | undefined) {
+
+//   if (!queries || queries.length === 0) {
+//     return sorter ? sortData(data, sorter) : data;
+//   }
+
+//   let filtered = data.map(item => {
+//     const newItem = { ...item }
+
+//     if (Array.isArray(item.children)) {
+//       newItem.children = filterDataByColumns(item.children, queries, sorter, keysFilter)
+//     }
+
+//     const isSelfMatched = shouldInclude(item, queries) || keysFilter?.includes(newItem?.rowId)
+
+//     // Nếu chính item thỏa hoặc có con thỏa → giữ lại
+//     if (isSelfMatched || (newItem.children && newItem.children.length > 0)) {
+//       return newItem
+//     }
+
+//     return null // loại bỏ node không phù hợp
+//   })
+//     .filter(Boolean) // xóa các null
+
+//   if (sorter && sorter.length > 0) {
+//     filtered = sortData(filtered, sorter);
+//   }
+
+//   return filtered;
+// }
+
+function getSortValue(item, field) {
+  if (item[field] !== undefined) return item[field];
+  if (item.children && item.children.length > 0) {
+    return getSortValue(item.children[0], field);
+  }
+  return undefined;
+}
 function compareValues(a, b, order) {
   const desc = order === "descend";
   if (a == null && b == null) return 0;
@@ -846,7 +929,7 @@ export function sortData(data, sorter) {
       field,
       order
     } of sorter) {
-      const result = compareValues(a[field], b[field], order);
+      const result = compareValues(getSortValue(a, field), getSortValue(b, field), order);
       if (result !== 0) return result;
     }
     return 0;

package/es/table-component/table/Grid.js

@@ -55,6 +55,7 @@ const Grid = props => {
     allowResizing,
     windowSize,
     fullScreenTitle,
+    className: tableClassNames,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -258,7 +259,7 @@ const Grid = props => {
       theme: theme?.theme,
       ...theme
     },
-    className: classNames(`${prefix}-grid`, {
+    className: classNames(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
@@ -337,7 +338,7 @@ const Grid = props => {
       theme: theme?.theme,
       ...theme
     },
-    className: classNames(`${prefix}-grid`, {
+    className: classNames(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),

package/es/table-virtuoso/body/TableBodyCell.js

@@ -144,7 +144,9 @@ const TableBodyCell = props => {
     table,
     isEditing,
     colSpan,
+    rowSpan,
     groupValue
+    // ...cellProps
   } = props;
   const {
     id,
@@ -309,6 +311,10 @@ const TableBodyCell = props => {
   return /*#__PURE__*/React.createElement("td", {
     key: cell.id,
     colSpan: colSpan,
+    rowSpan: rowSpan
+    // {...cellProps}
+    ,
+
     ref: el => {
       if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
         el?.focus();

package/es/table-virtuoso/body/TableBodyRow.js

@@ -53,12 +53,22 @@ const TableBodyRow = ({
       }
     }
   }), visibleCells.map(cell => {
+    const originCol = cell.column.columnDef.meta ?? {};
+    const {
+      onCell
+    } = originCol ?? {};
+    const cellAttributes = onCell?.(cell.row.original, cell.row.index) ?? {};
+    const {
+      colSpan: onCellColSpan,
+      rowSpan: onCellRowSpan,
+      ...otherCellAttributes
+    } = cellAttributes;
     const nonGroupColumns = visibleCells.filter(col => col.column.id !== 'selection_column' && col.column.id !== '#');
     const firstNonGroupColumn = nonGroupColumns[0];
 
     // const colSpan  = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
-    const colSpan = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
-    if (row.subRows && row.subRows.length > 0 && colSpan === 0) {
+    const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
+    if (row.subRows && row.subRows.length > 0 && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
       return null;
     }
 
@@ -87,7 +97,7 @@ const TableBodyRow = ({
         rowData: row.original,
         value: cellValue
       }) : /*#__PURE__*/React.createElement(React.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
-      return /*#__PURE__*/React.createElement(TableBodyCell, {
+      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -95,11 +105,13 @@ const TableBodyRow = ({
         commandClick: commandClick,
         virtualRow: virtualRow,
         isEditing: false,
-        colSpan: colSpan ?? 1,
+        colSpan: colSpanGroup ?? 1,
+        rowSpan: 1
+      }, otherCellAttributes, {
         groupValue: groupValue
-      });
+      }));
     }
-    return /*#__PURE__*/React.createElement(TableBodyCell, {
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
       table: table,
       tableId: tableId,
       key: cell.id,
@@ -107,8 +119,9 @@ const TableBodyRow = ({
       commandClick: commandClick,
       virtualRow: virtualRow,
       isEditing: false,
-      colSpan: colSpan ?? 1
-    });
+      colSpan: onCellColSpan ?? 1,
+      rowSpan: onCellRowSpan ?? 1
+    }, otherCellAttributes));
   }));
 };
 export default TableBodyRow;

package/es/table-virtuoso/header/TableHeadCell.js

@@ -122,7 +122,7 @@ const TableHeadCell = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+      }, column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(operatorOptions, t),

package/es/table-virtuoso/table/Grid.js

@@ -52,6 +52,7 @@ const Grid = props => {
     columnFilters,
     setColumnOrder,
     rowSelection,
+    className: tableClassNames,
     ...rest
   } = props;
   const [isSelectionChange, setIsSelectionChange] = React.useState({
@@ -153,7 +154,7 @@ const Grid = props => {
       theme: theme?.theme,
       ...theme
     },
-    className: classNames(`${prefix}-grid`, {
+    className: classNames(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),

package/lib/grid-component/type.d.ts

@@ -159,6 +159,8 @@ export type ColumnTable<RecordType = AnyObject> = {
     onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    sumGroup?: boolean;
+    onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
 };
 export type Locale = TableLocale & {
     ok_btn?: string;
@@ -193,11 +195,13 @@ export type Locale = TableLocale & {
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
+    id?: string;
     theme?: {
         theme?: 'dark' | 'light';
         backgroundColor?: string;
         color?: string;
     };
+    className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;

package/lib/table-component/components/checkbox-filter/CheckboxFilter.js

@@ -73,7 +73,7 @@ const CheckboxFilter = props => {
     prefixCls = 'ui-rc-table-filter',
     dropdownPrefixCls = 'ui-rc-dropdown',
     filterMultiple,
-    selectedKeys,
+    selectedKeys: propsSelectedKeys,
     locale,
     options,
     filterMode = 'tree',
@@ -83,6 +83,12 @@ const CheckboxFilter = props => {
     // setSearchValue,
     onSelect
   } = props;
+  const selectedKeys = React.useMemo(() => {
+    if (propsSelectedKeys) {
+      return propsSelectedKeys.map(it => String(it));
+    }
+    return [];
+  }, [propsSelectedKeys]);
   const [searchValue, setSearchValue] = React.useState('');
   const [openKeys, setOpenKeys] = React.useState([]);
 
@@ -138,6 +144,7 @@ const CheckboxFilter = props => {
     const key = String(filter.value);
     const item = {
       title: filter.label,
+      id: filter.value !== undefined ? filter.value : index,
       key: filter.value !== undefined ? key : String(index)
     };
     if (filter.children) {
@@ -155,7 +162,7 @@ const CheckboxFilter = props => {
   });
   const onCheckAll = e => {
     if (e.target.checked) {
-      const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => String(key));
+      const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => key);
 
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
@@ -170,10 +177,17 @@ const CheckboxFilter = props => {
   }) => {
     if (!filterMultiple) {
       // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
-      onSelect?.(checked && node.key ? [node.key] : []);
+
+      onSelect?.(checked && node.key ? [node.id] : []);
     } else {
+      if (!checked) {
+        const rs = propsSelectedKeys.filter(it => it !== node.id);
+        onSelect?.(rs);
+      } else {
+        const rs = [...propsSelectedKeys, node.id];
+        onSelect?.(rs);
+      }
       // onSelectKeys({ selectedKeys: keys });
-      onSelect?.(keys);
     }
   };
   if (filterMode === 'tree') {

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

@@ -146,7 +146,7 @@ const TableHeadCell = props => {
           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", {
+      }, /*#__PURE__*/_react.default.createElement("div", null), column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
         options: (0, _hooks.translateOption)(operatorOptions, t),

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

@@ -145,7 +145,7 @@ const TableHeadCell2 = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, /*#__PURE__*/_react.default.createElement("div", null), column.columnDef?.meta?.showOperator !== false && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", null), column.columnDef?.meta?.hideOperator === true && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
         options: (0, _hooks.translateOption)(operatorOptions, t),

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

@@ -267,7 +267,9 @@ const renderFilter = args => {
       }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
         locale: locale,
         selectedKeys: selectedKeys,
-        onSelect: setSelectedKeys
+        onSelect: val => {
+          setSelectedKeys(val);
+        }
         // options={options}
         ,
         options: source ? source : options ?? [],

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

@@ -915,7 +915,89 @@ const shouldInclude = (item, queries) => {
   }
   return result;
 };
+
+// function compareValues(a: any, b: any, order: "ascend" | "descend") {
+//   const desc = order === "descend";
+
+//   if (a == null && b == null) return 0;
+//   if (a == null) return desc ? 1 : -1;
+//   if (b == null) return desc ? -1 : 1;
+
+//   // Nếu là số
+//   if (typeof a === "number" && typeof b === "number") {
+//     return desc ? b - a : a - b;
+//   }
+
+//   // Nếu là ngày hợp lệ
+//   const dateA = new Date(a);
+//   const dateB = new Date(b);
+//   if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
+//     return desc
+//       ? dateB.getTime() - dateA.getTime()
+//       : dateA.getTime() - dateB.getTime();
+//   }
+
+//   // Mặc định coi như string
+//   return desc
+//     ? String(b).localeCompare(String(a))
+//     : String(a).localeCompare(String(b));
+// }
+
+// export function sortData(data: any[], sorter: Sorter[]): any[] {
+//   const sorted = [...data].sort((a, b) => {
+//     for (const { field, order } of sorter) {
+//       const result = compareValues(a[field], b[field], order);
+//       if (result !== 0) return result;
+//     }
+//     return 0;
+//   });
+
+//   return sorted.map(item => ({
+//     ...item,
+//     children: item.children
+//       ? sortData(item.children, sorter)
+//       : undefined
+//   }));
+// }
+
+// export function filterDataByColumns(data: any[], queries: any[], sorter: Sorter[], keysFilter: string[] | undefined) {
+
+//   if (!queries || queries.length === 0) {
+//     return sorter ? sortData(data, sorter) : data;
+//   }
+
+//   let filtered = data.map(item => {
+//     const newItem = { ...item }
+
+//     if (Array.isArray(item.children)) {
+//       newItem.children = filterDataByColumns(item.children, queries, sorter, keysFilter)
+//     }
+
+//     const isSelfMatched = shouldInclude(item, queries) || keysFilter?.includes(newItem?.rowId)
+
+//     // Nếu chính item thỏa hoặc có con thỏa → giữ lại
+//     if (isSelfMatched || (newItem.children && newItem.children.length > 0)) {
+//       return newItem
+//     }
+
+//     return null // loại bỏ node không phù hợp
+//   })
+//     .filter(Boolean) // xóa các null
+
+//   if (sorter && sorter.length > 0) {
+//     filtered = sortData(filtered, sorter);
+//   }
+
+//   return filtered;
+// }
 exports.shouldInclude = shouldInclude;
+function getSortValue(item, field) {
+  if (item[field] !== undefined) return item[field];
+  if (item.children && item.children.length > 0) {
+    return getSortValue(item.children[0], field);
+  }
+  return undefined;
+}
 function compareValues(a, b, order) {
   const desc = order === "descend";
   if (a == null && b == null) return 0;
@@ -943,7 +1025,7 @@ function sortData(data, sorter) {
       field,
       order
     } of sorter) {
-      const result = compareValues(a[field], b[field], order);
+      const result = compareValues(getSortValue(a, field), getSortValue(b, field), order);
       if (result !== 0) return result;
     }
     return 0;

package/lib/table-component/table/Grid.js

@@ -60,6 +60,7 @@ const Grid = props => {
     allowResizing,
     windowSize,
     fullScreenTitle,
+    className: tableClassNames,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -263,7 +264,7 @@ const Grid = props => {
       theme: theme?.theme,
       ...theme
     },
-    className: (0, _classnames.default)(`${prefix}-grid`, {
+    className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
@@ -342,7 +343,7 @@ const Grid = props => {
       theme: theme?.theme,
       ...theme
     },
-    className: (0, _classnames.default)(`${prefix}-grid`, {
+    className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),

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

@@ -151,7 +151,9 @@ const TableBodyCell = props => {
     table,
     isEditing,
     colSpan,
+    rowSpan,
     groupValue
+    // ...cellProps
   } = props;
   const {
     id,
@@ -316,6 +318,10 @@ const TableBodyCell = props => {
   return /*#__PURE__*/_react.default.createElement("td", {
     key: cell.id,
     colSpan: colSpan,
+    rowSpan: rowSpan
+    // {...cellProps}
+    ,
+
     ref: el => {
       if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
         el?.focus();

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

@@ -60,12 +60,22 @@ const TableBodyRow = ({
       }
     }
   }), visibleCells.map(cell => {
+    const originCol = cell.column.columnDef.meta ?? {};
+    const {
+      onCell
+    } = originCol ?? {};
+    const cellAttributes = onCell?.(cell.row.original, cell.row.index) ?? {};
+    const {
+      colSpan: onCellColSpan,
+      rowSpan: onCellRowSpan,
+      ...otherCellAttributes
+    } = cellAttributes;
     const nonGroupColumns = visibleCells.filter(col => col.column.id !== 'selection_column' && col.column.id !== '#');
     const firstNonGroupColumn = nonGroupColumns[0];
 
     // const colSpan  = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
-    const colSpan = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
-    if (row.subRows && row.subRows.length > 0 && colSpan === 0) {
+    const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
+    if (row.subRows && row.subRows.length > 0 && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
       return null;
     }
 
@@ -94,7 +104,7 @@ const TableBodyRow = ({
         rowData: row.original,
         value: cellValue
       }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
-      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {
+      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -102,11 +112,13 @@ const TableBodyRow = ({
         commandClick: commandClick,
         virtualRow: virtualRow,
         isEditing: false,
-        colSpan: colSpan ?? 1,
+        colSpan: colSpanGroup ?? 1,
+        rowSpan: 1
+      }, otherCellAttributes, {
         groupValue: groupValue
-      });
+      }));
     }
-    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {
+    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
       table: table,
       tableId: tableId,
       key: cell.id,
@@ -114,8 +126,9 @@ const TableBodyRow = ({
       commandClick: commandClick,
       virtualRow: virtualRow,
       isEditing: false,
-      colSpan: colSpan ?? 1
-    });
+      colSpan: onCellColSpan ?? 1,
+      rowSpan: onCellRowSpan ?? 1
+    }, otherCellAttributes));
   }));
 };
 var _default = exports.default = TableBodyRow;

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

@@ -131,7 +131,7 @@ const TableHeadCell = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
+      }, column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
         options: (0, _hooks.translateOption)(operatorOptions, t),

package/lib/table-virtuoso/table/Grid.js

@@ -61,6 +61,7 @@ const Grid = props => {
     columnFilters,
     setColumnOrder,
     rowSelection,
+    className: tableClassNames,
     ...rest
   } = props;
   const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
@@ -162,7 +163,7 @@ const Grid = props => {
       theme: theme?.theme,
       ...theme
     },
-    className: (0, _classnames.default)(`${prefix}-grid`, {
+    className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.68",
+  "version": "1.8.70",
   "description": "es-grid-template",
   "keywords": [
     "react",