es-grid-template 1.8.60 → 1.8.62

package/es/grid-component/InternalTable.js

@@ -13,7 +13,7 @@ import 'dayjs/locale/vi';
 // import GridEdit from "./table/GridEdit"
 // import InfiniteTable from "./table/InfiniteTable";
 
-import Grid from "./table/Grid";
+// import Grid from "./table/Grid"
 import en from "rc-master-ui/es/date-picker/locale/en_US";
 import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
 import enDr from "rc-master-ui/es/locales/en_US";
@@ -33,7 +33,7 @@ import classNames from "classnames";
 import HeaderContent from "./hooks/content/HeaderContent";
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
 import { Select } from "rc-master-ui";
-import { Button, Space } from "antd";
+import { Button, Space, Modal } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
@@ -42,7 +42,6 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-import Modal from 'antd/es/modal/Modal';
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -61,9 +60,7 @@ const dragActiveStyle = (dragState, id) => {
       backgroundColor: '#c0c0c0',
       opacity: 0.3
     };
-  }
-  // dragover dashed style
-  else if (over && id === over && active !== over) {
+  } else if (over && id === over && active !== over) {
     style = direction === 'right' ? {
       borderRight: '1px dashed gray'
     } : {
@@ -88,6 +85,7 @@ const ResizableTitle = props => {
 
   const style = {
     ...props.style,
+    borderBottom: '1px solid #e0e0e0',
     // cursor: 'move',
     // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
     ...dragActiveStyle(dragState, props.id)
@@ -116,15 +114,12 @@ const ResizableTitle = props => {
     })))
   );
 };
-const TableBodyCell = props => {
-  const dragState = useContext(DragIndexContext);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    style: {
-      ...props.style,
-      ...dragActiveStyle(dragState, props.id)
-    }
-  }));
-};
+
+// const TableBodyCell = (props: any) => {
+//   const dragState = useContext<DragIndexState>(DragIndexContext)
+//   return <div {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />
+// }
+
 const SortableHeaderCell = ({
   children,
   columnKey
@@ -161,12 +156,11 @@ const InternalTable = props => {
     lang,
     locale,
     dataSource,
-    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     // onFilterClick,
     // onFilter,
     editAble,
-    rowKey: propRowKey,
+    // rowKey: propRowKey,
     format,
     onDataChange,
     sortMultiple,
@@ -174,7 +168,7 @@ const InternalTable = props => {
     // @ts-ignore
     onCellPaste,
     clickHeaderToSort = true,
-    components,
+    // components,
     onChooseColumns,
     groupAble,
     groupSetting,
@@ -184,14 +178,17 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
-    infiniteScroll,
+    // infiniteScroll,
     wrapSettings,
     onFilter,
     onSorter,
-    defaultSorter,
+    // defaultSorter,
     toolbarItems,
+    allowSortering,
+    allowFiltering,
     ...rest
   } = props;
+  const theadRef = React.useRef(null);
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -266,15 +263,14 @@ const InternalTable = props => {
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
-      const header = table?.querySelector(`.ui-rc-table-header`);
       const paginationE = table?.querySelector(`.ui-rc-pagination`);
       const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
       const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble]);
+  }, [id, propsHeight, summary, theadRef, columns]);
   React.useEffect(() => {
     // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = windowSize.innerHeight - 60;
@@ -497,17 +493,17 @@ const InternalTable = props => {
       }
       return {
         ...transformedColumn,
-        ...(transformedColumn.allowFiltering === false ? {} : {
+        ...(transformedColumn.allowFiltering === false || allowFiltering === false ? {} : {
           ...getColumnSearchProps(column)
         }),
-        // sorter: (column.sorter === false ? undefined : {
-        //   // @ts-ignore
-        //   compare: (a: any, b: any) => onSorter ? a : a[column.field] - b[column.field],
-        //   multiple: sortMultiple ? colIndex : undefined
-
-        // }),
+        sorter: column.sorter === false || allowSortering === false ? undefined : {
+          // @ts-ignore
+          compare: (a, b) => onSorter ? a : a[column.field] - b[column.field],
+          multiple: sortMultiple ? colIndex : undefined
+        },
         // @ts-ignore
-        sorter: (a, b) => a[column.field] - b[column.field],
+        // sorter: (a, b) => a[column.field] - b[column.field],
+
         sortIcon: args => {
           const {
             sortOrder
@@ -560,7 +556,7 @@ const InternalTable = props => {
           }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
           return {
             id: `${column.field}`,
-            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 3 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
             // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
             ...transformedColumn?.onCell?.(data, index),
             className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
@@ -931,6 +927,14 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
+  const CustomThead = theadProps => {
+    const {
+      children
+    } = theadProps;
+    return /*#__PURE__*/React.createElement("thead", {
+      ref: theadRef
+    }, children);
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
@@ -978,13 +982,14 @@ const InternalTable = props => {
     } // scroll height auto, không quá  600
     ,
     height: propsHeight,
-    scrollHeight: scrollHeight
-    // components={{
-    //   header: { cell: ResizableTitle },
-    //   body: { cell: TableBodyCell }
-    // }}
-    ,
-
+    scrollHeight: scrollHeight,
+    toolbarItems: toolbarItems,
+    components: {
+      header: {
+        cell: ResizableTitle,
+        wrapper: CustomThead
+      }
+    },
     onFilter: val => {
       handleOnFilter(val);
     },
@@ -1045,7 +1050,7 @@ const InternalTable = props => {
     strategy: horizontalListSortingStrategy
   }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Group, _extends({}, rest, {
     t: t,
     id: faker.string.alpha(20),
     locale: locale,
@@ -1087,10 +1092,8 @@ const InternalTable = props => {
     components: {
       header: {
         cell: ResizableTitle
-      },
-      body: {
-        cell: TableBodyCell
       }
+      // body: { cell: TableBodyCell }
     }
     // setTooltipContent={setTooltipContent}
     ,

package/es/grid-component/hooks/useColumns.d.ts

@@ -15,7 +15,5 @@ interface UseColumnsConfig<RecordType> {
     rowKey?: any;
     onMouseHover?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [
-    any
-];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
 export default useColumns;

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

@@ -155,6 +155,7 @@ export function convertToTanStackColumns({
       enableColumnFilter: allowFiltering !== false
     };
     if (children) {
+      newCol.size = undefined;
       // @ts-ignore
       newCol.columns = convertToTanStackColumns({
         columns: children,

package/lib/grid-component/InternalTable.js

@@ -14,7 +14,6 @@ var _server = _interopRequireDefault(require("react-dom/server"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
-var _Grid = _interopRequireDefault(require("./table/Grid"));
 var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
 var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
 var _en_US2 = _interopRequireDefault(require("rc-master-ui/es/locales/en_US"));
@@ -37,12 +36,13 @@ var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-var _Modal = _interopRequireDefault(require("antd/es/modal/Modal"));
 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 GridEdit from "./table/GridEdit"
 // import InfiniteTable from "./table/InfiniteTable";
 
+// import Grid from "./table/Grid"
+
 // import useColumns from "./hooks/useColumns";
 
 // import 'rc-master-ui/es/date-range-picker/styles/index.less'
@@ -68,9 +68,7 @@ const dragActiveStyle = (dragState, id) => {
       backgroundColor: '#c0c0c0',
       opacity: 0.3
     };
-  }
-  // dragover dashed style
-  else if (over && id === over && active !== over) {
+  } else if (over && id === over && active !== over) {
     style = direction === 'right' ? {
       borderRight: '1px dashed gray'
     } : {
@@ -95,6 +93,7 @@ const ResizableTitle = props => {
 
   const style = {
     ...props.style,
+    borderBottom: '1px solid #e0e0e0',
     // cursor: 'move',
     // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
     ...dragActiveStyle(dragState, props.id)
@@ -123,15 +122,12 @@ const ResizableTitle = props => {
     })))
   );
 };
-const TableBodyCell = props => {
-  const dragState = (0, _react.useContext)(DragIndexContext);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, props, {
-    style: {
-      ...props.style,
-      ...dragActiveStyle(dragState, props.id)
-    }
-  }));
-};
+
+// const TableBodyCell = (props: any) => {
+//   const dragState = useContext<DragIndexState>(DragIndexContext)
+//   return <div {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />
+// }
+
 const SortableHeaderCell = ({
   children,
   columnKey
@@ -168,12 +164,11 @@ const InternalTable = props => {
     lang,
     locale,
     dataSource,
-    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     // onFilterClick,
     // onFilter,
     editAble,
-    rowKey: propRowKey,
+    // rowKey: propRowKey,
     format,
     onDataChange,
     sortMultiple,
@@ -181,7 +176,7 @@ const InternalTable = props => {
     // @ts-ignore
     onCellPaste,
     clickHeaderToSort = true,
-    components,
+    // components,
     onChooseColumns,
     groupAble,
     groupSetting,
@@ -191,14 +186,17 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
-    infiniteScroll,
+    // infiniteScroll,
     wrapSettings,
     onFilter,
     onSorter,
-    defaultSorter,
+    // defaultSorter,
     toolbarItems,
+    allowSortering,
+    allowFiltering,
     ...rest
   } = props;
+  const theadRef = _react.default.useRef(null);
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -273,15 +271,14 @@ const InternalTable = props => {
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
-      const header = table?.querySelector(`.ui-rc-table-header`);
       const paginationE = table?.querySelector(`.ui-rc-pagination`);
       const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
       const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble]);
+  }, [id, propsHeight, summary, theadRef, columns]);
   _react.default.useEffect(() => {
     // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = windowSize.innerHeight - 60;
@@ -504,17 +501,17 @@ const InternalTable = props => {
       }
       return {
         ...transformedColumn,
-        ...(transformedColumn.allowFiltering === false ? {} : {
+        ...(transformedColumn.allowFiltering === false || allowFiltering === false ? {} : {
           ...getColumnSearchProps(column)
         }),
-        // sorter: (column.sorter === false ? undefined : {
-        //   // @ts-ignore
-        //   compare: (a: any, b: any) => onSorter ? a : a[column.field] - b[column.field],
-        //   multiple: sortMultiple ? colIndex : undefined
-
-        // }),
+        sorter: column.sorter === false || allowSortering === false ? undefined : {
+          // @ts-ignore
+          compare: (a, b) => onSorter ? a : a[column.field] - b[column.field],
+          multiple: sortMultiple ? colIndex : undefined
+        },
         // @ts-ignore
-        sorter: (a, b) => a[column.field] - b[column.field],
+        // sorter: (a, b) => a[column.field] - b[column.field],
+
         sortIcon: args => {
           const {
             sortOrder
@@ -567,7 +564,7 @@ const InternalTable = props => {
           }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
           return {
             id: `${column.field}`,
-            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 3 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
             // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
             ...transformedColumn?.onCell?.(data, index),
             className: (0, _classnames.default)(transformedColumn?.onCell?.(data, index).className ?? '', {
@@ -938,6 +935,14 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
+  const CustomThead = theadProps => {
+    const {
+      children
+    } = theadProps;
+    return /*#__PURE__*/_react.default.createElement("thead", {
+      ref: theadRef
+    }, children);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],
@@ -985,13 +990,14 @@ const InternalTable = props => {
     } // scroll height auto, không quá  600
     ,
     height: propsHeight,
-    scrollHeight: scrollHeight
-    // components={{
-    //   header: { cell: ResizableTitle },
-    //   body: { cell: TableBodyCell }
-    // }}
-    ,
-
+    scrollHeight: scrollHeight,
+    toolbarItems: toolbarItems,
+    components: {
+      header: {
+        cell: ResizableTitle,
+        wrapper: CustomThead
+      }
+    },
     onFilter: val => {
       handleOnFilter(val);
     },
@@ -1013,7 +1019,7 @@ const InternalTable = props => {
       borderRadius: 6,
       fontWeight: 500
     }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_Modal.default, {
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
     centered: true,
@@ -1052,7 +1058,7 @@ const InternalTable = props => {
     strategy: _sortable.horizontalListSortingStrategy
   }, /*#__PURE__*/_react.default.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Group.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: _faker.faker.string.alpha(20),
     locale: locale,
@@ -1094,10 +1100,8 @@ const InternalTable = props => {
     components: {
       header: {
         cell: ResizableTitle
-      },
-      body: {
-        cell: TableBodyCell
       }
+      // body: { cell: TableBodyCell }
     }
     // setTooltipContent={setTooltipContent}
     ,

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

@@ -166,6 +166,7 @@ function convertToTanStackColumns({
       enableColumnFilter: allowFiltering !== false
     };
     if (children) {
+      newCol.size = undefined;
       // @ts-ignore
       newCol.columns = convertToTanStackColumns({
         columns: children,

package/package.json

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