es-grid-template 1.8.28 → 1.8.30

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

@@ -44,8 +44,8 @@ const Grid = props => {
     setMergedFilterKeys,
     onSorter,
     onFilter,
-    allowFilter,
-    allowSorter,
+    allowFiltering,
+    allowSortering,
     groupColumns,
     // height= 700,
     height,
@@ -54,6 +54,7 @@ const Grid = props => {
     triggerChangeColumns,
     infiniteScroll,
     mergedSelectedKeys,
+    allowResizing,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -67,6 +68,8 @@ const Grid = props => {
 
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
   const [rowSelection, setRowSelection] = _react.default.useState((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+  // const [rowsSelected, setRowsSelected] = React.useState<RecordType[]>([])
+
   const [grouping, setGrouping] = _react.default.useState([]);
   const [columnSizing, setColumnSizing] = _react.default.useState({});
   const [columnSizingInfo, setColumnSizingInfo] = _react.default.useState({});
@@ -80,7 +83,8 @@ const Grid = props => {
   const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
     isChange: false,
     type: '',
-    rowData: {}
+    rowData: {},
+    rowsData: []
   });
   const [sorterChange, setSorterChange] = _react.default.useState(false);
   const [filterChange, setFilterChange] = _react.default.useState(false);
@@ -113,15 +117,15 @@ const Grid = props => {
     // enableRowSelection: true,
     enableRowSelection: row => {
       if (selectionSettings?.getCheckboxProps) {
-        return !selectionSettings?.getCheckboxProps(row.original).disabled;
+        return !selectionSettings?.getCheckboxProps(row.original)?.disabled;
       }
       return true;
     },
     onRowSelectionChange: setRowSelection,
-    // get
     // RowSelection
 
     // ColumnSizing
+    enableColumnResizing: allowResizing !== false,
     columnResizeMode,
     columnResizeDirection,
     onColumnSizingChange: setColumnSizing,
@@ -130,13 +134,13 @@ const Grid = props => {
 
     // ColumnSorting
     // getSortedRowModel: getSortedRowModel(),
-    enableSorting: allowSorter !== false,
     onSortingChange: setSorting,
     enableMultiSort: sortMultiple,
     isMultiSortEvent: () => sortMultiple ? true : false,
+    enableSorting: allowSortering !== false,
     // ColumnSorting
 
-    enableFilters: allowFilter !== false,
+    enableFilters: allowFiltering !== false,
     onColumnFiltersChange: setColumnFilters,
     onColumnOperatorChange: setOperator,
     // getFilteredRowModel: getFilteredRowModel(),
@@ -177,41 +181,41 @@ const Grid = props => {
   // }, [columnSizingInfo])
 
   _react.default.useEffect(() => {
-    // if (!manualUpdate) {
-
-    const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
-
-    // console.log('isEqual', isEqual)
     // if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isSelectionChange.isChange) {
-    // // if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isEqual) {
     //   setRowSelection(convertToObjTrue(mergedSelectedKeys))
 
     // }
 
+    const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
-      // if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isEqual) {
-      setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+      // setIsSelectionChange((prev) => ({
+      //   ...prev,
+      //   isChange: false
+      // }))
+      // setRowSelection(convertToObjTrue(mergedSelectedKeys))
     }
   }, [mergedSelectedKeys]);
   _react.default.useEffect(() => {
     if (isSelectionChange.isChange) {
       // setManualUpdate(true)
       const aa = table.getState().rowSelection;
-      const dataTable = table.getRowModel().flatRows;
+
+      // const dataTable = table.getRowModel().flatRows
+
       const ids = Object.keys(aa);
-      const ssss = dataTable.filter(it => ids.includes(it.id));
+
+      // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
+      const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
+      // const ssss = (isSelectionChange.rowsData ?? []) as any[] // lấy rowsData của trang hiện tại
+
       const rs = ssss.map(it => it.original);
+      // const rs = allRows.map(it => it.original)
+
       rowSelected?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
         selected: rs
       });
-
-      // setIsSelectionChange((prev) => ({
-      //   ...prev,
-      //   isChange: false
-
-      // }))
     }
   }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
   _react.default.useEffect(() => {
@@ -293,6 +297,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
+    isSelectionChange: isSelectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,

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

@@ -240,7 +240,8 @@ const TableWrapper = props => {
     style: {
       zIndex: 1999,
       maxWidth: 450
-    }
+    },
+    delayShow: 100
   }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: `${id}-tooltip-error`,
     style: {

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

@@ -92,11 +92,11 @@ export type ColumnTable<RecordType = AnyObject> = {
     format?: IFormat | ((rowData: any) => IFormat);
     allowFiltering?: boolean;
     /**
-      * @deprecated Please use `allowSorter` instead.
+      * @deprecated Please use `allowSortering` instead.
       * @since  1.7.25
       */
     sorter?: boolean;
-    allowSorter?: boolean;
+    allowSortering?: boolean;
     operator?: FilterOperator;
     hideOperator?: boolean;
     placeholder?: string;
@@ -122,7 +122,10 @@ export type ColumnTable<RecordType = AnyObject> = {
     headerTextAlign?: ITextAlign;
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
-    tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    tooltipDescription?: string | ((args: {
+        value: any;
+        record: RecordType;
+    }) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
     children?: ColumnTable<RecordType>[];
@@ -212,7 +215,7 @@ export type TableProps<RecordType = AnyObject> = {
     toolbarItems?: ToolbarItem[];
     showColumnChoose?: boolean;
     showAdvanceFilter?: boolean;
-    allowFilter?: boolean;
+    allowFiltering?: boolean;
     onFilter?: (query: {
         field: string;
         key: string;
@@ -220,7 +223,7 @@ export type TableProps<RecordType = AnyObject> = {
         predicate: 'and' | 'or';
         value: any;
     }[]) => void;
-    allowSorter?: boolean;
+    allowSortering?: boolean;
     onSorter?: (args: Sorter[]) => void;
     selectionSettings?: SelectionSettings;
     rowSelection?: RowSelection<RecordType>;
@@ -239,6 +242,7 @@ export type TableProps<RecordType = AnyObject> = {
     summary?: boolean;
     showEmptyText?: boolean;
     commandSettings?: CommandSettings;
+    rowClassName?: string | RowClassName<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
@@ -472,6 +476,7 @@ export type SelectionSettings<T = AnyObject> = {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';
     checkboxOnly?: boolean;
+    checkStrictly?: boolean;
     columnWidth?: number;
     hideSelectAll?: boolean;
     selectedRowKeys?: Key[];

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

@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
-import type { ExpandedState } from '@tanstack/react-table';
+import type { ExpandedState, Table } from '@tanstack/react-table';
 export type IPositionCell = {
     rowId: string;
     colId: string;
@@ -20,10 +20,17 @@ export interface IContext<T> {
     expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
     setIsSelectionChange: Dispatch<SetStateAction<{
         isChange: boolean;
         type: string;
         rowData: T;
+        rowsData: T[];
     }>>;
     setSorterChange: Dispatch<SetStateAction<boolean>>;
     setFilterChange: Dispatch<SetStateAction<boolean>>;
@@ -68,6 +75,8 @@ export interface IContext<T> {
     isDataTree: boolean;
     handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
     pagination?: false | PaginationConfig;
+    rowClassName?: string | RowClassName<T>;
+    table?: Table<T>;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/package.json

@@ -1,116 +1,117 @@
-{
-  "name": "es-grid-template",
-  "version": "1.8.28",
-  "description": "es-grid-template",
-  "keywords": [
-    "react",
-    "react-component",
-    "grid",
-    "table"
-  ],
-  "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "files": [
-    "lib",
-    "es",
-    "assets/*.css",
-    "assets/*.scss"
-  ],
-  "scripts": {
-    "__compile": "father build && ",
-    "compile": "father build && sass assets/index.scss assets/index.css",
-    "clean": "rimraf lib es",
-    "__docs:build": "dumi build",
-    "__docs:deploy": "gh-pages -d dist",
-    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
-    "__now-build": "npm run docs:build",
-    "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile",
-    "___postpublish": "npm run docs:build",
-    "__postpublish": "npm run docs:build && npm run docs:deploy",
-    "start": "dumi dev",
-    "test": "vitest --watch false",
-    "coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "@ant-design/colors": "^8.0.0",
-    "@ant-design/icons": "^5.5.2",
-    "@babel/runtime": "^7.11.2",
-    "@core-rc/rc-select": "^0.1.3",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@faker-js/faker": "^9.5.0",
-    "@floating-ui/react": "^0.27.5",
-    "@hookform/resolvers": "5.0.1",
-    "@rc-component/color-picker": "^2.0.1",
-    "@rc-component/father-plugin": "^2.0.1",
-    "@rc-component/trigger": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.12",
-    "@types/react-resizable": "^3.0.8",
-    "@types/styled-components": "^5.1.34",
-    "@vitest/coverage-v8": "^2.0.5",
-    "antd": "5.24.1",
-    "antd-style": "^3.7.1",
-    "becoxy-icons": "^2.0.1",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.13",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "rc-checkbox": "^3.5.0",
-    "rc-dropdown": "^4.2.1",
-    "rc-field-form": "^2.6.0",
-    "rc-master-ui": "1.1.44",
-    "rc-select": "^14.16.3",
-    "rc-tooltip": "^6.3.0",
-    "rc-tree": "^5.10.1",
-    "rc-tree-select": "^5.24.5",
-    "react-full-screen": "^1.1.1",
-    "react-hook-form": "7.54.2",
-    "react-hot-toast": "^2.5.2",
-    "react-numeric-component": "^1.0.7",
-    "react-resizable": "^3.0.5",
-    "react-tooltip": "^5.28.1",
-    "rimraf": "5.0.10",
-    "sass": "^1.81.0",
-    "styled-components": "^6.1.15",
-    "sweetalert2": "^11.4.14",
-    "sweetalert2-react-content": "^5.0.0",
-    "throttle-debounce": "^5.0.2",
-    "vitest": "^2.0.5",
-    "yup": "1.6.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/preset-env": "^7.26.9",
-    "@rc-component/np": "^1.0.3",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/warning": "^3.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^2.2.13",
-    "eslint": "^8.56.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "father": "^4.0.0",
-    "gh-pages": "^3.1.0",
-    "less": "^4.1.1",
-    "np": "^7.1.0",
-    "rc-test": "^7.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.0.5"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
-  "umi": {
-    "configFile": "config.ts"
-  }
-}
+{
+  "name": "es-grid-template",
+  "version": "1.8.30",
+  "description": "es-grid-template",
+  "keywords": [
+    "react",
+    "react-component",
+    "grid",
+    "table"
+  ],
+  "license": "MIT",
+  "main": "lib/index",
+  "module": "es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/*.css",
+    "assets/*.scss"
+  ],
+  "scripts": {
+    "__compile": "father build && ",
+    "compile": "father build && sass assets/index.scss assets/index.css",
+    "clean": "rimraf lib es",
+    "__docs:build": "dumi build",
+    "__docs:deploy": "gh-pages -d dist",
+    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
+    "__now-build": "npm run docs:build",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile",
+    "___postpublish": "npm run docs:build",
+    "__postpublish": "npm run docs:build && npm run docs:deploy",
+    "start": "dumi dev",
+    "test": "vitest --watch false",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ant-design/colors": "^8.0.0",
+    "@ant-design/icons": "^5.5.2",
+    "@babel/runtime": "^7.11.2",
+    "@core-rc/rc-select": "^0.1.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@faker-js/faker": "^9.5.0",
+    "@floating-ui/react": "^0.27.5",
+    "@hookform/resolvers": "5.0.1",
+    "@rc-component/color-picker": "^2.0.1",
+    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/util": "^1.0.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@types/react-resizable": "^3.0.8",
+    "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^2.0.5",
+    "antd": "5.24.1",
+    "antd-style": "^3.7.1",
+    "becoxy-icons": "^2.0.1",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "rc-checkbox": "^3.5.0",
+    "rc-dropdown": "^4.2.1",
+    "rc-field-form": "^2.6.0",
+    "rc-master-ui": "1.1.44",
+    "rc-select": "^14.16.3",
+    "rc-tooltip": "^6.3.0",
+    "rc-tree": "^5.10.1",
+    "rc-tree-select": "^5.24.5",
+    "react-full-screen": "^1.1.1",
+    "react-hook-form": "7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "react-numeric-component": "^1.0.7",
+    "react-resizable": "^3.0.5",
+    "react-tooltip": "^5.28.1",
+    "rimraf": "5.0.10",
+    "sass": "^1.81.0",
+    "styled-components": "^6.1.15",
+    "sweetalert2": "^11.4.14",
+    "sweetalert2-react-content": "^5.0.0",
+    "throttle-debounce": "^5.0.2",
+    "vitest": "^2.0.5",
+    "yup": "1.6.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-env": "^7.26.9",
+    "@rc-component/np": "^1.0.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/warning": "^3.0.0",
+    "cross-env": "^7.0.0",
+    "dumi": "^2.2.13",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "father": "^4.0.0",
+    "gh-pages": "^3.1.0",
+    "less": "^4.1.1",
+    "np": "^7.1.0",
+    "rc-test": "^7.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.0.5",
+    "usehooks-ts": "^3.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "umi": {
+    "configFile": "config.ts"
+  }
+}