es-grid-template 1.5.8 → 1.5.9

package/es/grid-component/EditableCell.js

@@ -13,7 +13,7 @@ getDatepickerFormat, getTemplate, isDisable, isEmpty, isNullOrUndefined, customW
 // import dayjs from "dayjs";
 // import {TreeSelect} from "antd";
 import classNames from "classnames";
-import { NumericFormat, numericFormatter } from "react-numeric-component";
+import { NumericFormat } from "react-numeric-component";
 import { TableContext } from "./useContext";
 import dayjs from "dayjs";
 import moment from "moment";
@@ -872,7 +872,7 @@ const EditableCell = props => {
         // let floatValue = value
 
         const numericFormatProps = {
-          // value,
+          value,
           thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
           decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
           decimalScale: cellFormat?.decimalScale ?? undefined,
@@ -882,8 +882,8 @@ const EditableCell = props => {
           suffix: cellFormat?.suffix ?? undefined
         };
         return /*#__PURE__*/React.createElement(NumericFormat, _extends({
-          id: `col${indexCol}-record${indexRow}`,
-          value: value ? numericFormatter(value.toString(), numericFormatProps) : ''
+          id: `col${indexCol}-record${indexRow}`
+          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
           // value={value}
         }, numericFormatProps, {
           min: column.min,

package/es/grid-component/InternalTable.js

@@ -36,6 +36,7 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 // import {CSS} from "@dnd-kit/utilities";
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
+import InfiniteTable from "./table/InfiniteTable";
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -177,6 +178,7 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
+    infiniteScroll,
     ...rest
   } = props;
   const id = React.useMemo(() => {
@@ -807,7 +809,7 @@ const InternalTable = props => {
       triggerChangeData(newData);
     }
   };
-  const TableComponent = groupAble ? Group : editAble ? GridEdit : Grid;
+  const TableComponent = infiniteScroll ? InfiniteTable : groupAble ? Group : editAble ? GridEdit : Grid;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],

package/es/grid-component/hooks/columns/index.d.ts

@@ -4,6 +4,6 @@ import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
-export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
+export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, record: T, format?: IFormat) => any;
 export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
 export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat, dateRangeLocale?: any) => React.JSX.Element;

package/es/grid-component/hooks/columns/index.js

@@ -1,4 +1,4 @@
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getDateString, getFormat, getTypeFilter, isColor, isEmpty } from "../utils";
 import { numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
@@ -55,27 +55,29 @@ export const flatColumns2 = columns => {
     }];
   }, []);
 };
-export const getValueCell = (column, value, format) => {
+export const getValueCell = (column, value, record, format) => {
   switch (column?.type) {
     case 'number':
-      const thousandSeparator = format?.thousandSeparator;
-      const decimalSeparator = format?.decimalSeparator;
-      const dec = format?.decimalScale;
+      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+      const cellFormat = getFormat(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
 
-      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString()) : '0'
-      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? tmpval.toString() : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-        allowNegative: format?.allowNegative ?? true,
-        prefix: format?.prefix,
-        suffix: format?.suffix,
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
         decimalScale: dec,
-        fixedDecimalScale: format?.fixedDecimalScale ?? false
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
       };
       return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
     case 'date':
@@ -117,7 +119,7 @@ export const getValueCell = (column, value, format) => {
 };
 export const renderContent = (column, value, record, index, format) => {
   const cellValue = value instanceof Date ? getDateString(column, value) : value;
-  const content = getValueCell(column, cellValue, format);
+  const content = getValueCell(column, cellValue, record, format);
   return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template({
     value,
     index,
@@ -129,7 +131,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
   const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = convertFormat(getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY');
+  const dateRangeFormat = convertFormat(getDateRangeFormat(column?.type, cellFormat) ?? 'dd/MM/yyyy');
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {

package/es/grid-component/hooks/content/HeaderContent.js

@@ -16,7 +16,7 @@ const HeaderContent = props => {
     return columnGroupText ?? headerText;
   }, [columnGroupText, headerText]);
   const tooltip = React.useMemo(() => {
-    return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
+    return headerTooltip ?? t ? t?.(columnGroupText ?? headerText) : columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classnames('', {}),

package/es/grid-component/hooks/utils.js

@@ -175,7 +175,7 @@ export const getFormat = (colFormat, format) => {
   return {
     thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
     decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
-    decimalScale: colFormat?.decimalScale ?? format?.decimalScale,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale ? Number(colFormat?.decimalScale ?? format?.decimalScale) : colFormat?.decimalScale ?? format?.decimalScale,
     allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
     // check nhập số âm
     prefix: colFormat?.prefix ?? format?.prefix,
@@ -217,21 +217,21 @@ export const getDatepickerFormat = (type, format) => {
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return format?.dateFormat ?? 'dd/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "datetime":
-      return format?.datetimeFormat ?? 'dd/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
-      return format?.weekFormat ?? 'dd/MM';
+      return format?.weekFormat ?? 'DD/MM';
     case "month":
       return format?.monthFormat ?? 'MM/YYYY';
     case "quarter":
-      return format?.dateFormat ?? 'dd/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "year":
       return format?.yearFormat ?? 'YYYY';
     case "time":
       return format?.timeFormat ?? 'HH:mm';
     default:
-      return 'dd/MM/YYYY';
+      return 'DD/MM/YYYY';
   }
 };
 export const getDateRangeFormat = (type, format) => {
@@ -239,21 +239,21 @@ export const getDateRangeFormat = (type, format) => {
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return convertFormat(format?.dateFormat ?? 'DD/MM/YYYY');
+      return convertFormat(format?.dateFormat ?? 'dd/MM/yyyy');
     case "datetime":
-      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'dd/MM/yyyy HH:mm';
     case "week":
-      return format?.weekFormat ?? 'DD/MM';
+      return format?.weekFormat ?? 'dd/MM';
     case "month":
-      return format?.monthFormat ?? 'MM/YYYY';
+      return format?.monthFormat ?? 'MM/yyyy';
     case "quarter":
-      return format?.dateFormat ?? 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'dd/MM/yyyy';
     case "year":
-      return format?.yearFormat ?? 'YYYY';
+      return format?.yearFormat ?? 'yyyy';
     case "time":
       return format?.timeFormat ?? 'HH:mm';
     default:
-      return 'DD/MM/YYYY';
+      return 'dd/MM/yyyy';
   }
 };
 export const customWeekStartEndFormat = (value, weekFormat) => {

package/es/grid-component/table/GridEdit.js

@@ -412,7 +412,7 @@ const GridEdit = props => {
   }, [rangeCells]);
   const contextMenuItems = React.useMemo(() => {
     const a = showDefaultContext !== false ? [...defaultContext] : [];
-    const b = propsContext ? [...propsContext, {
+    const b = propsContext && propsContext.length > 0 ? [...propsContext, {
       type: 'divider'
     }] : [];
     return [...b, ...a];
@@ -2270,7 +2270,7 @@ const GridEdit = props => {
           dataIndex: column.dataIndex,
           indexRow: rowNumber,
           indexCol: colIndex,
-          title: getValueCell(column, record[column.field], format),
+          title: getValueCell(column, record[column.field], record, format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
           // 'data-tooltip-id': "tooltip-cell-content",

package/es/grid-component/table/InfiniteTable.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ColumnsTable, GetRowKey } from "../type";
+import type { TableProps } from "../type";
+type Props<T> = TableProps<T> & {
+    scrollHeight?: number;
+    tableRef: any;
+    triggerFilter?: (queries: any) => void;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+    setTooltipContent?: any;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+    isFilter?: boolean;
+    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare const InfiniteTable: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default InfiniteTable;

package/es/grid-component/table/InfiniteTable.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useRef } from 'react';
+import { GridStyle } from "../GridStyle";
+import { ConfigProvider } from "rc-master-ui";
+import TableGrid from "../TableGrid";
+
+// type Props = {
+//   columns: any[]
+//   data: any[]
+//   currentPage: number
+//   pageSize: number
+//   total: number
+//   loading?: boolean
+//   next?: () => void
+// }
+
+const InfiniteTable = props => {
+  const {
+    next,
+    loading
+  } = props;
+  const {
+    id,
+    height,
+    scrollHeight,
+    rowHoverable,
+    pagination,
+    ...rest
+  } = props;
+  const {
+    currentPage,
+    pageSize,
+    total
+  } = pagination ?? {};
+  const loadingRef = useRef(false);
+  const hasMoreRef = useRef(true);
+  const loadData = page => {
+    if (!hasMoreRef.current || loadingRef.current || loading) return;
+    loadingRef.current = true;
+    setTimeout(() => {
+      next?.();
+      if (page * pageSize >= total) {
+        hasMoreRef.current = false;
+      }
+      loadingRef.current = false;
+    }, 10);
+  };
+  const handleNext = () => {
+    loadData(currentPage + 1);
+  };
+  const handleScroll = e => {
+    if (loadingRef.current || loading) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    const {
+      scrollHeight: tbScrollHeight,
+      scrollTop,
+      clientHeight
+    } = e.currentTarget;
+    const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+    if (isEnd && !loadingRef.current && hasMoreRef.current) {
+      handleNext();
+    }
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
+    $heightTable: height,
+    $heightScroll: scrollHeight,
+    style: {
+      position: 'relative'
+    },
+    id: id
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619',
+          cellFontSize: 12,
+          cellFontSizeSM: 13,
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
+    id: id,
+    pagination: false,
+    virtual: true,
+    onScroll: handleScroll,
+    loading: loading
+  })))));
+};
+export default InfiniteTable;

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

@@ -142,6 +142,8 @@ export type ColumnTemplate<RecordType> = {
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination'> {
     editAble?: boolean;
+    infiniteScroll?: boolean;
+    next?: () => void;
     groupAble?: boolean;
     groupColumns?: string[];
     groupSetting?: IGroupSetting;

package/lib/grid-component/EditableCell.js

@@ -874,7 +874,7 @@ const EditableCell = props => {
         // let floatValue = value
 
         const numericFormatProps = {
-          // value,
+          value,
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
           decimalScale: cellFormat?.decimalScale ?? undefined,
@@ -884,8 +884,8 @@ const EditableCell = props => {
           suffix: cellFormat?.suffix ?? undefined
         };
         return /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, (0, _extends2.default)({
-          id: `col${indexCol}-record${indexRow}`,
-          value: value ? (0, _reactNumericComponent.numericFormatter)(value.toString(), numericFormatProps) : ''
+          id: `col${indexCol}-record${indexRow}`
+          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
           // value={value}
         }, numericFormatProps, {
           min: column.min,

package/lib/grid-component/InternalTable.js

@@ -36,6 +36,7 @@ var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
+var _InfiniteTable = _interopRequireDefault(require("./table/InfiniteTable"));
 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 {Resizable} from "react-resizable";
@@ -188,6 +189,7 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
+    infiniteScroll,
     ...rest
   } = props;
   const id = _react.default.useMemo(() => {
@@ -818,7 +820,7 @@ const InternalTable = props => {
       triggerChangeData(newData);
     }
   };
-  const TableComponent = groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
+  const TableComponent = infiniteScroll ? _InfiniteTable.default : groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],

package/lib/grid-component/hooks/columns/index.d.ts

@@ -4,6 +4,6 @@ import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
-export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
+export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, record: T, format?: IFormat) => any;
 export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
 export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat, dateRangeLocale?: any) => React.JSX.Element;

package/lib/grid-component/hooks/columns/index.js

@@ -66,27 +66,29 @@ const flatColumns2 = columns => {
   }, []);
 };
 exports.flatColumns2 = flatColumns2;
-const getValueCell = (column, value, format) => {
+const getValueCell = (column, value, record, format) => {
   switch (column?.type) {
     case 'number':
-      const thousandSeparator = format?.thousandSeparator;
-      const decimalSeparator = format?.decimalSeparator;
-      const dec = format?.decimalScale;
+      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+      const cellFormat = (0, _utils.getFormat)(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
 
-      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString()) : '0'
-      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? tmpval.toString() : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-        allowNegative: format?.allowNegative ?? true,
-        prefix: format?.prefix,
-        suffix: format?.suffix,
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
         decimalScale: dec,
-        fixedDecimalScale: format?.fixedDecimalScale ?? false
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
       };
       return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
     case 'date':
@@ -129,7 +131,7 @@ const getValueCell = (column, value, format) => {
 exports.getValueCell = getValueCell;
 const renderContent = (column, value, record, index, format) => {
   const cellValue = value instanceof Date ? (0, _utils.getDateString)(column, value) : value;
-  const content = getValueCell(column, cellValue, format);
+  const content = getValueCell(column, cellValue, record, format);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, column?.template ? typeof column.template === "function" ? column.template({
     value,
     index,
@@ -142,7 +144,7 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
   const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = (0, _utils.getTypeFilter)(column);
   const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = (0, _utils.convertFormat)((0, _utils.getDatepickerFormat)(column?.type, cellFormat) ?? 'DD/MM/YYYY');
+  const dateRangeFormat = (0, _utils.convertFormat)((0, _utils.getDateRangeFormat)(column?.type, cellFormat) ?? 'dd/MM/yyyy');
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -25,7 +25,7 @@ const HeaderContent = props => {
     return columnGroupText ?? headerText;
   }, [columnGroupText, headerText]);
   const tooltip = _react.default.useMemo(() => {
-    return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
+    return headerTooltip ?? t ? t?.(columnGroupText ?? headerText) : columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('', {}),

package/lib/grid-component/hooks/utils.js

@@ -226,7 +226,7 @@ const getFormat = (colFormat, format) => {
   return {
     thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
     decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
-    decimalScale: colFormat?.decimalScale ?? format?.decimalScale,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale ? Number(colFormat?.decimalScale ?? format?.decimalScale) : colFormat?.decimalScale ?? format?.decimalScale,
     allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
     // check nhập số âm
     prefix: colFormat?.prefix ?? format?.prefix,
@@ -269,21 +269,21 @@ const getDatepickerFormat = (type, format) => {
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return format?.dateFormat ?? 'dd/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "datetime":
-      return format?.datetimeFormat ?? 'dd/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
-      return format?.weekFormat ?? 'dd/MM';
+      return format?.weekFormat ?? 'DD/MM';
     case "month":
       return format?.monthFormat ?? 'MM/YYYY';
     case "quarter":
-      return format?.dateFormat ?? 'dd/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "year":
       return format?.yearFormat ?? 'YYYY';
     case "time":
       return format?.timeFormat ?? 'HH:mm';
     default:
-      return 'dd/MM/YYYY';
+      return 'DD/MM/YYYY';
   }
 };
 exports.getDatepickerFormat = getDatepickerFormat;
@@ -292,21 +292,21 @@ const getDateRangeFormat = (type, format) => {
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return convertFormat(format?.dateFormat ?? 'DD/MM/YYYY');
+      return convertFormat(format?.dateFormat ?? 'dd/MM/yyyy');
     case "datetime":
-      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'dd/MM/yyyy HH:mm';
     case "week":
-      return format?.weekFormat ?? 'DD/MM';
+      return format?.weekFormat ?? 'dd/MM';
     case "month":
-      return format?.monthFormat ?? 'MM/YYYY';
+      return format?.monthFormat ?? 'MM/yyyy';
     case "quarter":
-      return format?.dateFormat ?? 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'dd/MM/yyyy';
     case "year":
-      return format?.yearFormat ?? 'YYYY';
+      return format?.yearFormat ?? 'yyyy';
     case "time":
       return format?.timeFormat ?? 'HH:mm';
     default:
-      return 'DD/MM/YYYY';
+      return 'dd/MM/yyyy';
   }
 };
 exports.getDateRangeFormat = getDateRangeFormat;

package/lib/grid-component/table/GridEdit.js

@@ -416,7 +416,7 @@ const GridEdit = props => {
   }, [rangeCells]);
   const contextMenuItems = _react.default.useMemo(() => {
     const a = showDefaultContext !== false ? [...defaultContext] : [];
-    const b = propsContext ? [...propsContext, {
+    const b = propsContext && propsContext.length > 0 ? [...propsContext, {
       type: 'divider'
     }] : [];
     return [...b, ...a];
@@ -2274,7 +2274,7 @@ const GridEdit = props => {
           dataIndex: column.dataIndex,
           indexRow: rowNumber,
           indexCol: colIndex,
-          title: (0, _columns.getValueCell)(column, record[column.field], format),
+          title: (0, _columns.getValueCell)(column, record[column.field], record, format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
           // 'data-tooltip-id': "tooltip-cell-content",

package/lib/grid-component/table/InfiniteTable.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ColumnsTable, GetRowKey } from "../type";
+import type { TableProps } from "../type";
+type Props<T> = TableProps<T> & {
+    scrollHeight?: number;
+    tableRef: any;
+    triggerFilter?: (queries: any) => void;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+    setTooltipContent?: any;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+    isFilter?: boolean;
+    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare const InfiniteTable: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default InfiniteTable;

package/lib/grid-component/table/InfiniteTable.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _GridStyle = require("../GridStyle");
+var _rcMasterUi = require("rc-master-ui");
+var _TableGrid = _interopRequireDefault(require("../TableGrid"));
+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; }
+// type Props = {
+//   columns: any[]
+//   data: any[]
+//   currentPage: number
+//   pageSize: number
+//   total: number
+//   loading?: boolean
+//   next?: () => void
+// }
+
+const InfiniteTable = props => {
+  const {
+    next,
+    loading
+  } = props;
+  const {
+    id,
+    height,
+    scrollHeight,
+    rowHoverable,
+    pagination,
+    ...rest
+  } = props;
+  const {
+    currentPage,
+    pageSize,
+    total
+  } = pagination ?? {};
+  const loadingRef = (0, _react.useRef)(false);
+  const hasMoreRef = (0, _react.useRef)(true);
+  const loadData = page => {
+    if (!hasMoreRef.current || loadingRef.current || loading) return;
+    loadingRef.current = true;
+    setTimeout(() => {
+      next?.();
+      if (page * pageSize >= total) {
+        hasMoreRef.current = false;
+      }
+      loadingRef.current = false;
+    }, 10);
+  };
+  const handleNext = () => {
+    loadData(currentPage + 1);
+  };
+  const handleScroll = e => {
+    if (loadingRef.current || loading) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    const {
+      scrollHeight: tbScrollHeight,
+      scrollTop,
+      clientHeight
+    } = e.currentTarget;
+    const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+    if (isEnd && !loadingRef.current && hasMoreRef.current) {
+      handleNext();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
+    $heightTable: height,
+    $heightScroll: scrollHeight,
+    style: {
+      position: 'relative'
+    },
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619',
+          cellFontSize: 12,
+          cellFontSizeSM: 13,
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
+    id: id,
+    pagination: false,
+    virtual: true,
+    onScroll: handleScroll,
+    loading: loading
+  })))));
+};
+var _default = exports.default = InfiniteTable;

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

@@ -142,6 +142,8 @@ export type ColumnTemplate<RecordType> = {
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination'> {
     editAble?: boolean;
+    infiniteScroll?: boolean;
+    next?: () => void;
     groupAble?: boolean;
     groupColumns?: string[];
     groupSetting?: IGroupSetting;

package/package.json

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