es-grid-template 1.8.65 → 1.8.67

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

@@ -15,14 +15,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
-var _constant = require("../hook/constant");
+var _hooks = require("../../grid-component/hooks");
 var _useColumns = require("../hook/useColumns");
-// import { nonActionColumn } from "../hook/constant";
-
-// import type { Dispatch, SetStateAction } from "react";
-
-// import { nonActionColumn } from "../hook/constant";
-
 const renderCellIndex = props => {
   const {
     parrents,
@@ -646,7 +640,7 @@ const TableBodyCellEdit = props => {
     if (e.key === 'ArrowRight') {
       e.preventDefault();
       e.stopPropagation();
-      const allCols = table.getVisibleLeafColumns().filter(it => !_constant.nonActionColumn.includes(it.id));
+      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
       const nextCol = allCols[currentColIndex + 1];
       if (nextCol) {
@@ -677,7 +671,7 @@ const TableBodyCellEdit = props => {
     }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
-      const allCols = table.getVisibleLeafColumns().filter(it => !_constant.nonActionColumn.includes(it.id));
+      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
 
       // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
@@ -825,7 +819,7 @@ const TableBodyCellEdit = props => {
   }
   const handleMouseDownIndex = rowId => {
     setIsSelecting?.(true);
-    const allColumns = table.getVisibleLeafColumns().filter(it => !_constant.nonActionColumn.includes(it.id));
+    const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
     const firstCOl = (0, _utils.findFirst)(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
@@ -853,7 +847,7 @@ const TableBodyCellEdit = props => {
   };
   const handleMouseEnterIndex = rowId => {
     if (isSelecting) {
-      const allColumns = table.getVisibleLeafColumns().filter(it => !_constant.nonActionColumn.includes(it.id));
+      const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
 
       // const firstCOl = findFirst(allColumns)
 

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

@@ -11,22 +11,13 @@ 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 _hooks = require("../../grid-component/hooks");
 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 TableHeadCell = props => {
   const {
     header,
@@ -149,7 +140,7 @@ const TableHeadCell = props => {
     dropdownRender: () => {
       const type = (0, _utils.getTypeFilter)(originalColumn);
       const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(originalColumn);
-      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
       return /*#__PURE__*/_react.default.createElement("div", {
         // className='ui-rc-table-filter-dropdown'
 
@@ -163,7 +154,7 @@ const TableHeadCell = props => {
       }, /*#__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),
+        options: (0, _hooks.translateOption)(operatorOptions, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -271,7 +262,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.column.id) && header.subHeaders.length < 2 && /*#__PURE__*/_react.default.createElement("span", {
+  }, cellContent)), !_hooks.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/TableHeadCell2.js

@@ -11,11 +11,11 @@ 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"));
+var _hooks = require("../../grid-component/hooks");
 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 TableHeadCell2 = props => {
@@ -133,7 +133,7 @@ const TableHeadCell2 = props => {
     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;
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
       return /*#__PURE__*/_react.default.createElement("div", {
         // className='ui-rc-table-filter-dropdown'
 
@@ -147,7 +147,7 @@ const TableHeadCell2 = props => {
       }, /*#__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", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
-        options: (0, _constant.translateOption)(operatorOptions, t),
+        options: (0, _hooks.translateOption)(operatorOptions, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -266,7 +266,7 @@ const TableHeadCell2 = 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", {
+  }, cellContent)), !_hooks.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: {

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

@@ -2,9 +2,9 @@ import type { CheckboxProps, TablePaginationConfig } from 'rc-master-ui';
 import type { ItemType } from 'rc-master-ui/es/menu/interface';
 import type { Cell, Header, OnChangeFn, Row } from '@tanstack/react-table';
 import type { ReactElement, ReactNode } from 'react';
-import type { IOperator } from './hook/constant';
 import type { ColorPickerProps } from 'antd';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
+import type { IOperator } from '../grid-component/hooks';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
         rowSpan?: number;
@@ -80,6 +80,7 @@ export type ColumnTemplate<RecordType> = {
     index: number;
     field: string;
 };
+export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type ColumnTable<RecordType = AnyObject> = {
     field: string;
     width?: number;
@@ -200,6 +201,7 @@ export type TableProps<RecordType = AnyObject> = {
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;
+    rowKey?: string;
     infiniteScroll?: boolean;
     next?: () => void;
     locale?: Locale;

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

@@ -37,12 +37,9 @@ const ColumnsGroup = props => {
   const menuRef = (0, _react.useRef)();
   const [tempGroup, setTempGroup] = (0, _react.useState)([]);
   const [clicked, setClicked] = (0, _react.useState)(false);
-  console.log('columns', columns);
-  console.log('columnsGrouped', columnsGrouped);
   const rsCol = _react.default.useMemo(() => {
     return columns.filter(it => it.visible !== false && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'selection_column' && it.field !== 'command');
   }, [columns, tempGroup]);
-  console.log('rsCol', rsCol);
   const options = _react.default.useMemo(() => {
     return rsCol.map(it => ({
       ...it,
@@ -235,6 +232,7 @@ const ColumnsGroup = props => {
     title: 'Nhóm dữ liệu'
   }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.Group, {
     fontSize: 18,
+    color: "#555555",
     style: {
       cursor: 'pointer'
     }

package/lib/table-virtuoso/InternalTable.js

@@ -23,12 +23,6 @@ var _utils2 = require("../table-component/hook/utils");
 var _operator = require("../table-component/features/operator");
 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 './style.scss'
-
-// import { convertColumns } from './hook/convert'
-
-// import { ColumnsGroup } from '../grid-component/ColumnsGroup'
-
 _dayjs.default.extend(_customParseFormat.default);
 const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
 const InternalTable = props => {
@@ -135,24 +129,6 @@ const InternalTable = props => {
     // setColumns(updateWidthsByOther(propsColumns, columns))
     setColumns(propsColumns);
   }, [propsColumns]);
-
-  // const convertData = React.useMemo(() => {
-
-  //   if (groupAble && groupSetting && groupSetting.client !== false) {
-
-  //     const bbc = addRowIdArray(dataSource)
-
-  //     const abc = groupArrayByColumns(bbc, groupColumns)
-
-  //     return abc
-  //   } else {
-
-  //     return addRowIdArray(dataSource)
-
-  //   }
-
-  // }, [dataSource, groupAble, groupColumns, groupSetting])
-
   const mergedColumns = _react.default.useMemo(() => {
     return (0, _useColumns.convertToTanStackColumns)({
       t,
@@ -160,8 +136,6 @@ const InternalTable = props => {
       format,
       editAble
     });
-
-    // return convertToTanStackColumns<RecordType>(columns)
   }, [t, columns, format, editAble]);
   const isDataTree = _react.default.useMemo(() => {
     return (0, _utils.isTreeArray)(tableData);
@@ -200,8 +174,12 @@ const InternalTable = props => {
 
   _react.default.useEffect(() => {
     const a = (0, _utils.getInvisibleColumns)(columns);
-    setColumnVisibility(a);
-  }, [columns]);
+    const bcd = (0, _utils.convertToObj)(groupColumns);
+    setColumnVisibility({
+      ...a,
+      ...bcd
+    });
+  }, [columns, groupColumns]);
   const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
     value: undefined
   });

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

@@ -15,8 +15,6 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _useColumns = require("../hook/useColumns");
 var _Command = _interopRequireDefault(require("../../table-component/components/command/Command"));
-// import Command from "../components/command/Command";
-
 const renderCellIndex = props => {
   const {
     cell,
@@ -68,7 +66,6 @@ const renderCommand = args => {
       onClick: () => {
         commandClick?.({
           id: item.id,
-          // rowId: getRowKey(record, index) as any,
           rowId: record.rowId,
           rowData: record,
           index: cell.row.index,
@@ -193,12 +190,6 @@ const TableBodyCell = props => {
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
   const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
-
-  // const firstVisibleNormalColumn = table.getVisibleLeafColumns().filter(col => col.id !== 'selection' && col.id !== '#')[0];
-  // const firstVisibleNormalColumn = table.getVisibleLeafColumns().filter(col => col.id !== 'selection' && col.id !== '#')[0];
-
-  // const parrents = cell.row.getParentRows();
-
   if (cell.column.id === "#") {
     return /*#__PURE__*/_react.default.createElement("td", {
       key: cell.id,

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

@@ -11,8 +11,6 @@ var _reactTable = require("@tanstack/react-table");
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _classnames = _interopRequireDefault(require("classnames"));
-// import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual"
-
 const TableBodyRow = ({
   tableId,
   table,
@@ -75,9 +73,6 @@ const TableBodyRow = ({
         field
       } = row.original ?? {};
       const cellGroup = allCells.find(it => it.column.id === field);
-
-      // const header = allColumns.find((it) => it.id === field)
-
       const headerContext = cellGroup && groupSetting?.showHeaderColumn !== false ? {
         table,
         column: cellGroup.column,

package/lib/table-virtuoso/style.js

@@ -8,6 +8,7 @@ exports.GridStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const color = "#000000de";
 const BgColor = "#ffffff";
+const rowSelectedBg = "#FEF2EF";
 const tableBorderColor = "#e0e0e0";
 const tableBorderColorDark = "#44485E";
 const BgColorDark = "#343e59";
@@ -15,4 +16,4 @@ const colorDark = "#e6e4f3e6";
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:#33335d !important;}&.disable{background-color:#272A2F;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;outline:1px solid ", ";border:0;&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;outline:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:#33335d !important;}&.disable{background-color:#272A2F;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border:0;outline:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/lib/table-virtuoso/style.scss

@@ -622,8 +622,9 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
       .#{$prefix}-grid-cell {
 
         background-color: inherit;
+        
 
-        border-inline-end: 1px solid $tableBorderColor;
+        // border-inline-end: 1px solid $tableBorderColor;
       }
     }
 

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

@@ -124,7 +124,6 @@ const Grid = props => {
   }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
   _react.default.useEffect(() => {
     if (sorterChange) {
-      console.log('12312312313123');
       const aa = table.getState().sorting;
       const rs = aa.map(it => {
         return {
@@ -144,7 +143,6 @@ const Grid = props => {
   _react.default.useEffect(() => {
     if (filterChange) {
       const operatorState = table.getState().operator;
-      console.log('operatorState', operatorState);
       const merged = columnFilters.map(filter => {
         const match = operatorState.find(op => op.id === filter.id);
         const col = table.getVisibleFlatColumns().find(it => it.id === filter.id)?.columnDef.meta;
@@ -156,8 +154,6 @@ const Grid = props => {
           operator: match ? match.operator : undefined
         };
       });
-      console.log('operatorState', operatorState);
-      console.log('merged', merged);
       if (onFilter) {
         onFilter?.((0, _utils.convertFilters)(merged));
       } else {

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

@@ -28,7 +28,7 @@ const TableContainer = props => {
     table,
     id,
     prefix,
-    // commandClick,
+    commandClick,
     editAble,
     rowKey,
     format,
@@ -114,41 +114,28 @@ const TableContainer = props => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  const triggerCommandClick = args => {
+    // const { id: idCommand, rowId, rowData, index } = args
 
-  // React.useEffect(() => {
-
-  //   if (!tableContainerRef.current) {
-  //     return
-  //   }
-
-  //   if (columnSizingInfo.isResizingColumn === false) {
-
-  //     const aa = updateColumnWidthsRecursive(propsColumns, columnSizing)
-
-  //     setColumns(aa)
-
-  //   }
-
-  // }, [columnSizingInfo])
-
-  // const triggerCommandClick = (args: Omit<CommandClick<RecordType>, 'rows'>) => {
-
-  //   // const { id: idCommand, rowId, rowData, index } = args
-
-  //   // const tmpData = [...dataSource]
-
-  //   if (commandClick) {
-  //     commandClick({
-  //       ...args,
-  //       rows: originData
-  //     })
-  //   }
-
-  // }
+    // const tmpData = [...dataSource]
 
+    if (commandClick) {
+      commandClick({
+        ...args,
+        rows: originData
+      });
+    }
+  };
   const handleOnGroup = value => {
     triggerGroupColumns?.(value);
   };
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = (0, _utils.findAllChildrenKeys2)(dataSource, rowKey, 'children');
+    setExpanded((0, _utils.convertToObjTrue)(allKeys));
+  };
   const groupToolbar = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       style: {
@@ -166,7 +153,15 @@ const TableContainer = props => {
       columns: propsColumns ? (0, _utils2.flatColumns2)(propsColumns) : [],
       columnsGrouped: groupColumns,
       onSubmit: handleOnGroup
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _utils.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
@@ -242,7 +237,6 @@ const TableContainer = props => {
       setExpanded,
       dataSource,
       originData,
-      // triggerFilter,
       wrapSettings,
       recordDoubleClick,
       selectionSettings,
@@ -253,8 +247,6 @@ const TableContainer = props => {
       setFilterChange,
       windowSize,
       isDataTree,
-      // focusedCell,
-      // setFocusedCell,
       rowClassName,
       onRowStyles,
       onRowFooterStyles,
@@ -262,12 +254,6 @@ const TableContainer = props => {
       table,
       pagination,
       groupSetting
-      // visible,
-      // setVisible,
-      // selectedKeys,
-      //  setSelectedKeys,
-      //  currentFilter, 
-      //  setCurrentFilter
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     tableContainerRef: tableContainerRef,
@@ -277,7 +263,8 @@ const TableContainer = props => {
     minHeight: minHeight,
     dataSource: dataSource,
     table: table,
-    columns: columns
+    columns: columns,
+    commandClick: triggerCommandClick
   })), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default

package/lib/table-virtuoso/table/TableWrapper.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { CommandClick } from '../../table-component/type';
 type Props<T> = {
     tableContainerRef: React.RefObject<HTMLDivElement>;
     table: Table<T>;
@@ -11,6 +12,7 @@ type Props<T> = {
     dataSource: T[];
     summary?: boolean;
     loading?: boolean;
+    commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
     editAble?: boolean;
     showEmptyText?: boolean;
     contextMenuClick?: any;

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

@@ -29,7 +29,8 @@ const TableWrapper = props => {
     table,
     // columns,
     height,
-    id
+    id,
+    commandClick
   } = props;
   const {
     prefix
@@ -89,7 +90,8 @@ const TableWrapper = props => {
         return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({
           tableId: id,
           row: row,
-          table: table
+          table: table,
+          commandClick: commandClick
         }, props));
       }
     }

package/package.json

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

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

@@ -1,14 +0,0 @@
-import React from "react";
-import type { IFormat } from "./type";
-type Props = {
-    columns: any[];
-    dataSourceFilter?: any[];
-    onFilter?: (query: any, col?: any[]) => void;
-    mode?: 'sidebar' | 'dropdown';
-    defaultFilter?: any[];
-    leftFilterWidth?: number;
-    format?: IFormat;
-    t?: any;
-};
-declare const AdvanceFilter: (props: Props) => React.JSX.Element;
-export default AdvanceFilter;