es-grid-template 1.2.9 → 1.3.1

package/assets/index.css

@@ -42,6 +42,12 @@
 .ui-rc-table-wrapper .ui-rc-table-bordered .ui-rc-table-tbody-virtual .ui-rc-table-cell {
   border-inline-end: 1px solid #e0e0e0;
 }
+.ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-cell {
+  line-height: 22px;
+}
+.ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-cell .ui-rc-table-cell-content {
+  line-height: 22px;
+}
 .ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-row.ui-rc-table-row-selected > .ui-rc-table-cell {
   background: #FEF2EF;
 }
@@ -102,6 +108,9 @@
   border-bottom: 1px solid #e0e0e0;
   font-weight: 500;
 }
+.ui-rc-table-wrapper .ui-rc-table-thead .ui-rc-table-cell .ui-rc-table-cell-content {
+  line-height: 22px;
+}
 .ui-rc-table-wrapper .ui-rc-table-summary .ui-rc-table-cell {
   background-color: #fafafa;
   height: 39px;
@@ -176,6 +185,9 @@
   inset-inline-start: -1px;
 }
 
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-thead > tr > th.ui-rc-table-selection-column {
+  padding: 0;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable {
   overflow: unset;
   display: flex;
@@ -276,6 +288,9 @@
 .ui-rc-table-wrapper.grid-editable .ui-rc_cell-content.selected {
   background-color: #E6EFFD;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc_cell-content.disable {
+  background-color: #f0f0f0;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc_cell-content--index.focus {
   background-color: #CEDBEF;
 }
@@ -471,6 +486,7 @@
   transition: 0.3s;
   white-space: nowrap;
   overflow: hidden;
+  line-height: 22px;
 }
 .ui-rc-table-wrapper.grid-editable .ui-rc-table-tbody .ui-rc-table-cell.cell-editing:focus-visible {
   outline: none;

package/assets/index.scss

@@ -133,6 +133,21 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
   .#{$prefix}-table-tbody {
 
+
+    .#{$prefix}-table-cell {
+      line-height: 22px;
+
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
+      &.#{$prefix}-table-cell-fix-left-last {
+        .#{$prefix}-table-cell-content {
+        }
+      }
+
+    }
+
     .#{$prefix}-table-row {
 
       &.#{$prefix}-table-row-selected {
@@ -205,11 +220,17 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         border-bottom: 1px solid $tableBorderColor;
         //background: #fff;
         font-weight: 500;
+        //line-height: 23px;
+        //height: 40px;
       }
     }
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
       &.#{$prefix}-table-cell-fix-left-last {
         .#{$prefix}-table-cell-content {
           //overflow: visible;
@@ -336,10 +357,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .#{$prefix}-table-wrapper {
 
   .#{$prefix}-table.#{$prefix}-table-small {
-    .#{$prefix}-table-selection-column{
-      //padding: 8px 8px;
-      //padding: 6px 8px;
+    .ui-rc-table-thead {
+      >tr >th.#{$prefix}-table-selection-column{
+        //padding-block: 7px;
+        padding: 0;
+        //padding: 6px 8px;
+      }
     }
+    //.#{$prefix}-table-selection-column{
+    //  padding-block: 7px;
+    //  padding: 0;
+    //  //padding: 6px 8px;
+    //}
   }
 
   &.grid-editable {
@@ -594,6 +623,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       background-color: $cell-selected-bg;
     }
 
+    .ui-rc_cell-content.disable {
+      background-color: #f0f0f0;
+    }
+
     .ui-rc_cell-content--index {
       &.focus {
         background-color: $cell-index-focus-bg;
@@ -678,6 +711,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
               transition: 0.3s;
               white-space: nowrap;
               overflow: hidden;
+              line-height: 22px;
             }
           }
         }

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

@@ -33,7 +33,7 @@ export const ColumnsGroup = props => {
     return rsCol.map(it => ({
       ...it,
       value: it.field,
-      label: t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title
+      label: t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText
     }));
   }, [rsCol, t]);
 
@@ -136,7 +136,7 @@ export const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
       // hideSelectedOptions
     })), /*#__PURE__*/React.createElement("div", {
@@ -165,7 +165,7 @@ export const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
     })), /*#__PURE__*/React.createElement("div", {
       className: 'mb-1',
@@ -192,7 +192,7 @@ export const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
     }))), /*#__PURE__*/React.createElement(BoxAction, {
       className: 'px-1'

package/es/grid-component/ConvertColumnTable.js

@@ -104,6 +104,7 @@ const ConvertColumnTable = props => {
     locale,
     t,
     buddhistLocale,
+    dataSource,
     dataSourceFilter: propDataSourceFilter,
     format,
     sortMultiple,

package/es/grid-component/EditableCell.js

@@ -125,7 +125,7 @@ const EditableCell = props => {
               });
             }
           },
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate
@@ -165,7 +165,7 @@ const EditableCell = props => {
           },
           showTime: true,
           value: date,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
@@ -216,7 +216,7 @@ const EditableCell = props => {
             height: '100%'
           },
           picker: editType,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDateValue1,
           minDate: minDateValue1,
@@ -233,7 +233,7 @@ const EditableCell = props => {
             height: '100%'
           },
           picker: editType,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxWeekValue,
           minDate: minWeekValue,
@@ -253,6 +253,7 @@ const EditableCell = props => {
             format: timeFormat,
             type: 'mask'
           },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           maxDate: maxTime,
           minDate: minTime,
           disabled: isDisable(column, record) ?? false,
@@ -326,7 +327,7 @@ const EditableCell = props => {
           defaultOpen: column.field === cellEditing?.column.field
           // autoFocus={true}
           ,
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           rowKey: keySelect,
@@ -406,7 +407,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
@@ -460,7 +461,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
@@ -530,7 +531,7 @@ const EditableCell = props => {
             overflow: 'auto'
           },
           treeData: newTreeData,
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           treeDefaultExpandAll: true,
           defaultOpen: column.field === cellEditing?.column.field
           // autoFocus={true}
@@ -744,6 +745,7 @@ const EditableCell = props => {
           customInput: Input
           // valueIsNumericString={true}
           ,
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
           autoComplete: 'off',
           className: classNames('be-cell-editing  rounded-0 input-element', {
             'is-invalid': isInvalid,
@@ -787,6 +789,7 @@ const EditableCell = props => {
           ,
           disabled: isDisable(column, record) ?? false,
           className: classNames('be-cell-editing rounded-0 input-element'),
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
           value: !isNullOrUndefined(value) ? value : '',
           onBlur: () => {
             const formState = getValues();

package/es/grid-component/InternalTable.js

@@ -127,9 +127,20 @@ const InternalTable = props => {
     const newColumns = updateArrayByKey(columns, newColumn, 'field');
     setColumns(newColumns);
   };
+
+  // ============================ RowKey ============================
+  const getRowKey = React.useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    // @ts-ignore
+    return record => record?.[rowKey];
+  }, [rowKey]);
   const [transformSelectionColumns] = useColumns({
     locale,
     t,
+    rowKey,
+    dataSource: mergerdData,
     buddhistLocale,
     dataSourceFilter: propDataSourceFilter,
     format,
@@ -143,15 +154,6 @@ const InternalTable = props => {
     return transformSelectionColumns(columns);
   }, [columns, transformSelectionColumns]);
 
-  // ============================ RowKey ============================
-  const getRowKey = React.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    // @ts-ignore
-    return record => record?.[rowKey];
-  }, [rowKey]);
-
   // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
   const triggerChangeColumns = (newColumns, type) => {
     setColumns(newColumns);
@@ -331,10 +333,12 @@ const InternalTable = props => {
     const handlePasteCallback = callbackData => {
       const newDataUpdate = updateData(dataSource, callbackData, rowKey);
       triggerChangeData(newDataUpdate);
-      onCellPaste?.dataChange?.(newDataUpdate);
+
+      // onCellPaste?.dataChange?.(newDataUpdate)
     };
     if (onCellPaste && onCellPaste.onPasted) {
       if (onCellPaste.onPasted.length > 1) {
+        // có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
@@ -342,6 +346,7 @@ const InternalTable = props => {
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
       } else {
+        // không có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
@@ -349,8 +354,11 @@ const InternalTable = props => {
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
         triggerChangeData(newData);
-        onCellPaste.dataChange?.(newData);
+
+        // onCellPaste.dataChange?.(newData)
       }
+    } else {
+      triggerChangeData(newData);
     }
   };
   const TableComponent = groupAble ? Group : editAble ? GridEdit : Grid;

package/es/grid-component/TableGrid.js

@@ -10,6 +10,7 @@ import classNames from "classnames";
 import { checkDecimalSeparator, checkThousandSeparator,
 // convertFlatColumn,
 isEmpty,
+// newGuid,
 // removeColumns,
 sumDataByField
 // updateArrayByKey
@@ -305,6 +306,7 @@ const TableGrid = props => {
   }), /*#__PURE__*/React.createElement(Table, _extends({
     ref: tableRef
   }, rest, {
+    // id={newGuid()}
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/React.createElement(Empty, {

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

@@ -1,7 +1,8 @@
 import type { AnyObject, IGroupSetting } from "../type";
 export declare const SELECTION_COLUMN: {};
-interface UseColumnsConfig {
+interface UseColumnsConfig<RecordType> {
     t?: any;
+    dataSource: RecordType[];
     buddhistLocale?: any;
     dataSourceFilter?: any;
     locale?: any;
@@ -11,6 +12,7 @@ interface UseColumnsConfig {
     groupAble?: boolean;
     groupSetting?: IGroupSetting;
     groupColumns?: string[];
+    rowKey?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig) => readonly [any];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
 export default useColumns;

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

@@ -4,7 +4,7 @@ import { Fragment, useCallback } from 'react';
 // import Command from "../Command";
 import { Button, Space } from "antd";
 import { Select } from "rc-master-ui";
-import { getTypeFilter } from "./utils";
+import { findItemPath, getTypeFilter } from "./utils";
 import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
 import { flatColumns2, renderContent, renderFilter } from "./columns";
 import { SearchOutlined } from "@ant-design/icons";
@@ -39,7 +39,9 @@ const useColumns = config => {
     handleResize,
     groupAble,
     groupColumns,
-    groupSetting
+    groupSetting,
+    dataSource,
+    rowKey
   } = config;
 
   // ====================== Selections ======================
@@ -138,8 +140,8 @@ const useColumns = config => {
   const transformColumns = useCallback(columns => {
     // >>>>>>>>>>> Support selection
     const cloneColumns = [...columns];
-    const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
-    const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
 
     // ===================== Render =====================
 
@@ -181,7 +183,10 @@ const useColumns = config => {
             onCell: () => ({
               className: 'cell-number'
             }),
-            render: (_, __, rowIndex) => rowIndex + 1
+            render: (val, record) => {
+              // return rowIndex + 1
+              return findItemPath(dataSource, record, rowKey);
+            }
           };
         }
         if (col.key === 'command') {

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

@@ -71,3 +71,4 @@ export declare const checkChild: (inputArray: any[]) => boolean;
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
 export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];
+export declare const findItemPath: (tree: any[], targetItem: any, rowKey: any) => any;

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

@@ -787,4 +787,25 @@ export const isArraysEqual = (arr1, arr2) => {
 };
 export const editAbleColumns = columns => {
   return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
+};
+export const findItemPath = (tree, targetItem, rowKey) => {
+  let result = null;
+  function dfs(nodes, path = []) {
+    for (let i = 0; i < nodes.length; i++) {
+      const currentPath = [...path, i + 1];
+      const node = nodes[i];
+      if (node?.[rowKey] === targetItem?.[rowKey]) {
+        result = currentPath.join('.');
+        return true;
+      }
+      if (node?.children) {
+        if (dfs(node.children, currentPath)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  dfs(tree);
+  return result;
 };

package/es/grid-component/styles.scss

@@ -133,6 +133,21 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
   .#{$prefix}-table-tbody {
 
+
+    .#{$prefix}-table-cell {
+      line-height: 22px;
+
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
+      &.#{$prefix}-table-cell-fix-left-last {
+        .#{$prefix}-table-cell-content {
+        }
+      }
+
+    }
+
     .#{$prefix}-table-row {
 
       &.#{$prefix}-table-row-selected {
@@ -212,6 +227,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
       &.#{$prefix}-table-cell-fix-left-last {
         .#{$prefix}-table-cell-content {
           //overflow: visible;
@@ -604,6 +623,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       background-color: $cell-selected-bg;
     }
 
+    .ui-rc_cell-content.disable {
+      background-color: #f0f0f0;
+    }
+
     .ui-rc_cell-content--index {
       &.focus {
         background-color: $cell-index-focus-bg;
@@ -688,6 +711,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
               transition: 0.3s;
               white-space: nowrap;
               overflow: hidden;
+              line-height: 22px;
             }
           }
         }