es-grid-template 0.0.8 → 0.0.13

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

@@ -0,0 +1,422 @@
+// import * as React from 'react'
+
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
+import { NumericFormat, numericFormatter } from "react-numeric-component";
+import dayjs from "dayjs";
+import moment from "moment/moment";
+import React, { Fragment } from "react";
+import { DatePicker, Input, Select } from "rc-master-ui";
+import CheckboxFilter from "../../CheckboxFilter";
+const {
+  RangePicker
+} = DatePicker;
+export function flatColumns(columns, parentKey = 'key') {
+  // @ts-ignore
+  return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
+    const {
+      fixed
+    } = column;
+    // Convert `fixed='true'` to `fixed='left'` instead
+    const parsedFixed = fixed === true ? 'left' : fixed;
+    const mergedKey = `${parentKey}-${index}`;
+    const subColumns = column.children;
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
+        fixed: parsedFixed,
+        ...subColum
+      }))];
+    }
+    return [...list, {
+      key: mergedKey,
+      ...column,
+      fixed: parsedFixed
+    }];
+  }, []);
+}
+export const getValueCell = (column, value, format) => {
+  switch (column?.type) {
+    case 'number':
+      const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
+      const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
+      const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
+      const content = !isEmpty(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
+      const numericFormatProps = {
+        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+        allowNegative: (column?.format?.allowNegative ? column?.format?.allowNegative : format?.allowNegative) ?? true,
+        prefix: column?.format?.prefix ? column?.format?.prefix : format?.prefix,
+        suffix: column?.format?.suffix ? column?.format?.suffix : format?.suffix,
+        decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
+        fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+      };
+      return !isEmpty(content) ? numericFormatter(content, numericFormatProps) : '';
+    case 'date':
+      return value ? dayjs(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? moment(value).format('yyyy') : '';
+      return /*#__PURE__*/React.createElement(Fragment, null, year);
+    case 'datetime':
+      return value ? moment(value).format(column?.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return /*#__PURE__*/React.createElement(Fragment, null, isColor(value) ? /*#__PURE__*/React.createElement("div", {
+        className: 'w-100 h-100',
+        style: {
+          backgroundColor: value,
+          border: '1px solid #f0f0f0'
+        }
+      }) : '');
+    case 'checkbox':
+      return /*#__PURE__*/React.createElement(Input, {
+        checked: !!content,
+        readOnly: true,
+        type: "checkbox"
+      });
+    case 'file':
+      const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
+      return value ? nameFile : '';
+    default:
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return value;
+  }
+};
+export const renderContent = (column, value, record, index, format) => {
+  const cellValue = value instanceof Date ? getDateString(column, value) : value;
+  const content = getValueCell(column, cellValue, format);
+  return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template(value, record, index) : column.template : content);
+};
+export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale) => {
+  const type = getTypeFilter(column);
+  const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = getDatepickerFormat(column?.type, column) ?? 'DD/MM/YYYY';
+  const find = dataSourceFilter?.find(it => it.key === column?.key);
+  const options = find ? find.data : [];
+  switch (type) {
+    case 'Number':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(NumericFormat, {
+        value: selectedKeys[0]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        // allowNegative={col.format && col.format.allowNegative === true}
+        ,
+        allowNegative: true,
+        customInput: Input,
+        className: ' rounded-0 input-element form-control',
+        onValueChange: values => {
+          // onChangeValueFilter(type, values.floatValue)
+          setSelectedKeys(values.floatValue || values.floatValue === 0 ? [values.floatValue] : []);
+        }
+      }))));
+    case 'NumberRange':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1 d-flex flex-column gap-1'
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, /*#__PURE__*/React.createElement(NumericFormat, {
+        value: selectedKeys[0]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        ,
+        allowNegative: true,
+        customInput: Input,
+        className: ' rounded-0 input-element form-control'
+        // onValueChange={(values: any) => {
+        //   onChangeValueFilter(type, values.floatValue, 'min')
+        // }}
+        ,
+        placeholder: 'Min',
+        autoFocus: true
+      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
+        value: selectedKeys[1]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        ,
+        allowNegative: true,
+        customInput: Input,
+        className: ' rounded-0 input-element form-control',
+        onValueChange: () => {
+          // onChangeValueFilter(type, values.floatValue, 'max')
+        },
+        placeholder: 'Max'
+      })))));
+    case 'Date':
+      const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: dateValue,
+        defaultValue: dateValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'DateRange':
+      const dateRangeValue = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : ''];
+      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,
+        placeholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
+        popupStyle: {
+          zIndex: 9999
+        },
+        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] : [])
+          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", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'week',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: weekValue,
+        defaultValue: weekValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'Month':
+      const monthValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'month',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: monthValue,
+        defaultValue: monthValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      })));
+
+    // case 'Quarter':
+    //
+    //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //
+    //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //
+    //
+    //         <div className={'mb-1'}>
+    //
+    //           <DatePicker
+    //             format={{
+    //               format: dateFormat,
+    //               type: 'mask'
+    //             }}
+    //             locale={buddhistLocale}
+    //             style={{width: '100%', height: '100%'}}
+    //             value={pickerValue}
+    //             defaultValue={pickerValue}
+    //             placeholder={column.placeholder}
+    //             onChange={(date, dateString) => {
+    //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //
+    //             }}
+    //
+    //           />
+    //         </div>
+    //
+    //
+    //       </div>
+    //     </Fragment>
+    //   )
+    //
+    // case 'Year':
+    //
+    //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //
+    //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //
+    //
+    //         <div className={'mb-1'}>
+    //
+    //           <DatePicker
+    //             format={{
+    //               format: dateFormat,
+    //               type: 'mask'
+    //             }}
+    //             locale={buddhistLocale}
+    //             style={{width: '100%', height: '100%'}}
+    //             value={pickerValue}
+    //             defaultValue={pickerValue}
+    //             placeholder={column.placeholder}
+    //             onChange={(date, dateString) => {
+    //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //
+    //             }}
+    //
+    //           />
+    //         </div>
+    //
+    //
+    //       </div>
+    //     </Fragment>
+    //   )
+
+    case 'Dropdown':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select
+      // options={translateOption(numberOperator, t)}
+      , {
+        options: options,
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: selectedKeys[0],
+        onChange: val => {
+          // setOperatorKey(val)
+          setSelectedKeys(val ? [val] : []);
+        },
+        showSearch: true,
+        allowClear: true
+      }))));
+
+    // case 'DropTree':
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //         {col.filterOption && col.filterOption.showOperator === false ? (
+    //           ''
+    //         ) : (
+    //           <div className={'mb-1'}>
+    //             <Select
+    //               options={translateOption(numberOperator, t)}
+    //               // options={t ? numberOperator.map((it: any) => ({...it, label: t(it.label)})) : numberOperator}
+    //
+    //               classNamePrefix='select'
+    //               className={`react-select`}
+    //               value={translateOption(numberOperator, t).find(
+    //                 ope => ope.value === (operator ? operator : getDefaultOperator(col))
+    //               )}
+    //               onChange={(val: any) => {
+    //                 setCurrentFilter((prevState: any) => ({ ...prevState, operator: val.value }))
+    //               }}
+    //             />
+    //           </div>
+    //         )}
+    //
+    //         <div className={'mb-1'}>
+    //           <Input
+    //             placeholder={'Nhập giá trị'}
+    //             value={value}
+    //             onChange={(val: any) => {
+    //               onChangeValueFilter(type, val.value)
+    //             }}
+    //           />
+    //         </div>
+    //
+    //         <div className={'d-flex justify-content-end'}>
+    //           <Button color='flat-primary' className={'me-1 be-button'} onClick={(e: any) => handleOnFilter(e)}>
+    //             {t ? t('Filter') : 'Filter'}
+    //           </Button>
+    //           <Button color='flat-secondary' className={'be-button'} onClick={(e: any) => handleClearFilter(e)}>
+    //             {t ? t('Delete') : 'Delete'}
+    //           </Button>
+    //         </div>
+    //       </div>
+    //     </Fragment>
+    //   )
+    //
+    case 'Checkbox':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter
+      // column={column}
+      , {
+        locale: {
+          filterTitle: 'Chọn tất cả',
+          filterCheckall: 'Chọn tất cả'
+        },
+        selectedKeys: selectedKeys,
+        onSelect: setSelectedKeys,
+        options: options,
+        filterMultiple: true,
+        open: visible,
+        searchValue: searchValue,
+        setSearchValue: setSearchValue
+      })))));
+    case 'Text':
+    default:
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Input, {
+        placeholder: `Search ${column?.dataIndex}`,
+        value: selectedKeys[0],
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
+        // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
+        ,
+        onPressEnter: () => confirm(),
+        allowClear: true
+      }))));
+  }
+};

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

@@ -0,0 +1,35 @@
+import type * as React from "react";
+import dayjs from "dayjs";
+import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
+import type { ColumnEditType, ColumnsType, ColumnTable } from "../type";
+import type { SelectionSettings } from "../type";
+import type { AnyObject } from "../type";
+export declare const newGuid: () => any;
+export declare const sumDataByField: (data: any[], field: string) => any;
+export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
+export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
+export declare const isEmpty: (d: any) => boolean;
+export declare const isNullOrUndefined: (d: any) => boolean;
+export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
+export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
+export declare const isNameColor: (strColor: string) => boolean;
+export declare const isColor: (value: string) => boolean;
+export declare const getAllVisibleKeys: (columns: any[]) => any[];
+export declare const getVisibleColumnKeys: (columns: any[]) => string[];
+export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
+export declare const updateColumns: (columns: any[], includes: string[]) => any[];
+export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnTable<any>) => 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[];
+export declare const getDateString: <T>(column: ColumnTable<T>, value: any) => string;
+export declare const getEditType: <T>(column: ColumnEditType<T>, rowData?: any) => EditType | ((rowData?: any) => EditType);
+export declare const isDisable: <T>(column: ColumnEditType<T>, rowData?: any) => boolean;
+export declare const checkFieldKey: (key: string | undefined) => string;
+export declare const convertLabelToTitle: (data: any[]) => any[];
+export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
+export declare const getTemplate: (template: any) => React.ReactNode | React.ReactElement;
+export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
+export declare const isObjEmpty: (obj: any) => boolean;
+export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
+export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];

package/es/{hooks → grid-component/hooks}/utils.js

@@ -1,4 +1,13 @@
 import dayjs from "dayjs";
+import moment from "moment/moment";
+import { v4 as uuidv4 } from 'uuid';
+export const newGuid = () => {
+  for (let i = 0; i < 20; i++) {
+    // @ts-ignore
+    // const id = crypto.randomUUID()
+    return uuidv4();
+  }
+};
 export const sumDataByField = (data, field) => {
   if (data && data.length > 0) {
     return data.reduce((accumulator, currentValue) => {
@@ -43,16 +52,10 @@ export const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
   }
 };
 export const isEmpty = d => {
-  if (d === null || d === undefined || d === '') {
-    return true;
-  }
-  return false;
+  return d === null || d === undefined || d === '';
 };
 export const isNullOrUndefined = d => {
-  if (d === null || d === undefined) {
-    return true;
-  }
-  return false;
+  return d === null || d === undefined;
 };
 export const convertDayjsToDate = (dateString, format) => {
   const dayjsDate = dayjs(dateString, format); // Parse using the provided format
@@ -101,8 +104,7 @@ export const getAllVisibleKeys = columns => {
 export const getVisibleColumnKeys = columns => {
   const allKeys = getAllVisibleKeys(columns);
   const allParentKeys = getHiddenParentKeys(columns);
-  const rs = allKeys.filter(item => !allParentKeys.includes(item));
-  return rs;
+  return allKeys.filter(item => !allParentKeys.includes(item));
 };
 export function getHiddenParentKeys(columns, parentKeys = []) {
   const hiddenParents = new Set();
@@ -133,11 +135,7 @@ export const updateColumns = (columns, includes) => {
       newColumn.children = updateColumns(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
     }
-    if (newColumn.key && !includes.includes(newColumn.key)) {
-      newColumn.hidden = true;
-    } else {
-      newColumn.hidden = false;
-    }
+    newColumn.hidden = newColumn.key && !includes.includes(newColumn.key);
     if (newColumn.children && newColumn.children.length > 0) {
       newColumn.hidden = !hasVisibleChild;
     }
@@ -163,9 +161,12 @@ export const getDatepickerFormat = (type, col) => {
     case "time":
       return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm';
     default:
-      return undefined;
+      return 'DD/MM/YYYY';
   }
 };
+export const customWeekStartEndFormat = (value, weekFormat) => {
+  return `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value).endOf('week').format(weekFormat)}`;
+};
 export const getTypeFilter = col => {
   if (col?.typeFilter) {
     return col.typeFilter;
@@ -209,4 +210,111 @@ export const updateArrayByKey = (arr, element, key) => {
   } else {
     return [];
   }
+};
+export const getDateString = (column, value) => {
+  if (value instanceof Date) {
+    return moment(value).format();
+  }
+  return value;
+};
+export const getEditType = (column, rowData) => {
+  if (column && typeof column.editType === 'function') {
+    return column.editType(rowData);
+  }
+  return column.editType;
+};
+export const isDisable = (column, rowData) => {
+  if (column && typeof column?.disable === 'function') {
+    return column.disable(rowData);
+  }
+  return !!column?.disable;
+};
+export const checkFieldKey = key => {
+  if (key) {
+    return key;
+  } else {
+    return 'value';
+  }
+};
+export const convertLabelToTitle = data => {
+  return data.map(item => {
+    const {
+      label,
+      title,
+      value,
+      ...rest
+    } = item;
+    const newItem = {
+      ...rest,
+      value,
+      key: value,
+      title: title ? title : label
+    };
+    if (item.children) {
+      newItem.children = convertLabelToTitle(item.children);
+    }
+    return newItem;
+  });
+};
+export const convertArrayWithIndent = (inputArray, parentIndent = 0) => {
+  if (inputArray) {
+    return inputArray.map(item => {
+      const indent = parentIndent;
+      if (item.children && item.children.length > 0) {
+        item.children = convertArrayWithIndent(item.children, indent + 1);
+      }
+      return {
+        ...item,
+        indent,
+        rowId: item.rowId ? item.rowId : item.id ? item.id : newGuid()
+      };
+    });
+  } else {
+    return [];
+  }
+};
+export const getTemplate = template => {
+  if (template && typeof template === 'function') {
+    return template();
+  }
+  return template;
+};
+export const totalFixedWidth = (columns, type, selectionSettings) => {
+  const totalFixedLeftWidth = columns.filter(column => column.fixed === type) // Lọc các cột có fixed
+  .reduce((sum, column) => {
+    const width = typeof column.width === 'number' ? column.width : parseInt(column.width, 10) || 0; // Chuyển từ chuỗi sang số, nếu không hợp lệ thì lấy 0
+    return sum + width;
+  }, 0);
+  const selectColumnWidth = !selectionSettings?.mode ? 0.0000001 : typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth, 10) || 50;
+  return totalFixedLeftWidth + selectColumnWidth;
+};
+export const isObjEmpty = obj => {
+  if (isNullOrUndefined(obj)) {
+    return true;
+  } else {
+    return Object.keys(obj).length === 0;
+  }
+};
+export const getColumnsVisible = (columns, index) => {
+  const itemsBeforeIndex = columns.slice(0, index);
+  const itemsAfterIndex = columns.slice(index);
+  itemsAfterIndex.map(it => {
+    if (it.hidden !== false) {
+      itemsBeforeIndex.push(it);
+    }
+  });
+  return itemsBeforeIndex;
+};
+export const updateData = (initData, rows, key) => {
+  const updatedData = initData.map(item => {
+    const newData = rows.find(row => row[key] === item[key]);
+    return newData ? {
+      ...item,
+      ...newData
+    } : item;
+  });
+
+  // Thêm các phần tử mới chưa có trong initialData
+  const newRows = rows.filter(row => !initData.some(item => item[key] === row[key]));
+  return [...updatedData, ...newRows];
 };

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

@@ -0,0 +1,2 @@
+import InternalTable from './InternalTable';
+export default InternalTable;

package/es/grid-component/index.js

@@ -0,0 +1,2 @@
+import InternalTable from "./InternalTable";
+export default InternalTable;

package/es/grid-component/rc-table/Grid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { GridTableProps } from "../type";
+type Props<T> = GridTableProps<T> & {
+    setColumns?: any;
+    tableRef: any;
+};
+declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default Grid;