es-grid-template 1.8.28 → 1.8.30

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

@@ -17,7 +17,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import React from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
-import { convertFilters, convertToObjTrue, filterDataByColumns, getAllRowKey, isObjEqual } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 const Grid = props => {
   const {
@@ -42,8 +42,8 @@ const Grid = props => {
     setMergedFilterKeys,
     onSorter,
     onFilter,
-    allowFilter,
-    allowSorter,
+    allowFiltering,
+    allowSortering,
     groupColumns,
     // height= 700,
     height,
@@ -52,6 +52,7 @@ const Grid = props => {
     triggerChangeColumns,
     infiniteScroll,
     mergedSelectedKeys,
+    allowResizing,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -65,6 +66,8 @@ const Grid = props => {
 
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
   const [rowSelection, setRowSelection] = React.useState(convertToObjTrue(mergedSelectedKeys));
+  // const [rowsSelected, setRowsSelected] = React.useState<RecordType[]>([])
+
   const [grouping, setGrouping] = React.useState([]);
   const [columnSizing, setColumnSizing] = React.useState({});
   const [columnSizingInfo, setColumnSizingInfo] = React.useState({});
@@ -78,7 +81,8 @@ const Grid = props => {
   const [isSelectionChange, setIsSelectionChange] = React.useState({
     isChange: false,
     type: '',
-    rowData: {}
+    rowData: {},
+    rowsData: []
   });
   const [sorterChange, setSorterChange] = React.useState(false);
   const [filterChange, setFilterChange] = React.useState(false);
@@ -111,15 +115,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,
@@ -128,13 +132,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(),
@@ -175,41 +179,41 @@ const Grid = props => {
   // }, [columnSizingInfo])
 
   React.useEffect(() => {
-    // if (!manualUpdate) {
-
-    const isEqual = isObjEqual(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 = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
-      // if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isEqual) {
-      setRowSelection(convertToObjTrue(mergedSelectedKeys));
+      // setIsSelectionChange((prev) => ({
+      //   ...prev,
+      //   isChange: false
+      // }))
+      // setRowSelection(convertToObjTrue(mergedSelectedKeys))
     }
   }, [mergedSelectedKeys]);
   React.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 = 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.useEffect(() => {
@@ -291,6 +295,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
+    isSelectionChange: isSelectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,

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

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

package/es/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/es/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/lib/grid-component/hooks/constant.js

@@ -220,16 +220,16 @@ const optionFontSize = exports.optionFontSize = [{
   label: '48'
 }];
 
-/**
- * Sort order for BaseTable
+/**
+ * Sort order for BaseTable
  */
 const SortOrder = {
-  /**
-   * Sort data in ascending order
+  /**
+   * Sort data in ascending order
    */
   ascend: 'Ascending',
-  /**
-   * Sort data in descending order
+  /**
+   * Sort data in descending order
    */
   descend: 'Descending'
 };

package/lib/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;