es-grid-template 1.8.64 → 1.8.66

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

@@ -0,0 +1,37 @@
+import type { ColumnDef, ColumnFiltersState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, Table, VisibilityState } from '@tanstack/react-table';
+import type { ColumnsTable, Sorter, TableProps } from '../../table-component/type';
+import type { Dispatch, Key, SetStateAction } from 'react';
+import React from 'react';
+type Props<T> = Omit<TableProps<T>, 'columns'> & {
+    id: string;
+    table: Table<T>;
+    rowKey: string;
+    prefix: string;
+    columns: ColumnDef<T>[];
+    propsColumns: ColumnsTable<T>;
+    setColumns: Dispatch<SetStateAction<ColumnsTable<T>>>;
+    columnHidden: VisibilityState;
+    expanded: ExpandedState;
+    setExpanded: any;
+    columnPinning: ColumnPinningState;
+    originData: T[];
+    mergedFilterKeys: any;
+    setMergedFilterKeys: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    triggerFilter: (args: any) => void;
+    triggerSorter: (args: Sorter[]) => void;
+    onContextMenu?: (data: T) => (event: any) => void;
+    triggerChangeColumns?: (args: any, keys: any, type: string) => void;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+    windowSize: any;
+    isDataTree: boolean;
+    mergedSelectedKeys: Key[];
+    setColumnSizing: Dispatch<SetStateAction<any>>;
+    columnSizingInfo: ColumnSizingInfoState;
+    columnSizing: ColumnSizingState;
+    columnFilters: ColumnFiltersState;
+    setColumnOrder?: Dispatch<SetStateAction<string[]>>;
+};
+declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default Grid;

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

@@ -0,0 +1,307 @@
+"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 _antd = require("antd");
+var _faker = require("@faker-js/faker");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../hook/utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _TableContainer = _interopRequireDefault(require("./TableContainer"));
+var _style = require("../style");
+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; }
+const Grid = props => {
+  const {
+    theme,
+    t,
+    id,
+    prefix,
+    dataSource,
+    originData,
+    columns,
+    propsColumns,
+    setColumns,
+    pagination,
+    expanded,
+    setExpanded,
+    columnHidden,
+    columnPinning,
+    selectionSettings,
+    rowSelected,
+    sortMultiple,
+    triggerSorter,
+    triggerFilter,
+    setMergedFilterKeys,
+    onSorter,
+    onFilter,
+    allowFiltering,
+    allowSortering,
+    // groupColumns,
+    // height= 700,
+    height,
+    minHeight,
+    editAble,
+    triggerChangeColumns,
+    infiniteScroll,
+    mergedSelectedKeys,
+    allowResizing,
+    windowSize,
+    table,
+    columnSizing,
+    columnSizingInfo,
+    setColumnSizing,
+    columnFilters,
+    setColumnOrder,
+    rowSelection,
+    ...rest
+  } = props;
+
+  // const [columnResizeMode] = React.useState<ColumnResizeMode>('onChange')
+
+  // const [columnResizeDirection] = React.useState<ColumnResizeDirection>('ltr')
+
+  // const [paginationState, setPagination] = React.useState<PaginationState>({
+  //   pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
+  //   pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
+  // })
+
+  // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+
+  // const [grouping, setGrouping] = React.useState<GroupingState>([])
+
+  // const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({})
+  // const [columnSizingInfo, setColumnSizingInfo] = React.useState<ColumnSizingInfoState>({} as ColumnSizingInfoState)
+
+  // const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+
+  // const [operator, setOperator] = React.useState<ColumnOperatorState>([])
+  // const [sorting, setSorting] = React.useState<SortingState>([])
+
+  // const [columnOrder, setColumnOrder] = React.useState<string[]>(() => columns.map(c => c.id!))
+
+  const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
+    isChange: false,
+    type: '',
+    rowData: {},
+    rowsData: []
+  });
+  const [sorterChange, setSorterChange] = _react.default.useState(false);
+  const [filterChange, setFilterChange] = _react.default.useState(false);
+  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
+
+  // React.useEffect(() => {
+
+  //   const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection)
+
+  //   if (!isEqual) {
+
+  //     setRowSelection(convertToObjTrue(mergedSelectedKeys))
+  //   }
+
+  // }, [mergedSelectedKeys])
+
+  _react.default.useEffect(() => {
+    if (isSelectionChange.isChange) {
+      const aa = table.getState().rowSelection;
+      const ids = Object.keys(aa);
+      const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
+
+      const rs = ssss.map(it => it.original);
+      rowSelected?.({
+        type: isSelectionChange.type,
+        rowData: isSelectionChange.rowData,
+        selected: rs
+      });
+    }
+  }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
+  _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);
+      }
+      setSorterChange(false);
+    }
+  }, [onSorter, sorterChange, table, triggerSorter]);
+  _react.default.useEffect(() => {
+    if (filterChange) {
+      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
+        };
+      });
+      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]);
+
+  // 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 ContainerComponent = _TableContainer.default;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_style.GridStyle, {
+    $prefix: prefix,
+    $theme: {
+      theme: theme?.theme,
+      ...theme
+    },
+    className: (0, _classnames.default)(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+    }),
+    style: {
+      minHeight: minHeight ?? undefined,
+      maxHeight: height ?? undefined,
+      backgroundColor: theme?.backgroundColor ?? undefined
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToHorizontalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
+  }, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
+    id: id,
+    t: t,
+    windowSize: windowSize,
+    table: table,
+    editAble: editAble,
+    dataSource: dataSource,
+    originData: originData,
+    prefix: prefix,
+    selectionSettings: selectionSettings,
+    isSelectionChange: isSelectionChange,
+    setIsSelectionChange: setIsSelectionChange,
+    setSorterChange: setSorterChange,
+    setFilterChange: setFilterChange,
+    height: height ?? minHeight ?? 700,
+    minHeight: minHeight,
+    pagination: pagination,
+    columns: columns,
+    propsColumns: propsColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden,
+    setExpanded: setExpanded,
+    expanded: expanded,
+    infiniteScroll: infiniteScroll,
+    setMergedFilterKeys: setMergedFilterKeys,
+    setColumnSizing: setColumnSizing,
+    setColumns: setColumns,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    open: isFullScreen,
+    footer: null,
+    centered: true,
+    closable: true,
+    width: '100%',
+    style: {
+      maxWidth: '100%',
+      height: '100%'
+    },
+    onCancel: () => setIsFullScreen(false),
+    styles: {
+      content: {
+        height: '100vh',
+        borderRadius: 0,
+        padding: '15px 10px'
+      },
+      wrapper: {
+        zIndex: 1050
+      }
+    },
+    destroyOnClose: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingTop: 40
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+    }),
+    style: {
+      // minHeight: minHeight ?? undefined,
+      maxHeight: windowSize.innerHeight - 70
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToHorizontalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
+  }, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
+    id: _faker.faker.string.alpha(20),
+    t: t,
+    table: table,
+    editAble: editAble,
+    dataSource: dataSource,
+    originData: originData,
+    prefix: prefix,
+    selectionSettings: selectionSettings,
+    isSelectionChange: isSelectionChange,
+    setIsSelectionChange: setIsSelectionChange,
+    setSorterChange: setSorterChange,
+    setFilterChange: setFilterChange,
+    height: windowSize.innerHeight - 70,
+    minHeight: minHeight,
+    pagination: pagination,
+    columns: columns,
+    windowSize: windowSize,
+    propsColumns: propsColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden,
+    setExpanded: setExpanded,
+    expanded: expanded,
+    infiniteScroll: infiniteScroll,
+    setMergedFilterKeys: setMergedFilterKeys,
+    setColumns: setColumns,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    setColumnSizing: setColumnSizing,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo
+  })))))));
+};
+var _default = exports.default = Grid;

package/lib/table-virtuoso/table/TableContainer.d.ts

@@ -0,0 +1,49 @@
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+import type { ColumnDef, ColumnSizingInfoState, ColumnSizingState, Table } from '@tanstack/react-table';
+import type { ColumnsTable, TableProps } from '../../table-component/type';
+type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
+    table: Table<T>;
+    prefix: string;
+    id: string;
+    rowKey: any;
+    originData: T[];
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+    setSorterChange: Dispatch<SetStateAction<boolean>>;
+    setFilterChange: Dispatch<SetStateAction<boolean>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    windowSize: {
+        innerHeight: number;
+        innerWidth: number;
+    };
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    propsColumns: ColumnsTable;
+    triggerChangeColumns: any;
+    columnHidden: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    isDataTree: boolean;
+    setColumnSizing: Dispatch<SetStateAction<any>>;
+    setColumns: Dispatch<SetStateAction<any>>;
+    columnSizingInfo: ColumnSizingInfoState;
+    columnSizing: ColumnSizingState;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+};
+declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
+export default TableContainer;

package/lib/table-virtuoso/table/TableContainer.js

@@ -0,0 +1,300 @@
+"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 _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _rcMasterUi = require("rc-master-ui");
+var _becoxyIcons = require("becoxy-icons");
+var _reactNumericComponent = require("react-numeric-component");
+var _TableWrapper = _interopRequireDefault(require("./TableWrapper"));
+var _ColumnsChoose = require("../../table-component/ColumnsChoose");
+var _utils = require("../hook/utils");
+var _useContext = require("../useContext");
+var _utils2 = require("../../table-component/hook/utils");
+var _ColumnsGroup = require("../ColumnsGroup");
+// import type { Dispatch, SetStateAction } from 'react'
+
+// import { ColumnsGroup } from '../../grid-component/ColumnsGroup';
+
+const TableContainer = props => {
+  const {
+    t,
+    table,
+    id,
+    prefix,
+    commandClick,
+    editAble,
+    rowKey,
+    format,
+    dataSource,
+    originData,
+    expandable,
+    wrapSettings,
+    recordDoubleClick,
+    // triggerFilter,
+    selectionSettings,
+    isSelectionChange,
+    setIsSelectionChange,
+    onContextMenu,
+    // contextMenuItems,
+    setSorterChange,
+    setFilterChange,
+    height,
+    minHeight,
+    showToolbar,
+    toolbarItems,
+    actionTemplate,
+    pagination,
+    fullScreen,
+    showColumnChoose,
+    // summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    triggerGroupColumns,
+    columnHidden,
+    expanded,
+    setExpanded,
+    // showEmptyText,
+    infiniteScroll,
+    // next,
+    // loading,
+    windowSize,
+    // contextMenuOpen,
+    // contextMenuClick,
+    // contextMenuHidden,
+    isFullScreen,
+    setIsFullScreen,
+    isDataTree,
+    // setColumns,
+    // columnSizing,
+    // columnSizingInfo,
+    rowClassName,
+    onRowStyles,
+    onRowFooterStyles,
+    onRowHeaderStyles,
+    title,
+    groupSetting
+  } = props;
+  const tableContainerRef = _react.default.useRef(null);
+  const containerRef = _react.default.useRef(null);
+  const bottomToolbarRef = _react.default.useRef(null);
+  const topToolbarRef = _react.default.useRef(null);
+  const [tableHeight, settableHeight] = _react.default.useState(0);
+  _react.default.useEffect(() => {
+    // const totalHeight = minHeight ?? height
+    const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
+    if (totalHeight) {
+      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
+      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
+      settableHeight(totalHeight - topHeight - bottomHeight);
+    }
+  }, [id, height, editAble, minHeight]);
+  _react.default.useEffect(() => {
+    const handleClickOutside = () => {
+
+      // setFocusedCell(undefined)
+      // setIsSelectionChange((prev) => (
+      //   {
+      //     ...prev,
+      //     isChange: false
+      //   }
+      // ))
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  const triggerCommandClick = args => {
+    // const { id: idCommand, rowId, rowData, index } = args
+
+    // const tmpData = [...dataSource]
+
+    if (commandClick) {
+      commandClick({
+        ...args,
+        rows: originData
+      });
+    }
+  };
+  const handleOnGroup = value => {
+    triggerGroupColumns?.(value);
+  };
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = (0, _utils.findAllChildrenKeys2)(dataSource, rowKey, 'children');
+    setExpanded((0, _utils.convertToObjTrue)(allKeys));
+  };
+  const groupToolbar = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        marginRight: 10
+      }
+    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/_react.default.createElement(_ColumnsGroup.ColumnsGroup, {
+      t: t
+      // defaultGroupColumns={['name']}
+      ,
+      unClearableLevel: groupSetting?.unClearableLevel
+      // unClearableLevel={2}
+      ,
+      columns: propsColumns ? (0, _utils2.flatColumns2)(propsColumns) : [],
+      columnsGrouped: groupColumns,
+      onSubmit: handleOnGroup
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _utils.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
+    ref: topToolbarRef,
+    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, groupToolbar(), /*#__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'
+  })), /*#__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: (totalItems, range) =>
+    // @ts-ignore
+    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    columnHidden: columnHidden,
+    columns: columns,
+    originColumns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns
+  })))), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
+    value: {
+      t,
+      locale,
+      prefix,
+      id,
+      rowKey,
+      format,
+      expandable,
+      expanded,
+      setExpanded,
+      dataSource,
+      originData,
+      wrapSettings,
+      recordDoubleClick,
+      selectionSettings,
+      isSelectionChange,
+      setIsSelectionChange,
+      onContextMenu,
+      setSorterChange,
+      setFilterChange,
+      windowSize,
+      isDataTree,
+      rowClassName,
+      onRowStyles,
+      onRowFooterStyles,
+      onRowHeaderStyles,
+      table,
+      pagination,
+      groupSetting
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    tableContainerRef: tableContainerRef,
+    prefix: prefix,
+    id: id,
+    height: tableHeight,
+    minHeight: minHeight,
+    dataSource: dataSource,
+    table: table,
+    columns: columns,
+    commandClick: triggerCommandClick
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    ref: bottomToolbarRef
+  }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default
+  // style={{padding: '0.75rem 1rem'}}
+  , (0, _extends2.default)({
+    pageSizeOptions: [20, 50, 100, 1000, 10000]
+  }, pagination, {
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
+    showTotal: (totalItems, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${(0, _reactNumericComponent.numericFormatter)((totalItems ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`,
+    onChange: (page, pageSize1) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize1);
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize1);
+      } else {
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize1);
+      }
+    }
+  }))));
+};
+var _default = exports.default = TableContainer;