es-grid-template 1.8.71 → 1.8.72

package/lib/group-component/InternalTable.js

@@ -0,0 +1,233 @@
+"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 _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _react = _interopRequireWildcard(require("react"));
+require("react-resizable/css/styles.css");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+require("dayjs/locale/vi");
+require("./style.scss");
+var _faker = require("@faker-js/faker");
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _Grid = _interopRequireDefault(require("./table/Grid"));
+var _utils = require("./hook/utils");
+var _useColumns = require("./hook/useColumns");
+var _convert = require("./hook/convert");
+var _hooks = require("../grid-component/hooks");
+var _utils2 = require("../table-virtuoso/hook/utils");
+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; }
+_dayjs.default.extend(_customParseFormat.default);
+const InternalTable = props => {
+  const {
+    t,
+    columns: propsColumns,
+    // columns,
+    lang,
+    locale,
+    dataSource,
+    editAble,
+    format,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    selectionSettings,
+    expandable,
+    onChooseColumns,
+    // contextMenuClick,
+    // contextMenuOpen,
+    height,
+    ...rest
+  } = props;
+  const id = _react.default.useMemo(() => {
+    return _faker.faker.string.alpha(20);
+  }, []);
+  const {
+    defaultExpandedRowKeys,
+    defaultExpandAllRows
+  } = expandable || {};
+  const rowKey = 'rowId';
+  const prefix = 'ui-rc';
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = (0, _react.useState)(getWindowSize());
+  _react.default.useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+  const [filterStates, setFilterState] = _react.default.useState(null);
+  const [sorterStates, setSorterStates] = _react.default.useState([]);
+  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
+  const [columns, setColumns] = _react.default.useState([]);
+  _react.default.useEffect(() => {
+    // setColumns(propsColumns as any)
+
+    setColumns((0, _utils.updateWidthsByOther)(propsColumns, columns));
+  }, [propsColumns]);
+  const originData = _react.default.useMemo(() => {
+    return (0, _utils.addRowIdArray)(dataSource);
+  }, [dataSource]);
+  const [expanded, setExpanded] = _react.default.useState({});
+  const [columnPinning, setColumnPinning] = _react.default.useState({});
+  const [columnVisibility, setColumnVisibility] = _react.default.useState({});
+  const convertData = _react.default.useMemo(() => {
+    if (groupAble && groupSetting?.client !== false) {
+      return (0, _utils2.groupArrayByColumns)(originData, groupColumns);
+    }
+    return originData;
+  }, [originData, groupAble, groupColumns, groupSetting?.client]);
+  const mergedColumns = _react.default.useMemo(() => {
+    return (0, _useColumns.convertToTanStackColumns)({
+      t,
+      columns,
+      format,
+      editAble
+    });
+
+    // return convertToTanStackColumns<RecordType>(columns)
+  }, [t, columns, format, editAble, groupColumns]);
+  const isDataTree = _react.default.useMemo(() => {
+    return (0, _utils.isTreeArray)(convertData);
+  }, [convertData]);
+
+  // const isDataOriginTree = React.useMemo(() => {
+
+  //   return isTreeArray(originData)
+
+  // }, [originData])
+
+  // const columnPinning = React.useMemo(() => {
+  //   return {
+  //     left: groupColumns ? [...getFixedFields(columns, 'left'), ...groupColumns] : getFixedFields(columns, 'left'),
+  //     right: getFixedFields(columns, 'right')
+  //   }
+  // }, [columns, groupColumns])
+
+  _react.default.useEffect(() => {
+    const abc = {
+      // left: groupColumns ? [...getFixedFields(columns, 'left'), ...groupColumns] : getFixedFields(columns, 'left'),
+      left: (0, _utils.getFixedFields)(columns, 'left'),
+      right: (0, _utils.getFixedFields)(columns, 'right')
+    };
+    setColumnPinning(abc);
+  }, [columns]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(convertData), {
+    value: undefined
+  });
+  _react.default.useEffect(() => {
+    if (defaultExpandAllRows) {
+      const allKeys = (0, _utils.findAllChildrenKeys2)(convertData, rowKey, 'children');
+      setExpanded((0, _utils.convertToObjTrue)(allKeys));
+    } else {
+      if (defaultExpandedRowKeys) {
+        setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
+      }
+    }
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);
+
+  // ========================= Keys =========================
+
+  const {
+    selectedRowKeys,
+    defaultSelectedRowKeys
+  } = selectionSettings ?? {};
+  const [mergedSelectedKeys] = (0, _useMergedState.default)(selectedRowKeys || defaultSelectedRowKeys || [], {
+    value: selectedRowKeys
+  });
+  const mergedData = _react.default.useMemo(() => {
+    return (0, _utils.filterDataByColumns)(convertData, filterStates, sorterStates, mergedFilterKeys);
+  }, [convertData, filterStates, mergedFilterKeys, sorterStates]);
+  _react.default.useEffect(() => {
+    const a = (0, _utils.getInvisibleColumns)(columns);
+
+    // const bcd = convertToObj(groupColumns)
+
+    setColumnVisibility({
+      ...a
+    });
+  }, [columns]);
+  const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
+    value: undefined
+  });
+  const triggerChangeColumns = (cols, keys, type) => {
+    if (type === 'cellClick') {
+      setColumns(cols);
+    } else {
+      const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
+      const rsss = (0, _utils.getDiffent2Array)(aa, keys);
+      setColumnsHiddenKeys(rsss);
+      onChooseColumns?.({
+        showColumns: (0, _hooks.removeInvisibleColumns)([...cols]),
+        columns: [...cols],
+        flattenColumns: (0, _utils.convertFlatColumn1)([...cols])
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
+    t: t,
+    id: id,
+    prefix: prefix
+
+    // originData={convertData}
+    ,
+    originData: originData,
+    dataSource: mergedData,
+    locale: locale,
+    format: format
+    // columns={columns111 as any}
+    ,
+    columns: (0, _convert.convertColumns)(mergedColumns),
+    propsColumns: columns,
+    rowKey: rowKey,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    columnPinning: columnPinning,
+    setColumnPinning: setColumnPinning,
+    columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
+    triggerFilter: setFilterState,
+    triggerSorter: setSorterStates,
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    expanded: expanded,
+    editAble: isFullScreen ? false : editAble,
+    triggerChangeColumns: triggerChangeColumns
+    // triggerGroupColumns={triggerGroupColumns}
+    ,
+
+    setExpanded: setExpanded,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    windowSize: windowSize,
+    height: height,
+    isDataTree: isDataTree,
+    selectionSettings: selectionSettings,
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable,
+    setColumns: setColumns,
+    columnVisibility: columnVisibility,
+    setColumnVisibility: setColumnVisibility
+  })));
+};
+var _default = exports.default = InternalTable;

package/lib/group-component/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 './../grid-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/group-component/TableContainer.js

@@ -0,0 +1,382 @@
+"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 _useContext = require("./useContext");
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _rcMasterUi = require("rc-master-ui");
+var _becoxyIcons = require("becoxy-icons");
+var _ColumnsChoose = require("./ColumnsChoose");
+var _reactNumericComponent = require("react-numeric-component");
+var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
+var _utils = require("./hook/utils");
+var _reactVirtual = require("@tanstack/react-virtual");
+var _utils2 = require("../table-component/hook/utils");
+var _ColumnsGroup = require("./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,
+    columnHidden,
+    expanded,
+    setExpanded,
+    showEmptyText,
+    infiniteScroll,
+    next,
+    loading,
+    windowSize,
+    contextMenuOpen,
+    contextMenuClick,
+    contextMenuHidden,
+    isFullScreen,
+    setIsFullScreen,
+    isDataTree,
+    setColumns,
+    columnSizing,
+    columnSizingInfo,
+    rowClassName,
+    onRowStyles,
+    onRowFooterStyles,
+    onRowHeaderStyles,
+    title,
+    dataSourceFilter,
+    groupSetting,
+    triggerGroupColumns
+  } = 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);
+  const [focusedCell, setFocusedCell] = _react.default.useState(undefined);
+  _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 visibleColumns = table.getVisibleLeafColumns();
+  const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
+  const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
+
+  //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
+  const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
+    count: visibleColumns.length,
+    estimateSize: index => visibleColumns[index].getSize(),
+    //estimate width of each column for accurate scrollbar dragging
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    // measureElement(element) {
+
+    //   return element?.getBoundingClientRect().width;
+    // },
+
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
+  });
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const cacheColumns = columnVirtualizer.measurementsCache;
+  const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
+  const leftCols = [...cacheColumns].slice(0, table.getState().columnPinning.left?.length ?? 0);
+  const rightWidth = (0, _utils.sumSize)(rightCols);
+  const leftWidth = (0, _utils.sumSize)(leftCols);
+
+  //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
+  let virtualPaddingLeft;
+  let virtualPaddingRight;
+  const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
+  if (columnVirtualizer && virtualColumns?.length) {
+    virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
+
+    // virtualPaddingLeft = leftCols.length === rss.length ?  (virtualColumns[0]?.start ?? 0) : 0;
+    // columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth > 0 ? columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth : 0;
+    virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
+    // virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
+  }
+  const columnSizingState = table.getState().columnSizing;
+  _react.default.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
+  _react.default.useEffect(() => {
+    if (!tableContainerRef.current) {
+      return;
+    }
+
+    // const containerWidth = tableContainerRef.current.offsetWidth
+    // const totalWidth = table.getTotalSize()
+
+    // if (totalWidth && totalWidth <= containerWidth) {
+
+    //   return
+
+    // }
+
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
+      setColumns(aa);
+
+      // requestAnimationFrame(() => {
+
+      //   columnVirtualizer.measure()
+      // })
+    }
+  }, [columnSizingInfo]);
+  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, _utils2.findAllChildrenKeys2)(dataSource, rowKey, 'children');
+    setExpanded((0, _utils2.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, _utils2.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,
+      // triggerFilter,
+      wrapSettings,
+      recordDoubleClick,
+      selectionSettings,
+      isSelectionChange,
+      setIsSelectionChange,
+      onContextMenu,
+      setSorterChange,
+      setFilterChange,
+      windowSize,
+      isDataTree,
+      focusedCell,
+      setFocusedCell,
+      rowClassName,
+      onRowStyles,
+      onRowFooterStyles,
+      onRowHeaderStyles,
+      table,
+      pagination,
+      dataSourceFilter,
+      groupColumns
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    contextMenuItems: contextMenuItems,
+    height: tableHeight,
+    minHeight: minHeight,
+    id: id,
+    prefix: prefix,
+    table: table,
+    tableContainerRef: tableContainerRef,
+    commandClick: triggerCommandClick,
+    contextMenuClick: contextMenuClick,
+    contextMenuHidden: contextMenuHidden,
+    contextMenuOpen: contextMenuOpen,
+    editAble: editAble,
+    showEmptyText: showEmptyText,
+    summary: summary,
+    dataSource: dataSource,
+    infiniteScroll: infiniteScroll,
+    next: next,
+    loading: loading,
+    columnVirtualizer: columnVirtualizer,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  })), /*#__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;