es-grid-template 1.7.22 → 1.7.24

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

@@ -0,0 +1,23 @@
+import type { ColumnDef, ColumnPinningState, ExpandedState, VisibilityState } from '@tanstack/react-table';
+import type { ColumnsTable, Sorter, TableProps } from '../type';
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+type Props<T> = Omit<TableProps<T>, 'columns'> & {
+    id: string;
+    rowKey: string;
+    prefix: string;
+    columns: ColumnDef<T>[];
+    propsColumns: ColumnsTable;
+    columnVisibility: VisibilityState;
+    expanded: ExpandedState;
+    columnPinning: ColumnPinningState;
+    originData: T[];
+    mergedFilterKeys: any;
+    setMergedFilterKeys: any;
+    isFullScreen: boolean;
+    triggerFilter: Dispatch<SetStateAction<any>>;
+    triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+};
+declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default Grid;

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

@@ -0,0 +1,313 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reactTable = require("@tanstack/react-table");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _becoxyIcons = require("becoxy-icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMasterUi = require("rc-master-ui");
+var _react = _interopRequireDefault(require("react"));
+var _ColumnsChoose = require("../ColumnsChoose");
+var _TableContainer = _interopRequireDefault(require("../TableContainer"));
+var _operator = require("../features/operator");
+var _utils = require("../hook/utils");
+// import { makeData } from "../default/makeData";
+
+// import {  flattenArray, getFixedFields, getInvisibleColumns, unFlattenData, updateOrInsert } from './hook/utils'
+
+// import { faker } from '@faker-js/faker'
+
+const Grid = props => {
+  const {
+    t,
+    id,
+    prefix,
+    dataSource,
+    originData,
+    columns,
+    propsColumns,
+    pagination,
+    expanded,
+    columnVisibility,
+    columnPinning,
+    selectionSettings,
+    rowSelected,
+    sortMultiple,
+    triggerSorter,
+    triggerFilter,
+    setMergedFilterKeys,
+    onSorter,
+    onFilter,
+    showToolbar,
+    isFullScreen,
+    fullScreen,
+    toolbarItems,
+    actionTemplate,
+    showColumnChoose,
+    groupColumns,
+    height,
+    ...rest
+  } = props;
+  const bottomToolbarRef = _react.default.useRef(null);
+  const topToolbarRef = _react.default.useRef(null);
+  const [tableHeight, settableHeight] = _react.default.useState(0);
+  const [columnResizeMode] = _react.default.useState('onChange');
+  const [columnResizeDirection] = _react.default.useState('ltr');
+  const [paginationState, setPagination] = _react.default.useState({
+    pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
+    pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
+  });
+  const [rowSelection, setRowSelection] = _react.default.useState({});
+  const [grouping, setGrouping] = _react.default.useState([]);
+  const [columnSizing, setColumnSizing] = _react.default.useState({});
+  const [columnFilters, setColumnFilters] = _react.default.useState([]);
+  const [operator, setOperator] = _react.default.useState([]);
+  const [sorting, setSorting] = _react.default.useState([]);
+  const [columnOrder, setColumnOrder] = _react.default.useState(() => columns.map(c => c.id));
+  const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
+    isChange: false,
+    type: '',
+    rowData: {}
+  });
+  const [sorterChange, setSorterChange] = _react.default.useState(false);
+  const [filterChange, setFilterChange] = _react.default.useState(false);
+  const table = (0, _reactTable.useReactTable)({
+    _features: [_operator.OperatorFeature],
+    data: dataSource,
+    columns: columns,
+    state: {
+      rowSelection,
+      expanded,
+      columnPinning,
+      columnVisibility,
+      pagination: pagination ? paginationState : undefined,
+      grouping,
+      columnSizing,
+      columnOrder,
+      columnFilters,
+      operator,
+      sorting
+    },
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getRowId(originalRow) {
+      return originalRow.rowId;
+    },
+    getSubRows: row => row.children,
+    // RowSelection
+    enableSubRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
+    enableMultiRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    // RowSelection
+
+    // ColumnSizing
+    columnResizeMode,
+    columnResizeDirection,
+    onColumnSizingChange: setColumnSizing,
+    // ColumnSizing
+
+    // ColumnSorting
+    // getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    enableMultiSort: sortMultiple,
+    isMultiSortEvent: () => sortMultiple ? true : false,
+    // ColumnSorting
+
+    onColumnFiltersChange: setColumnFilters,
+    onColumnOperatorChange: setOperator,
+    // getFilteredRowModel: getFilteredRowModel(),
+
+    onColumnOrderChange: setColumnOrder,
+    onGroupingChange: setGrouping,
+    getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
+    // onExpandedChange: setExpanded,
+    getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
+    getPaginationRowModel: pagination ? (0, _reactTable.getPaginationRowModel)() : undefined,
+    onPaginationChange: setPagination,
+    // onColumnVisibilityChange: setColumnVisibility,
+    // onColumnPinningChange,
+
+    debugTable: true
+  });
+  _react.default.useEffect(() => {
+    if (isSelectionChange.isChange) {
+      const aa = table.getState().rowSelection;
+      const dataTable = table.getRowModel().flatRows;
+      const ids = Object.keys(aa);
+      const ssss = dataTable.filter(it => ids.includes(it.id));
+      const rs = ssss.map(it => it.original);
+      rowSelected?.({
+        type: isSelectionChange.type,
+        rowData: isSelectionChange.rowData,
+        selected: rs
+      });
+    }
+  }, [isSelectionChange, rowSelected, rowSelection, table]);
+  _react.default.useEffect(() => {
+    if (sorterChange) {
+      const aa = table.getState().sorting;
+      const rs = aa.map(it => {
+        return {
+          columnKey: it.id,
+          field: it.id,
+          order: it.desc ? 'descend' : 'ascend'
+        };
+      });
+      if (onSorter) {
+        onSorter?.(rs);
+      } else {
+        triggerSorter(rs);
+      }
+    }
+  }, [onSorter, sorterChange, sorting, table, triggerSorter]);
+  _react.default.useEffect(() => {
+    if (filterChange) {
+      // const filterState = table.getState().columnFilters
+      const operatorState = table.getState().operator;
+      const merged = columnFilters.map(filter => {
+        const match = operatorState.find(op => op.id === filter.id);
+        const col = table.getVisibleFlatColumns().find(it => it.id === filter.id)?.columnDef.meta;
+        return {
+          field: filter.id,
+          key: filter.id,
+          column: col,
+          filteredKeys: filter.value,
+          operator: match ? match.operator : undefined
+          // ...(match && { operator: match.operator })
+        };
+      });
+      if (onFilter) {
+        onFilter?.((0, _utils.convertFilters)(merged));
+      } else {
+        triggerFilter((0, _utils.convertFilters)(merged));
+        const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
+        setMergedFilterKeys((0, _utils.getAllRowKey)(b));
+      }
+    }
+  }, [filterChange, onFilter, originData, setMergedFilterKeys, table, triggerFilter, columnFilters]);
+  _react.default.useEffect(() => {
+    const totalHeight = height;
+    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    }
+  }, [id, columns, height]);
+
+  // reorder columns after drag & drop
+  function handleDragEnd(event) {
+    const {
+      active,
+      over
+    } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder(cols => {
+        const oldIndex = cols.indexOf(active.id);
+        const newIndex = cols.indexOf(over.id);
+        return (0, _sortable.arrayMove)(cols, oldIndex, newIndex); //this is just a splice util
+      });
+    }
+  }
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefix}-grid`,
+    style: {
+      height: height ?? undefined
+    }
+  }, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/_react.default.createElement("div", {
+    ref: topToolbarRef,
+    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    rootClassName: 'top-pagination',
+    showTotal: (total, range) =>
+    // @ts-ignore
+    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    columns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns
+    // triggerChangeColumns={triggerChangeColumns}
+  })))), /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToHorizontalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
+  }, /*#__PURE__*/_react.default.createElement(_TableContainer.default, (0, _extends2.default)({}, rest, {
+    id: id,
+    table: table,
+    editAble: false,
+    dataSource: dataSource,
+    originData: originData,
+    prefix: prefix,
+    selectionSettings: selectionSettings,
+    setIsSelectionChange: setIsSelectionChange,
+    setSorterChange: setSorterChange,
+    setFilterChange: setFilterChange,
+    tableHeight: tableHeight
+    // setMergedFilterKeys={setMergedFilterKeys}
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: bottomToolbarRef
+  }, pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
+  // style={{padding: '0.75rem 1rem'}}
+  , {
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: paginationState.pageSize,
+    pageSizeOptions: [20, 50, 100, 1000, 10000],
+    onChange: (page, pageSize) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize);
+      } else {
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize);
+      }
+    }
+  })));
+};
+var _default = exports.default = Grid;

package/lib/table-component/table/GridEdit.d.ts

@@ -0,0 +1,23 @@
+import type { ColumnDef, ColumnPinningState, ExpandedState, VisibilityState } from '@tanstack/react-table';
+import type { ColumnsTable, Sorter, TableProps } from '../type';
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+type Props<T> = Omit<TableProps<T>, 'columns'> & {
+    id: string;
+    rowKey: string;
+    prefix: string;
+    columns: ColumnDef<T>[];
+    propsColumns: ColumnsTable;
+    columnVisibility: VisibilityState;
+    expanded: ExpandedState;
+    columnPinning: ColumnPinningState;
+    originData: T[];
+    mergedFilterKeys: any;
+    setMergedFilterKeys: any;
+    isFullScreen: boolean;
+    triggerFilter: Dispatch<SetStateAction<any>>;
+    triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+};
+declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default GridEdit;

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

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reactTable = require("@tanstack/react-table");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
+var _react = _interopRequireDefault(require("react"));
+var _operator = require("../features/operator");
+var _utils = require("../hook/utils");
+var _TableContainerEdit = _interopRequireDefault(require("../TableContainerEdit"));
+// import { makeData } from "../default/makeData";
+
+// import {  flattenArray, getFixedFields, getInvisibleColumns, unFlattenData, updateOrInsert } from './hook/utils'
+
+// import { faker } from '@faker-js/faker'
+
+const GridEdit = props => {
+  const {
+    t,
+    id,
+    prefix,
+    dataSource,
+    originData,
+    columns,
+    propsColumns,
+    pagination,
+    expanded,
+    columnVisibility,
+    columnPinning,
+    selectionSettings,
+    rowSelected,
+    sortMultiple,
+    triggerSorter,
+    triggerFilter,
+    setMergedFilterKeys,
+    onSorter,
+    onFilter,
+    // showToolbar,
+    // isFullScreen,
+    // fullScreen,
+    // toolbarItems,
+    actionTemplate,
+    // showColumnChoose,
+    groupColumns,
+    height,
+    onDataChange,
+    onCellPaste,
+    ...rest
+  } = props;
+  const ref = _react.default.useRef(null);
+
+  // const bottomToolbarRef = React.useRef<HTMLDivElement>(null)
+  // const topToolbarRef: any = React.useRef<HTMLDivElement>(null)
+
+  const [columnResizeMode] = _react.default.useState('onChange');
+  const [columnResizeDirection] = _react.default.useState('ltr');
+  const [paginationState, setPagination] = _react.default.useState({
+    pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
+    pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
+  });
+  const [rowSelection, setRowSelection] = _react.default.useState({});
+  const [grouping, setGrouping] = _react.default.useState([]);
+  const [columnSizing, setColumnSizing] = _react.default.useState({});
+  const [columnFilters, setColumnFilters] = _react.default.useState([]);
+  const [operator, setOperator] = _react.default.useState([]);
+  const [sorting, setSorting] = _react.default.useState([]);
+  const [columnOrder, setColumnOrder] = _react.default.useState(() => columns.map(c => c.id));
+  const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
+    isChange: false,
+    type: '',
+    rowData: {}
+  });
+  const [sorterChange, setSorterChange] = _react.default.useState(false);
+  const [filterChange, setFilterChange] = _react.default.useState(false);
+  const table = (0, _reactTable.useReactTable)({
+    _features: [_operator.OperatorFeature],
+    data: dataSource,
+    columns: columns,
+    state: {
+      rowSelection,
+      expanded,
+      columnPinning,
+      columnVisibility,
+      pagination: pagination ? paginationState : undefined,
+      grouping,
+      columnSizing,
+      columnOrder,
+      columnFilters,
+      operator,
+      sorting
+    },
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getRowId(originalRow) {
+      return originalRow.rowId;
+    },
+    getSubRows: row => row.children,
+    // RowSelection
+    enableSubRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
+    enableMultiRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    // RowSelection
+
+    // ColumnSizing
+    columnResizeMode,
+    columnResizeDirection,
+    onColumnSizingChange: setColumnSizing,
+    // ColumnSizing
+
+    // ColumnSorting
+    // getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    enableMultiSort: sortMultiple,
+    isMultiSortEvent: () => sortMultiple ? true : false,
+    // ColumnSorting
+
+    onColumnFiltersChange: setColumnFilters,
+    onColumnOperatorChange: setOperator,
+    // getFilteredRowModel: getFilteredRowModel(),
+
+    onColumnOrderChange: setColumnOrder,
+    onGroupingChange: setGrouping,
+    getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
+    // onExpandedChange: setExpanded,
+    getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
+    getPaginationRowModel: pagination ? (0, _reactTable.getPaginationRowModel)() : undefined,
+    onPaginationChange: setPagination,
+    // onColumnVisibilityChange: setColumnVisibility,
+    // onColumnPinningChange,
+
+    debugTable: true
+  });
+  _react.default.useEffect(() => {
+    if (isSelectionChange.isChange) {
+      const aa = table.getState().rowSelection;
+      const dataTable = table.getRowModel().flatRows;
+      const ids = Object.keys(aa);
+      const ssss = dataTable.filter(it => ids.includes(it.id));
+      const rs = ssss.map(it => it.original);
+      rowSelected?.({
+        type: isSelectionChange.type,
+        rowData: isSelectionChange.rowData,
+        selected: rs
+      });
+    }
+  }, [isSelectionChange, rowSelected, rowSelection, table]);
+  _react.default.useEffect(() => {
+    if (sorterChange) {
+      const aa = table.getState().sorting;
+      const rs = aa.map(it => {
+        return {
+          columnKey: it.id,
+          field: it.id,
+          order: it.desc ? 'descend' : 'ascend'
+        };
+      });
+      if (onSorter) {
+        onSorter?.(rs);
+      } else {
+        triggerSorter(rs);
+      }
+    }
+  }, [onSorter, sorterChange, sorting, table, triggerSorter]);
+  _react.default.useEffect(() => {
+    if (filterChange) {
+      // const filterState = table.getState().columnFilters
+      const operatorState = table.getState().operator;
+      const merged = columnFilters.map(filter => {
+        const match = operatorState.find(op => op.id === filter.id);
+        const col = table.getVisibleFlatColumns().find(it => it.id === filter.id)?.columnDef.meta;
+        return {
+          field: filter.id,
+          key: filter.id,
+          column: col,
+          filteredKeys: filter.value,
+          operator: match ? match.operator : undefined
+          // ...(match && { operator: match.operator })
+        };
+      });
+      if (onFilter) {
+        onFilter?.((0, _utils.convertFilters)(merged));
+      } else {
+        triggerFilter((0, _utils.convertFilters)(merged));
+        const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
+        setMergedFilterKeys((0, _utils.getAllRowKey)(b));
+      }
+    }
+  }, [filterChange, onFilter, originData, setMergedFilterKeys, table, triggerFilter, columnFilters]);
+
+  // React.useEffect(() => {
+  //   const totalHeight = height
+
+  //   if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+  //     settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight)
+  //   }
+  // }, [id, columns, height])
+
+  // reorder columns after drag & drop
+  function handleDragEnd(event) {
+    const {
+      active,
+      over
+    } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder(cols => {
+        const oldIndex = cols.indexOf(active.id);
+        const newIndex = cols.indexOf(over.id);
+        return (0, _sortable.arrayMove)(cols, oldIndex, newIndex); //this is just a splice util
+      });
+    }
+  }
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
+  const triggerChangeData = newData => {
+    onDataChange?.(newData);
+  };
+  const triggerPaste = (pastedRows, pastedColumnsArray, newData, copyRows) => {
+    const handlePasteCallback = callbackData => {
+      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...dataSource]), callbackData);
+      const rs = (0, _utils.unFlattenData)(rsFilterData);
+      triggerChangeData(rs);
+    };
+    if (onCellPaste && onCellPaste.onPasted) {
+      if (onCellPaste.onPasted.length > 1) {
+        // có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          copyRows,
+          type: 'onPaste',
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+      } else {
+        // không có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          copyRows,
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+        triggerChangeData(newData);
+      }
+    } else {
+      triggerChangeData(newData);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefix}-grid`,
+    style: {
+      height: height ?? undefined
+    },
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToHorizontalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
+  }, /*#__PURE__*/_react.default.createElement(_TableContainerEdit.default, (0, _extends2.default)({}, rest, {
+    id: id,
+    table: table,
+    editAble: true,
+    dataSource: dataSource,
+    originData: originData,
+    prefix: prefix,
+    selectionSettings: selectionSettings,
+    setIsSelectionChange: setIsSelectionChange,
+    setSorterChange: setSorterChange,
+    setFilterChange: setFilterChange,
+    height: height,
+    expanded: expanded,
+    pagination: pagination,
+    setExpanded: () => {},
+    setMergedFilterKeys: setMergedFilterKeys,
+    triggerChangeData: triggerChangeData,
+    triggerPaste: triggerPaste
+  }))));
+};
+var _default = exports.default = GridEdit;