es-grid-template 1.8.75 → 1.8.77

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

@@ -5,6 +5,7 @@ import type { ReactElement, ReactNode } from 'react';
 import type { ColorPickerProps } from 'antd';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { IOperator } from '../grid-component/hooks';
+import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
         rowSpan?: number;
@@ -28,8 +29,54 @@ export interface DensityOptions {
     onOperatorChange?: OnChangeFn<OpetorState>;
 }
 export type Key = React.Key;
-export type PaginationConfig = TablePaginationConfig & {
+export type GridTableLocale = TableLocale & {
+    ok_btn?: string;
+    cancel_btn?: string;
+    add_rows?: string;
+    add_rows_before?: string;
+    add_rows_after?: string;
+    add_1?: string;
+    add_10?: string;
+    add_50?: string;
+    add_100?: string;
+    add_children?: string;
+    delete_content?: string;
+    delete_rows?: string;
+    custom?: string;
+    filterTitle?: string;
+    filterConfirm?: React.ReactNode;
+    filterReset?: React.ReactNode;
+    filterEmptyText?: React.ReactNode;
+    filterCheckall?: React.ReactNode;
+    filterSearchPlaceholder?: string;
+    emptyText?: React.ReactNode | (() => React.ReactNode);
+    selectAll?: React.ReactNode;
+    selectNone?: React.ReactNode;
+    selectInvert?: React.ReactNode;
+    selectionAll?: React.ReactNode;
+    sortTitle?: string;
+    expand?: string;
+    collapse?: string;
+    triggerDesc?: string;
+    triggerAsc?: string;
+    cancelSort?: string;
+    fullScreen?: string;
+    minimized?: string;
+    setting?: string;
+    groupData?: string;
+    textPlaceholder?: string;
+    selectPlaceholder?: string;
+};
+export type PagingLocale = PaginationLocale & {
+    items?: string;
+};
+export type Locale = {
+    table?: GridTableLocale;
+    pager?: PagingLocale;
+};
+export type PaginationConfig = Omit<TablePaginationConfig, 'locale'> & {
     currentPage?: number;
+    locale?: PagingLocale;
 };
 export type AnyObject = Record<PropertyKey, any>;
 export type IFormat = {
@@ -162,37 +209,6 @@ export type ColumnTable<RecordType = AnyObject> = {
     sumGroup?: boolean;
     onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
 };
-export type Locale = TableLocale & {
-    ok_btn?: string;
-    cancel_btn?: string;
-    add_rows?: string;
-    add_rows_before?: string;
-    add_rows_after?: string;
-    add_1?: string;
-    add_10?: string;
-    add_50?: string;
-    add_100?: string;
-    add_children?: string;
-    delete_content?: string;
-    delete_rows?: string;
-    custom?: string;
-    filterTitle: string;
-    filterConfirm: string;
-    filterEmptyText: string;
-    filterCheckall: string;
-    filterSearchPlaceholder: string;
-    emptyText: string;
-    selectAll: string;
-    selectInvert: string;
-    selectNone: string;
-    selectionAll: string;
-    sortTitle: string;
-    expand: string;
-    collapse: string;
-    triggerDesc: string;
-    triggerAsc: string;
-    cancelSort: string;
-};
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
     id?: string;
@@ -221,7 +237,9 @@ export type TableProps<RecordType = AnyObject> = {
     height?: number;
     minHeight?: number;
     format?: IFormat;
+    /** useTranslation 'react-i18next' */
     t?: any;
+    /** Language code: exp: vi || en || ja || zh .... */
     lang?: string;
     contextMenuItems?: ContextMenuItem[];
     showDefaultContext?: boolean;
@@ -240,6 +258,13 @@ export type TableProps<RecordType = AnyObject> = {
         predicate: 'and' | 'or';
         value: any;
     }[]) => void;
+    dataSourceFilter?: SourceFilter[];
+    onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
+    /** mặc định so sánh không dấu + lowercase
+     * ignoreAccents !== false => không khai báo hoặc ignoreAccents = true => so sánh không dấu
+     * ignoreAccents = false => so sánh có dấu + uperrcase sensitive
+     * **/
+    ignoreAccents?: boolean;
     allowSortering?: boolean;
     onSorter?: (args: Sorter[]) => void;
     selectionSettings?: SelectionSettings;
@@ -249,8 +274,6 @@ export type TableProps<RecordType = AnyObject> = {
         rowData: RecordType;
         selected: RecordType | RecordType[];
     }) => void;
-    dataSourceFilter?: SourceFilter[];
-    onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
     loading?: boolean;
     allowResizing?: boolean;
     showToolbar?: boolean;
@@ -324,10 +347,6 @@ export type IEditSelectSettings = {
     fieldLabel?: string;
     /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
     searchTextAsValue?: boolean;
-    /**
-     * @deprecated Please use `allowSorter` instead.
-     * @since  1.7.25
-     */
     inputKey?: string;
     filterKey?: string[];
     selectMode?: SelectMode;

package/es/group-component/ColumnsGroup/ColumnsGroup.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 type IColumnsGroup = {
+    id: string;
+    tableLocal?: any;
     columns: any[];
     dataSource?: string[];
     onSubmit: (value: any) => void;

package/es/group-component/ColumnsGroup/ColumnsGroup.js

@@ -1,13 +1,6 @@
 import { Group } from "becoxy-icons";
 import React, { useRef, useState } from "react";
-// import {
-//   // groupArrayByColumns,
-//   // ungroupArray,
-//   // useOnClickOutside
-// } from "../../hooks"
-
-import { Button, Popover, Tooltip } from "antd";
-// import {SettingOutlined} from "@ant-design/icons";
+import { Button, Popover } from "antd";
 import { Select } from "rc-master-ui";
 import styled from "styled-components";
 import { customFilterOption } from "../../grid-component/hooks";
@@ -17,6 +10,8 @@ const BoxAction = styled.div.withConfig({
 })(["padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
 export const ColumnsGroup = props => {
   const {
+    id,
+    tableLocal,
     columns,
     columnsGrouped,
     onSubmit,
@@ -217,14 +212,13 @@ export const ColumnsGroup = props => {
     open: clicked,
     onOpenChange: handleClickChange,
     arrow: false
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    arrow: false,
-    title: 'Nhóm dữ liệu'
   }, /*#__PURE__*/React.createElement(Group, {
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": tableLocal?.GroupData || 'Group Data',
     fontSize: 18,
     color: "#555555",
     style: {
       cursor: 'pointer'
     }
-  }))));
+  })));
 };

package/es/group-component/InternalTable.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import 'react-resizable/css/styles.css';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import './style.scss';
+import '../table-component';
 import type { TableProps } from './../grid-component/type';
 declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/group-component/InternalTable.js

@@ -5,7 +5,7 @@ import 'react-resizable/css/styles.css';
 import dayjs from 'dayjs';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import "./style.scss";
+import "../table-component";
 import { faker } from '@faker-js/faker';
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import Grid from "./table/Grid";
@@ -14,6 +14,8 @@ import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { removeInvisibleColumns } from "../grid-component/hooks";
 import { groupArrayByColumns } from "../table-virtuoso/hook/utils";
+import { ConfigProvider, CustomProvider } from 'rc-master-ui';
+import { getLocale, getLocales } from "../locale/useLocale";
 dayjs.extend(customParseFormat);
 const InternalTable = props => {
   const {
@@ -39,6 +41,12 @@ const InternalTable = props => {
   const id = React.useMemo(() => {
     return faker.string.alpha(20);
   }, []);
+  const language = React.useMemo(() => {
+    return getLocale(lang);
+  }, [lang]);
+  const languages = React.useMemo(() => {
+    return getLocales(lang);
+  }, [lang]);
   const {
     defaultExpandedRowKeys,
     defaultExpandAllRows
@@ -175,7 +183,11 @@ const InternalTable = props => {
       });
     }
   };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: language
+  }, /*#__PURE__*/React.createElement(CustomProvider, {
+    locale: languages
+  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     t: t,
     id: id,
     prefix: prefix
@@ -219,6 +231,6 @@ const InternalTable = props => {
     setColumns: setColumns,
     columnVisibility: columnVisibility,
     setColumnVisibility: setColumnVisibility
-  })));
+  })))));
 };
 export default InternalTable;

package/es/group-component/TableContainer.js

@@ -5,13 +5,15 @@ import { TableContext } from "./useContext";
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Collapse2, Expand2, Maximize, Minimize } from 'becoxy-icons';
-import { ColumnsChoose } from "./ColumnsChoose";
+// import { ColumnsChoose } from './ColumnsChoose'
 import { numericFormatter } from 'react-numeric-component';
 import TableWrapper from "./table/TableWrapper";
 import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { convertToObjTrue, findAllChildrenKeys2, flatColumns2, isObjEmpty } from "../table-component/hook/utils";
 import { ColumnsGroup } from "./ColumnsGroup";
+import { useLocale } from 'rc-master-ui/es/locale';
+import { ColumnsChoose } from "../table-component/ColumnsChoose";
 const TableContainer = props => {
   const {
     t,
@@ -75,6 +77,8 @@ const TableContainer = props => {
     groupSetting,
     triggerGroupColumns
   } = props;
+  const [paginationLocal] = useLocale('Pagination');
+  const [tableLocal] = useLocale('Table');
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -198,26 +202,31 @@ const TableContainer = props => {
       style: {
         display: 'flex',
         gap: '10px',
-        marginRight: 10
+        marginRight: 10,
+        outline: 'none'
       }
     }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
-      t: t
-      // defaultGroupColumns={['name']}
-      ,
-      unClearableLevel: groupSetting?.unClearableLevel
-      // unClearableLevel={2}
-      ,
+      t: t,
+      id: id,
+      tableLocal: tableLocal,
+      unClearableLevel: groupSetting?.unClearableLevel,
       columns: propsColumns ? flatColumns2(propsColumns) : [],
       columnsGrouped: groupColumns,
       onSubmit: handleOnGroup
     }), /*#__PURE__*/React.createElement(React.Fragment, null, !isObjEmpty(expanded) ? /*#__PURE__*/React.createElement(Collapse2, {
+      "data-tooltip-id": `${id}-tooltip-content`,
+      "data-tooltip-content": tableLocal?.collapseAll || 'Collapse all',
       fontSize: 16,
       color: '#555555',
-      onClick: handleCollapseAllGroup
+      onClick: handleCollapseAllGroup,
+      className: "toolbar-icon"
     }) : /*#__PURE__*/React.createElement(Expand2, {
+      "data-tooltip-id": `${id}-tooltip-content`,
+      "data-tooltip-content": tableLocal?.expandAll || 'Expand all',
       fontSize: 16,
       color: '#555555',
-      onClick: handleExpandAllGroup
+      onClick: handleExpandAllGroup,
+      className: "toolbar-icon"
     })));
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -266,15 +275,19 @@ const TableContainer = props => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+    "data-tooltip-content": tableLocal?.Minimized || 'Minimized',
+    className: "toolbar-icon"
   }) : /*#__PURE__*/React.createElement(Maximize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+    "data-tooltip-content": tableLocal?.fullScreen || 'Full screen',
+    className: "toolbar-icon"
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    id: id,
+    tableLocal: tableLocal,
     columnHidden: columnHidden,
     columns: columns,
     originColumns: propsColumns,
@@ -342,14 +355,10 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   })), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
-  }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
-  // style={{padding: '0.75rem 1rem'}}
-  , _extends({
-    pageSizeOptions: [20, 50, 100, 1000, 10000]
-  }, pagination, {
+  }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+    pageSizeOptions: [20, 50, 100, 1000, 10000],
     rootClassName: 'pagination-template',
     showSizeChanger: true,
-    responsive: true,
     size: 'small',
     total: pagination.total,
     pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
@@ -359,7 +368,8 @@ const TableContainer = props => {
       thousandSeparator: '.'
     })} / ${numericFormatter((totalItems ?? 0).toString(), {
       thousandSeparator: '.'
-    })} items`,
+    })} ${pagination?.locale?.items || paginationLocal?.items || ''}`
+  }, pagination, {
     onChange: (page, pageSize1) => {
       if (pagination.onChange) {
         pagination.onChange(page, pageSize1);
@@ -369,7 +379,8 @@ const TableContainer = props => {
         table.setPageIndex(page - 1);
         table.setPageSize(pageSize1);
       }
-    }
+    },
+    responsive: true
   }))));
 };
 export default TableContainer;

package/es/group-component/TableContainerEdit.js

@@ -14,13 +14,15 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Toolbar } from "rc-master-ui";
 import classNames from "classnames";
 import { Collapse2, Expand2, Maximize, Minimize } from "becoxy-icons";
-import { ColumnsChoose } from "./ColumnsChoose";
+// import { ColumnsChoose } from "./ColumnsChoose";
 import TableWrapper from "./table/TableWrapper";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { convertToObjTrue, findAllChildrenKeys2, flatColumns2, isObjEmpty } from "../table-component/hook/utils";
 import { ColumnsGroup } from "./ColumnsGroup";
 import { unGroupData } from "../table-virtuoso/hook/utils";
+import { useLocale } from "rc-master-ui/es/locale";
+import { ColumnsChoose } from "../table-component/ColumnsChoose";
 const MySwal = withReactContent(Swal);
 const {
   Paragraph,
@@ -133,6 +135,8 @@ const TableContainerEdit = props => {
     dataSourceFilter,
     triggerGroupColumns
   } = props;
+  const [paginationLocal] = useLocale('Pagination');
+  const [tableLocal] = useLocale('Table');
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
   const topToolbarRef = React.useRef(null);
@@ -1849,23 +1853,27 @@ const TableContainerEdit = props => {
         marginRight: 10
       }
     }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
-      t: t
-      // defaultGroupColumns={['name']}
-      ,
-      unClearableLevel: groupSetting?.unClearableLevel
-      // unClearableLevel={2}
-      ,
+      id: id,
+      tableLocal: tableLocal,
+      t: t,
+      unClearableLevel: groupSetting?.unClearableLevel,
       columns: propsColumns ? flatColumns2(propsColumns) : [],
       columnsGrouped: groupColumns,
       onSubmit: handleOnGroup
     }), /*#__PURE__*/React.createElement(React.Fragment, null, !isObjEmpty(expanded) ? /*#__PURE__*/React.createElement(Collapse2, {
+      "data-tooltip-id": `${id}-tooltip-content`,
+      "data-tooltip-content": tableLocal?.collapseAll || 'Collapse all',
       fontSize: 16,
       color: '#555555',
-      onClick: handleCollapseAllGroup
+      onClick: handleCollapseAllGroup,
+      className: "toolbar-icon"
     }) : /*#__PURE__*/React.createElement(Expand2, {
+      "data-tooltip-id": `${id}-tooltip-content`,
+      "data-tooltip-content": tableLocal?.expandAll || 'Expand all',
       fontSize: 16,
       color: '#555555',
-      onClick: handleExpandAllGroup
+      onClick: handleExpandAllGroup,
+      className: "toolbar-icon"
     })));
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -1914,15 +1922,17 @@ const TableContainerEdit = props => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+    "data-tooltip-content": tableLocal?.Minimized || 'Minimized'
   }) : /*#__PURE__*/React.createElement(Maximize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+    "data-tooltip-content": tableLocal?.fullScreen || 'Full screen'
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    id: id,
+    tableLocal: tableLocal,
     columns: columns,
     originColumns: propsColumns,
     t: t,
@@ -2040,29 +2050,53 @@ const TableContainerEdit = props => {
     onClick: ({}) => {
       setEditingKey('');
     }
-  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
+  })), pagination && !infiniteScroll &&
+  /*#__PURE__*/
+  // <Pagination
+  //   {...pagination}
+  //   rootClassName={'pagination-template'}
+  //   showSizeChanger={true}
+  //   responsive={true}
+  //   size={'small'}
+  //   total={pagination.total}
+  //   pageSize={pagination.onChange ? pagination?.pageSize : table.getState().pagination.pageSize}
+  //   pageSizeOptions={[20, 50, 100, 1000, 10000]}
+  //   onChange={(page, pageSize) => {
+  //     if (pagination.onChange) {
+  //       pagination.onChange(page, pageSize)
+  //     } else {
+  //       table.setPageIndex(page - 1)
+  //       table.setPageSize(pageSize)
+  //     }
+  //   }}
+  //   showTotal={(total: any, range: any) => `${numericFormatter((range[0] ?? 0).toString(), { thousandSeparator: '.' })}-${numericFormatter((range[1] ?? 0).toString(), { thousandSeparator: '.' })} / ${numericFormatter((total ?? 0).toString(), { thousandSeparator: '.' })} items`}
+  // />
+  React.createElement(Pagination, _extends({
+    pageSizeOptions: [20, 50, 100, 1000, 10000],
     rootClassName: 'pagination-template',
     showSizeChanger: true,
-    responsive: true,
     size: 'small',
     total: pagination.total,
-    pageSize: pagination.onChange ? pagination?.pageSize : table.getState().pagination.pageSize,
-    pageSizeOptions: [20, 50, 100, 1000, 10000],
-    onChange: (page, pageSize) => {
+    pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
+    showTotal: (totalItems, range) => `${numericFormatter((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${numericFormatter((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${numericFormatter((totalItems ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} ${pagination?.locale?.items || paginationLocal?.items || ''}`
+  }, pagination, {
+    onChange: (page, pageSize1) => {
       if (pagination.onChange) {
-        pagination.onChange(page, pageSize);
+        pagination.onChange(page, pageSize1);
+        table.setPageIndex(page - 1); // có thể bỏ dòng này
+        table.setPageSize(pageSize1); // có thể bỏ dòng này
       } else {
         table.setPageIndex(page - 1);
-        table.setPageSize(pageSize);
+        table.setPageSize(pageSize1);
       }
     },
-    showTotal: (total, range) => `${numericFormatter((range[0] ?? 0).toString(), {
-      thousandSeparator: '.'
-    })}-${numericFormatter((range[1] ?? 0).toString(), {
-      thousandSeparator: '.'
-    })} / ${numericFormatter((total ?? 0).toString(), {
-      thousandSeparator: '.'
-    })} items`
+    responsive: true
   }))));
 };
 export default TableContainerEdit;