es-grid-template 1.1.8 → 1.2.0

package/es/grid-component/ColumnsChoose.js

@@ -154,7 +154,7 @@ export const ColumnsChoose = props => {
       style: {
         marginBottom: 8
       },
-      placeholder: "Search",
+      placeholder: t ? t("Search") : 'Search',
       prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
       onChange: onChange
     }), /*#__PURE__*/React.createElement(Tree, {

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"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}.react-resizable{position:relative;background-clip:padding-box;}.react-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 ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
+})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.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;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.react-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 ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : '50px', props => props.heightTable ? `${props.heightTable}px` : '50px');

package/es/grid-component/InternalTable.js

@@ -87,7 +87,7 @@ const InternalTable = props => {
   // const [expandKeys, setExpandKeys] = useState<string[]>([]);
   const [dataSourceFilter, setDataSourceFilter] = useState(propDataSourceFilter ?? []);
   useEffect(() => {
-    const rs = propsColumns ? [Table.SELECTION_COLUMN, ...propsColumns] : [];
+    const rs = propsColumns && propsColumns.length > 0 ? [Table.SELECTION_COLUMN, ...propsColumns] : [];
     // const  rs = propsColumns ? [...propsColumns] : []
     setColumns(rs);
   }, [propsColumns]);
@@ -305,6 +305,10 @@ const InternalTable = props => {
       if (column.children?.length) {
         return {
           ...column,
+          key: column.field ?? column.dataIndex ?? column.key,
+          title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
+          ellipsis: column.ellipsis !== false,
+          align: column.textAlign ?? column.align,
           children: transformColumns(column.children)
         };
       }

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import type { ColumnsTable, GridTableProps } from "./type";
+import type { ColumnsTable, GetRowKey, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
-    triggerChangeData?: () => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
     tableRef: any;
+    bottomToolbar?: () => React.ReactElement;
+    getRowKey?: GetRowKey<T>;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/es/grid-component/TableGrid.js

@@ -119,6 +119,7 @@ const TableGrid = props => {
     summary,
     showToolbar,
     onSorter,
+    bottomToolbar,
     ...rest
   } = props;
   const {
@@ -317,6 +318,7 @@ const TableGrid = props => {
     },
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
+      // spinning: loading === true,
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
     },
     dataSource: dataSource
@@ -342,7 +344,7 @@ const TableGrid = props => {
         onContextMenu: onContextMenu(data)
       };
     },
-    rowSelection: {
+    rowSelection: columns && columns.length === 0 ? undefined : {
       ...selectionSettings,
       type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
@@ -411,9 +413,9 @@ const TableGrid = props => {
       // @ts-ignore
       , {
         style: {
-          width: `calc(100% - 650px`
+          width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px` : `calc(100% - 25px`
         },
-        items: toolbarItems ?? [],
+        items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
       }), /*#__PURE__*/React.createElement("div", {
         style: {
@@ -464,12 +466,17 @@ const TableGrid = props => {
             },
             className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
           });
+        } else {
+          return /*#__PURE__*/React.createElement("button", {
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
+          });
         }
       }
     }
-  })), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
+  })), bottomToolbar?.(), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({
+    rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,
     size: 'small',

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

@@ -4,7 +4,7 @@ import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
 import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
-import { Key } from "react";
+import type { Key } from "react";
 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;
@@ -37,3 +37,7 @@ export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], ro
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
+export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
+export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: keyof RecordType, data?: RecordType[]) => RecordType[];
+export declare const countItemsBeforeIndex: (array: any[], index: number) => number;
+export declare const getRowNumber: (array: any[], rowKey: any, key: any) => number;

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

@@ -339,4 +339,46 @@ export function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
   }
   dig(data);
   return keys;
-}
+}
+export const flattenArray = arr => {
+  if (!arr) {
+    return [];
+  }
+  return arr.reduce((r, {
+    children,
+    ...rest
+  }) => {
+    r.push(rest);
+    if (children) {
+      r.push(...flattenArray(children));
+    }
+    return r;
+  }, []);
+};
+export const flattenData = (childrenColumnName, data) => {
+  let list = [];
+  (data || []).forEach(record => {
+    list.push(record);
+    if (record && typeof record === 'object' && childrenColumnName in record) {
+      list = [...list, ...flattenData(childrenColumnName, record[childrenColumnName])];
+    }
+  });
+  return list;
+};
+export const countItemsBeforeIndex = (array, index) => {
+  let count = 0;
+  for (let i = 0; i < index; i++) {
+    if (array[i].children && array[i].children.length > 0) {
+      const rs = flattenData('children', [array[i]]);
+      count += rs.length;
+    } else {
+      count++;
+    }
+  }
+  return count;
+};
+export const getRowNumber = (array, rowKey, key) => {
+  // const flattArray = flattenArray(array)
+  const flattArray = flattenData('children', array);
+  return flattArray.findIndex(it => it[key] === rowKey);
+};

package/es/grid-component/styles.scss

@@ -102,13 +102,19 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
       }
 
-      &:has(.indent-level-1) {
-        .ui-rc-table-cell {
-          &.cell-number {
-            padding-left: 15px;
+
+      @for $i from 0 through 10 {
+        &:has(.indent-level-#{$i}) {
+          .ui-rc-table-cell {
+            &.cell-number {
+              .ui-rc_content {
+                padding-left: $i * 10px;
+              }
+            }
           }
         }
       }
+
     }
 
     .ui-rc-table-placeholder {
@@ -306,6 +312,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     }
 
     .#{$prefix}-table-tbody {
+
       .#{$prefix}-table-row {
         &.#{$prefix}-table-row-selected {
           >.#{$prefix}-table-cell {
@@ -317,6 +324,50 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             background: #FBDED6;
           }
         }
+
+        .ui-rc-table-cell {
+
+          .ui-rc-table-row-indent {
+            position: absolute;
+            @for $i from 1 through 10 {
+              &.indent-level-#{$i} {
+                padding-left: $i * 25px;;
+              }
+            }
+          }
+
+          @for $i from 0 through 10 {
+            &:has(.indent-level-#{$i}) {
+
+              .ui-rc-table-row-expand-icon {
+                position: absolute;
+                //.ui-rc_content {
+                padding-left: $i * 10px;
+                //}
+              }
+
+              .ui-rc_cell-content {
+                padding-left: $i * 25px + 8px;
+              }
+
+            }
+          }
+
+          @for $i from 0 through 10 {
+            &:has(.indent-level-#{$i}) {
+
+              .ui-rc-table-row-expand-icon {
+                position: absolute;
+                left: $i * 25px + 8px !important;
+              }
+
+              .ui-rc_cell-content {
+                padding-left: ($i + 1)* 25px + 8px;
+              }
+
+            }
+          }
+        }
       }
 
 

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

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ColumnsTable, GridTableProps } from "../type";
+import type { GetRowKey } from "../type";
 type Props<T> = GridTableProps<T> & {
     tableRef: any;
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -4,8 +4,6 @@ import { GridStyle } from "../GridStyle";
 import TableGrid from "../TableGrid";
 // import type {ColumnsTable} from "../type";
 
-// import {renderContent} from "../hooks/useColumns";
-
 const Grid = props => {
   const {
     height,

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import classNames from "classnames";
-import { Form } from "antd";
+import { Button, Dropdown, Form } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
 import { flatColumns, renderContent } from "../hooks/useColumns";
@@ -13,11 +13,13 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { getEditType, isObjEmpty, totalFixedWidth } from "../hooks";
+import { getEditType, getRowNumber, isObjEmpty, totalFixedWidth } from "../hooks";
 import Message from "../../Message/Message";
 
 // import Command from "../Command";
 
+import { Toolbar } from "rc-master-ui";
+import classnames from "classnames";
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -39,6 +41,7 @@ const GridEdit = props => {
     style,
     getRowKey,
     className,
+    toolbarItems,
     ...rest
   } = props;
 
@@ -49,11 +52,78 @@ const GridEdit = props => {
   const startCell = useRef(null);
   const isSelectingRow = useRef(false);
   const rowStart = useRef(null);
+  const itemsAdd = [{
+    key: '10',
+    label: '10 rows'
+  }, {
+    key: '50',
+    label: '50 rows'
+  }, {
+    key: '100',
+    label: '100 rows'
+  }];
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
   const [selectedCells, setSelectedCells] = useState(new Set());
   const [rowsSelected, setRowsSelected] = useState(new Set());
   const [selectedCell, setSelectedCell] = useState(null);
+  const handleAdd = item => {
+    console.log(item);
+    if (item.onClick) {
+      console.log('cccccccccccccccc');
+    } else {
+      console.log('bbbbbbbbbbbbb');
+    }
+  };
+  const handleDuplicate = () => {};
+  const handleInsertBefore = () => {};
+  const handleInsertAfter = () => {};
+  const handleDeleteAll = () => {};
+  const toolbarItemsBottom = useMemo(() => {
+    return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
+      return {
+        ...item,
+        template: () => {
+          return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+            menu: {
+              items: itemsAdd,
+              onClick: () => handleAdd(item)
+            }
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item')), item.key === 'DUPLICATE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleDuplicate,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertBefore,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertAfter,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')), item.key === 'DELETE' && item.visible !== false && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "primary",
+            variant: 'outlined',
+            onClick: handleDeleteAll,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item')));
+        }
+      };
+    });
+  }, [toolbarItems]);
   const {
     control,
     handleSubmit,
@@ -85,9 +155,10 @@ const GridEdit = props => {
 
         if (!tableBody.contains(event.target)) {
           setEditingKey('');
-          // isSelecting.current = false;
-          // startCell.current = null;
+          isSelecting.current = false;
+          startCell.current = null;
           setSelectedCells(new Set());
+          setRowsSelected(new Set());
         } else {}
       }
     };
@@ -585,20 +656,26 @@ const GridEdit = props => {
         ...column,
         className: 'rc-ui-cell-editable',
         render: (value, record, rowIndex) => {
+          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/React.createElement("div", {
             className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
-              selected: rowsSelected.has(`${rowIndex}-${colIndex}`),
-              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
+              selected: rowsSelected.has(`${rowNumber}-${colIndex}`),
+              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowNumber}-`))
             }),
-            onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
-            onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
-            onClick: () => handleClickRowHeader(rowIndex, colIndex)
+            onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
+            onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
+            onClick: () => handleClickRowHeader(rowNumber, colIndex)
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
           }, rowIndex + 1));
         }
       };
     }
+    if ((column.key || column.field) === 'command') {
+      return {
+        ...column
+      };
+    }
     return {
       ...column,
       // editType: getEditType(column, record),
@@ -679,12 +756,16 @@ const GridEdit = props => {
         tabIndex: (rowIndex ?? 0) * columns.length + colIndex
       }),
       render: (value, record, rowIndex) => {
+        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
-            selected: selectedCells.has(`${rowIndex}-${colIndex}`)
+            // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`)
           }),
-          onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-          onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
+          onMouseDown: event => handleMouseDown(rowNumber, colIndex, event)
+          // onMouseEnter={() => handleMouseEnter(record[rowKey], colIndex)}
+          ,
+          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex)
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
         }, renderContent(column, value, record, rowIndex, format)));
@@ -714,6 +795,18 @@ const GridEdit = props => {
     });
   }, [convertColumns]);
   const mergedColumns = React.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
+  const bottomToolbar = () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Toolbar, {
+      style: {
+        width: '100%'
+      },
+      items: toolbarItemsBottom ?? [],
+      mode: 'scroll'
+      // onClick={({  item }) => {
+      //   console.log('item', item)
+      // }}
+    }));
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -750,6 +843,7 @@ const GridEdit = props => {
       target: 'sorter-icon'
     },
     format: format,
+    toolbarItems: toolbarItems,
     selectionSettings: selectionSettings ? {
       ...selectionSettings,
       checkboxOnly: true
@@ -758,7 +852,8 @@ const GridEdit = props => {
       ...style,
       minHeight: height
     },
-    rowHoverable: false
+    rowHoverable: false,
+    bottomToolbar: bottomToolbar
   }))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

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

@@ -3,12 +3,16 @@ import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
 import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
-import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
+export type ToolbarItem = Omit<RcToolbarItem, 'position'> & {
+    position?: 'Top' | 'Bottom';
+    onClick?: (args: any) => void;
+};
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';

package/lib/grid-component/ColumnsChoose.js

@@ -163,7 +163,7 @@ const ColumnsChoose = props => {
       style: {
         marginBottom: 8
       },
-      placeholder: "Search",
+      placeholder: t ? t("Search") : 'Search',
       prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
       onChange: onChange
     }), /*#__PURE__*/_react.default.createElement(_tree.default, {

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}.react-resizable{position:relative;background-clip:padding-box;}.react-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 ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
+})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.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;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.react-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 ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : '50px', props => props.heightTable ? `${props.heightTable}px` : '50px');

package/lib/grid-component/InternalTable.js

@@ -96,7 +96,7 @@ const InternalTable = props => {
   // const [expandKeys, setExpandKeys] = useState<string[]>([]);
   const [dataSourceFilter, setDataSourceFilter] = (0, _react.useState)(propDataSourceFilter ?? []);
   (0, _react.useEffect)(() => {
-    const rs = propsColumns ? [_rcMasterUi.Table.SELECTION_COLUMN, ...propsColumns] : [];
+    const rs = propsColumns && propsColumns.length > 0 ? [_rcMasterUi.Table.SELECTION_COLUMN, ...propsColumns] : [];
     // const  rs = propsColumns ? [...propsColumns] : []
     setColumns(rs);
   }, [propsColumns]);
@@ -314,6 +314,10 @@ const InternalTable = props => {
       if (column.children?.length) {
         return {
           ...column,
+          key: column.field ?? column.dataIndex ?? column.key,
+          title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
+          ellipsis: column.ellipsis !== false,
+          align: column.textAlign ?? column.align,
           children: transformColumns(column.children)
         };
       }

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import type { ColumnsTable, GridTableProps } from "./type";
+import type { ColumnsTable, GetRowKey, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
-    triggerChangeData?: () => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
     tableRef: any;
+    bottomToolbar?: () => React.ReactElement;
+    getRowKey?: GetRowKey<T>;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/lib/grid-component/TableGrid.js

@@ -126,6 +126,7 @@ const TableGrid = props => {
     summary,
     showToolbar,
     onSorter,
+    bottomToolbar,
     ...rest
   } = props;
   const {
@@ -324,6 +325,7 @@ const TableGrid = props => {
     },
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
+      // spinning: loading === true,
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
     },
     dataSource: dataSource
@@ -349,7 +351,7 @@ const TableGrid = props => {
         onContextMenu: onContextMenu(data)
       };
     },
-    rowSelection: {
+    rowSelection: columns && columns.length === 0 ? undefined : {
       ...selectionSettings,
       type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
@@ -418,9 +420,9 @@ const TableGrid = props => {
       // @ts-ignore
       , {
         style: {
-          width: `calc(100% - 650px`
+          width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px` : `calc(100% - 25px`
         },
-        items: toolbarItems ?? [],
+        items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: {
@@ -471,12 +473,17 @@ const TableGrid = props => {
             },
             className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
           });
+        } else {
+          return /*#__PURE__*/_react.default.createElement("button", {
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
+          });
         }
       }
     }
-  })), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
+  })), bottomToolbar?.(), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
   , (0, _extends2.default)({
+    rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,
     size: 'small',

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

@@ -4,7 +4,7 @@ import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
 import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
-import { Key } from "react";
+import type { Key } from "react";
 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;
@@ -37,3 +37,7 @@ export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], ro
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
+export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
+export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: keyof RecordType, data?: RecordType[]) => RecordType[];
+export declare const countItemsBeforeIndex: (array: any[], index: number) => number;
+export declare const getRowNumber: (array: any[], rowKey: any, key: any) => number;

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

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.customWeekStartEndFormat = exports.convertLabelToTitle = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = void 0;
+exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = void 0;
 exports.findAllChildrenKeys = findAllChildrenKeys;
-exports.getEditType = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = void 0;
+exports.getEditType = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
-exports.updateData = exports.updateColumns = exports.updateArrayByKey = exports.totalFixedWidth = exports.sumDataByField = exports.parseBooleanToValue = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isDisable = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = void 0;
+exports.updateData = exports.updateColumns = exports.updateArrayByKey = exports.totalFixedWidth = exports.sumDataByField = exports.parseBooleanToValue = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isDisable = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowNumber = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -380,4 +380,50 @@ function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
   }
   dig(data);
   return keys;
-}
+}
+const flattenArray = arr => {
+  if (!arr) {
+    return [];
+  }
+  return arr.reduce((r, {
+    children,
+    ...rest
+  }) => {
+    r.push(rest);
+    if (children) {
+      r.push(...flattenArray(children));
+    }
+    return r;
+  }, []);
+};
+exports.flattenArray = flattenArray;
+const flattenData = (childrenColumnName, data) => {
+  let list = [];
+  (data || []).forEach(record => {
+    list.push(record);
+    if (record && typeof record === 'object' && childrenColumnName in record) {
+      list = [...list, ...flattenData(childrenColumnName, record[childrenColumnName])];
+    }
+  });
+  return list;
+};
+exports.flattenData = flattenData;
+const countItemsBeforeIndex = (array, index) => {
+  let count = 0;
+  for (let i = 0; i < index; i++) {
+    if (array[i].children && array[i].children.length > 0) {
+      const rs = flattenData('children', [array[i]]);
+      count += rs.length;
+    } else {
+      count++;
+    }
+  }
+  return count;
+};
+exports.countItemsBeforeIndex = countItemsBeforeIndex;
+const getRowNumber = (array, rowKey, key) => {
+  // const flattArray = flattenArray(array)
+  const flattArray = flattenData('children', array);
+  return flattArray.findIndex(it => it[key] === rowKey);
+};
+exports.getRowNumber = getRowNumber;

package/lib/grid-component/styles.scss

@@ -102,13 +102,19 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
       }
 
-      &:has(.indent-level-1) {
-        .ui-rc-table-cell {
-          &.cell-number {
-            padding-left: 15px;
+
+      @for $i from 0 through 10 {
+        &:has(.indent-level-#{$i}) {
+          .ui-rc-table-cell {
+            &.cell-number {
+              .ui-rc_content {
+                padding-left: $i * 10px;
+              }
+            }
           }
         }
       }
+
     }
 
     .ui-rc-table-placeholder {
@@ -306,6 +312,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     }
 
     .#{$prefix}-table-tbody {
+
       .#{$prefix}-table-row {
         &.#{$prefix}-table-row-selected {
           >.#{$prefix}-table-cell {
@@ -317,6 +324,50 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             background: #FBDED6;
           }
         }
+
+        .ui-rc-table-cell {
+
+          .ui-rc-table-row-indent {
+            position: absolute;
+            @for $i from 1 through 10 {
+              &.indent-level-#{$i} {
+                padding-left: $i * 25px;;
+              }
+            }
+          }
+
+          @for $i from 0 through 10 {
+            &:has(.indent-level-#{$i}) {
+
+              .ui-rc-table-row-expand-icon {
+                position: absolute;
+                //.ui-rc_content {
+                padding-left: $i * 10px;
+                //}
+              }
+
+              .ui-rc_cell-content {
+                padding-left: $i * 25px + 8px;
+              }
+
+            }
+          }
+
+          @for $i from 0 through 10 {
+            &:has(.indent-level-#{$i}) {
+
+              .ui-rc-table-row-expand-icon {
+                position: absolute;
+                left: $i * 25px + 8px !important;
+              }
+
+              .ui-rc_cell-content {
+                padding-left: ($i + 1)* 25px + 8px;
+              }
+
+            }
+          }
+        }
       }
 
 

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

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ColumnsTable, GridTableProps } from "../type";
+import type { GetRowKey } from "../type";
 type Props<T> = GridTableProps<T> & {
     tableRef: any;
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -13,8 +13,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 type {ColumnsTable} from "../type";
 
-// import {renderContent} from "../hooks/useColumns";
-
 const Grid = props => {
   const {
     height,

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

@@ -22,6 +22,7 @@ require("dayjs/locale/vi");
 var _TableGrid = _interopRequireDefault(require("../TableGrid"));
 var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
+var _rcMasterUi = require("rc-master-ui");
 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 Command from "../Command";
@@ -47,6 +48,7 @@ const GridEdit = props => {
     style,
     getRowKey,
     className,
+    toolbarItems,
     ...rest
   } = props;
 
@@ -57,11 +59,78 @@ const GridEdit = props => {
   const startCell = (0, _react.useRef)(null);
   const isSelectingRow = (0, _react.useRef)(false);
   const rowStart = (0, _react.useRef)(null);
+  const itemsAdd = [{
+    key: '10',
+    label: '10 rows'
+  }, {
+    key: '50',
+    label: '50 rows'
+  }, {
+    key: '100',
+    label: '100 rows'
+  }];
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
   const [selectedCells, setSelectedCells] = (0, _react.useState)(new Set());
   const [rowsSelected, setRowsSelected] = (0, _react.useState)(new Set());
   const [selectedCell, setSelectedCell] = (0, _react.useState)(null);
+  const handleAdd = item => {
+    console.log(item);
+    if (item.onClick) {
+      console.log('cccccccccccccccc');
+    } else {
+      console.log('bbbbbbbbbbbbb');
+    }
+  };
+  const handleDuplicate = () => {};
+  const handleInsertBefore = () => {};
+  const handleInsertAfter = () => {};
+  const handleDeleteAll = () => {};
+  const toolbarItemsBottom = (0, _react.useMemo)(() => {
+    return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
+      return {
+        ...item,
+        template: () => {
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            menu: {
+              items: itemsAdd,
+              onClick: () => handleAdd(item)
+            }
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item')), item.key === 'DUPLICATE' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleDuplicate,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertBefore,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertAfter,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')), item.key === 'DELETE' && item.visible !== false && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "primary",
+            variant: 'outlined',
+            onClick: handleDeleteAll,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item')));
+        }
+      };
+    });
+  }, [toolbarItems]);
   const {
     control,
     handleSubmit,
@@ -93,9 +162,10 @@ const GridEdit = props => {
 
         if (!tableBody.contains(event.target)) {
           setEditingKey('');
-          // isSelecting.current = false;
-          // startCell.current = null;
+          isSelecting.current = false;
+          startCell.current = null;
           setSelectedCells(new Set());
+          setRowsSelected(new Set());
         } else {}
       }
     };
@@ -593,20 +663,26 @@ const GridEdit = props => {
         ...column,
         className: 'rc-ui-cell-editable',
         render: (value, record, rowIndex) => {
+          const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
-              selected: rowsSelected.has(`${rowIndex}-${colIndex}`),
-              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
+              selected: rowsSelected.has(`${rowNumber}-${colIndex}`),
+              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowNumber}-`))
             }),
-            onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
-            onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
-            onClick: () => handleClickRowHeader(rowIndex, colIndex)
+            onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
+            onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
+            onClick: () => handleClickRowHeader(rowNumber, colIndex)
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
           }, rowIndex + 1));
         }
       };
     }
+    if ((column.key || column.field) === 'command') {
+      return {
+        ...column
+      };
+    }
     return {
       ...column,
       // editType: getEditType(column, record),
@@ -687,12 +763,16 @@ const GridEdit = props => {
         tabIndex: (rowIndex ?? 0) * columns.length + colIndex
       }),
       render: (value, record, rowIndex) => {
+        const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
-            selected: selectedCells.has(`${rowIndex}-${colIndex}`)
+            // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`)
           }),
-          onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-          onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
+          onMouseDown: event => handleMouseDown(rowNumber, colIndex, event)
+          // onMouseEnter={() => handleMouseEnter(record[rowKey], colIndex)}
+          ,
+          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex)
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
         }, (0, _useColumns.renderContent)(column, value, record, rowIndex, format)));
@@ -722,6 +802,18 @@ const GridEdit = props => {
     });
   }, [convertColumns]);
   const mergedColumns = _react.default.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
+  const bottomToolbar = () => {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+      style: {
+        width: '100%'
+      },
+      items: toolbarItemsBottom ?? [],
+      mode: 'scroll'
+      // onClick={({  item }) => {
+      //   console.log('item', item)
+      // }}
+    }));
+  };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     heightTable: height,
     style: {
@@ -758,6 +850,7 @@ const GridEdit = props => {
       target: 'sorter-icon'
     },
     format: format,
+    toolbarItems: toolbarItems,
     selectionSettings: selectionSettings ? {
       ...selectionSettings,
       checkboxOnly: true
@@ -766,7 +859,8 @@ const GridEdit = props => {
       ...style,
       minHeight: height
     },
-    rowHoverable: false
+    rowHoverable: false,
+    bottomToolbar: bottomToolbar
   }))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {

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

@@ -3,12 +3,16 @@ import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
 import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
-import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
+export type ToolbarItem = Omit<RcToolbarItem, 'position'> & {
+    position?: 'Top' | 'Bottom';
+    onClick?: (args: any) => void;
+};
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';

package/package.json

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