es-grid-template 1.5.0 → 1.5.2

package/es/grid-component/ColumnsChoose.js

@@ -489,7 +489,7 @@ export const ColumnsChoose = props => {
       autoExpandParent: autoExpandParent
       // treeData={treeData}
       ,
-      treeData: columns,
+      treeData: columns.filter(it => !columnsGroup?.includes(it.field)),
       defaultExpandAll: true,
       checkable: true
       // onSelect={(keys, info) => {

package/es/grid-component/EditableCell.js

@@ -61,7 +61,8 @@ const EditableCell = props => {
     getValues,
     handleCellChange,
     getRowKey,
-    errors
+    errors,
+    id
   } = useContext(TableContext);
   const datePickerRef = React.useRef(null);
   const dateTimePickerRef = React.useRef(null);
@@ -160,7 +161,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'datetime':
         return /*#__PURE__*/React.createElement(DatePicker
@@ -216,7 +217,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'month':
       case 'quarter':
@@ -242,7 +243,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'week':
         const weekFormat = getDatepickerFormat(editType, cellFormat);
@@ -262,7 +263,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'time':
         const timeFormat = getDatepickerFormat(editType, cellFormat);
@@ -289,7 +290,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'selectTable':
         const rr = selectColumns ?? [];
@@ -327,6 +328,7 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable,
+          rowData: record,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -396,7 +398,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'select':
         let valueSelect = value;
@@ -454,7 +456,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'asyncSelect':
         let valueAsyncSelect = value;
@@ -551,7 +553,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -624,7 +626,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'checkbox':
         return /*#__PURE__*/React.createElement("div", {
@@ -847,7 +849,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
         return /*#__PURE__*/React.createElement(Input, {
@@ -910,7 +912,7 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
     }
   };

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined);
+})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);

package/es/grid-component/InternalTable.js

@@ -3,7 +3,7 @@ import React, { createContext, Fragment, useCallback, useContext, useState } fro
 // import {Resizable} from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
+import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -11,9 +11,13 @@ import GridEdit from "./table/GridEdit";
 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";
+import viDr from "rc-master-ui/es/locales/vi_VN";
 // import useColumns from "./hooks/useColumns";
 
 import "./styles.scss";
+// import 'rc-master-ui/assets/index.css'
+
 import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
 import Group from "./table/Group";
 import Swal from "sweetalert2";
@@ -202,6 +206,7 @@ const InternalTable = props => {
   // }, [height, id])
 
   const local = lang && lang === 'en' ? en : vi;
+  const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
   const buddhistLocale = {
     ...local,
     lang: {
@@ -219,8 +224,13 @@ const InternalTable = props => {
   });
   const [tooltipContent, setTooltipContent] = useState('');
   const mergedData = React.useMemo(() => {
+    // return addRowIdArray(dataSource)
+
+    if (groupSetting && groupSetting.client !== false) {
+      return groupArrayByColumns(dataSource, groupColumns);
+    }
     return addRowIdArray(dataSource);
-  }, [dataSource]);
+  }, [dataSource, groupColumns, groupSetting]);
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
     if (propsHeight) {
@@ -319,7 +329,7 @@ const InternalTable = props => {
         style: {
           marginBottom: 8
         }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t, format, dateRangeLocale)), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
           width: '100%'
@@ -491,7 +501,8 @@ const InternalTable = props => {
               'cell-group': groupColumns && data.children,
               'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
             }),
-            'data-tooltip-id': "tooltip-cell-content"
+            // 'data-tooltip-id': "tooltip-cell-content"
+            'data-tooltip-id': `${id}-tooltip-cell-content`
           };
         },
         render: (value, record, rowIndex) => {

package/es/grid-component/TableGrid.js

@@ -485,7 +485,7 @@ const TableGrid = props => {
 
         // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
         const dec = cellFormat?.decimalScale;
-        const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
+        const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates), col?.key) : 0;
         const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
         const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
         const numericFormatProps = {

package/es/grid-component/async-select/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
 import type { SelectProps } from "rc-master-ui/es/select";
+import type { LoadOptionsArgs } from "../type";
 export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends SelectProps {
-    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
     debounceTimeout?: number;
     defaultOptions?: OptionType[];
+    rowData?: any;
 }
-export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;
+export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, rowData, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/es/grid-component/async-select/index.js

@@ -6,6 +6,7 @@ export function AsyncSelect({
   loadOptions,
   debounceTimeout = 500,
   defaultOptions,
+  rowData,
   ...props
 }) {
   const [options, setOptions] = useState(defaultOptions ?? []);
@@ -18,6 +19,8 @@ export function AsyncSelect({
       if (loadOptions) {
         loadOptions(value, newOptions => {
           setOptions(newOptions);
+        }, {
+          rowData
         });
       }
     };

package/es/grid-component/async-table-select/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
 import type { TableSelectProps } from "rc-master-ui/es/table-select";
+import type { LoadOptionsArgs } from "../type";
 export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends TableSelectProps {
-    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
     debounceTimeout?: number;
     defaultOptions?: OptionType[];
+    rowData?: any;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/es/grid-component/async-table-select/index.js

@@ -7,6 +7,7 @@ export function AsyncTableSelect({
   debounceTimeout = 500,
   defaultOptions,
   columns,
+  rowData,
   ...props
 }) {
   const [options, setOptions] = useState(defaultOptions ?? []);
@@ -19,11 +20,13 @@ export function AsyncTableSelect({
       if (loadOptions) {
         loadOptions(value, newOptions => {
           setOptions(newOptions);
+        }, {
+          rowData
         });
       }
     };
     return debounce(fetchOptions, debounceTimeout);
-  }, [loadOptions, debounceTimeout]);
+  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
   useEffect(() => {
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);

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

@@ -6,4 +6,4 @@ export declare function flatColumns<RecordType>(columns: 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 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) => 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,17 +1,15 @@
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
 import { numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
 import React, { Fragment } from "react";
-import { DatePicker, Empty, Input, Select } from "rc-master-ui";
+import { CustomProvider, DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
 import NumberRange from "../../number-range";
 import NumberInput from "../../number";
 // import {Typography} from "antd";
-const {
-  RangePicker
-} = DatePicker;
+// const {RangePicker} = DatePicker
 
 // const { Text } = Typography;
 
@@ -125,11 +123,11 @@ export const renderContent = (column, value, record, index, format) => {
     field: column.field
   }) : column.template : content);
 };
-export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format) => {
+export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format, dateRangeLocale) => {
   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 = getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = convertFormat(getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY');
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {
@@ -176,35 +174,25 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         }
       }))));
     case 'DateRange':
-      const dateRangeValue = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : ''];
+      // const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
+      const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(RangePicker, {
-        format: {
-          format: dateRangeFormat,
-          type: 'mask'
-        }
-        // defaultValue={dateRangeValue}
-        ,
-        value: dateRangeValue,
-        locale: buddhistLocale
-        // placeholder={['Ngày bắt đầu', 'Ngày kết thúc']}
-        ,
-        popupStyle: {
-          zIndex: 9999
+      }, /*#__PURE__*/React.createElement(CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/React.createElement(DateRangePicker
+      // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
+      , {
+        style: {
+          width: 300
         },
-        onChange: (value, dateString) => {
-          const newDateRangeValue = dateString[0] ? [dateString[0] ? moment(convertDayjsToDate(dateString[0], dateRangeFormat)).format() : '', dateString[1] ? moment(convertDayjsToDate(dateString[1], dateRangeFormat)).format() : ''] : '';
-
-          // setSelectedKeys(newDateValue ? [newDateValue] : [])
+        format: dateRangeFormat,
+        value: dateRangeValue,
+        onChange: value => {
+          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
-        },
-        style: {
-          width: '100%'
         }
-        // popupClassName={'adv-popup-container'}
-        // getPopupContainer={() => menuRef.current}
-      }))));
+      })))));
     case 'Week':
       const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {

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

@@ -36,7 +36,9 @@ export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
     monthFormat: string;
     yearFormat: string;
 };
+export declare function convertFormat(formatStr: string): string;
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
@@ -141,3 +143,4 @@ export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
 export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;
+export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;

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

@@ -190,12 +190,56 @@ export const getFormat = (colFormat, format) => {
     yearFormat: colFormat?.yearFormat ?? format?.yearFormat
   };
 };
+export function convertFormat(formatStr) {
+  // return formatStr.split('').map((char, i) => {
+  //   if (char === 'D' || char === 'd') {
+  //     return 'd'; // ngày: lowercase
+  //   }
+  //   if (char === 'Y' || char === 'y') {
+  //     return 'y'; // năm: lowercase
+  //   }
+  //   if (char === 'M' || char === 'm') {
+  //     return char; // tháng: giữ nguyên
+  //   }
+  //   return char; // separator
+  // }).join('');
+
+  return formatStr.split('').map(char => {
+    if (char === 'D' || char === 'd') return 'd';
+    if (char === 'Y' || char === 'y') return 'y';
+    if ('Hhmsa'.includes(char)) return char; // giờ, phút, giây, am/pm
+    if (char === 'M' || char === 'm') return char; // tháng: giữ nguyên
+    return char; // dấu phân cách
+  }).join('');
+}
 export const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   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';
+    case "week":
+      return format?.weekFormat ?? 'dd/MM';
+    case "month":
+      return format?.monthFormat ?? 'MM/YYYY';
+    case "quarter":
+      return format?.dateFormat ?? 'dd/MM/YYYY';
+    case "year":
+      return format?.yearFormat ?? 'YYYY';
+    case "time":
+      return format?.timeFormat ?? 'HH:mm';
+    default:
+      return 'dd/MM/YYYY';
+  }
+};
+export const getDateRangeFormat = (type, format) => {
+  const typeFormat = type ? type.toLowerCase() : '';
+  switch (typeFormat) {
+    case "date":
+    case "daterange":
+      return convertFormat(format?.dateFormat ?? 'DD/MM/YYYY');
     case "datetime":
       return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
@@ -1985,4 +2029,43 @@ export const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   }
   const key = `${rowIndex}-${colIndex}`;
   return selectedCells.has(key);
-};
+};
+export function groupArrayByColumns(arr, columns) {
+  const result = [];
+  if (columns) {
+    arr.forEach(item => {
+      let currentLevel = result;
+      columns.forEach((column, index) => {
+        const value = item[column];
+        const existingItem = currentLevel.find(i => i[column] === value);
+        if (existingItem) {
+          currentLevel = existingItem.children;
+        } else {
+          // const newItem = {[column]: value, field: column, rowId: !isEmpty(value) ? (value) : newGuid(), parentId: !isEmpty(item[columns[index - 1]]) ? (item[columns[index - 1]]) : null, indent: index, children: [] }
+          const newItem = {
+            [column]: value,
+            field: column,
+            rowId: newGuid(),
+            // rowId: item[column],
+            parentId: !isEmpty(item[columns[index - 1]]) ? item[columns[index - 1]] : null,
+            // parentId: item.rowId[index - 1],
+            // indent: index,
+            children: []
+          };
+          currentLevel.push(newItem);
+          currentLevel = newItem.children;
+        }
+      });
+      currentLevel.push({
+        ...item,
+        rowId: item.id ?? item.rowId,
+        parentId: !isEmpty(columns[columns.length - 1]) ? item[columns[columns.length - 1]] : null,
+        // parentId: item.rowId[columns.length - 1],
+        indent: columns.length
+      });
+    });
+    return result;
+  } else {
+    return arr;
+  }
+}

package/es/grid-component/styles.scss

@@ -1341,3 +1341,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     display: none;
   }
 }
+
+.rs-picker-popup {
+  z-index: 1660;
+}