es-grid-template 1.8.71 → 1.8.73

package/es/group-component/InternalTable.js

@@ -0,0 +1,224 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import React, { Fragment, useState } from 'react';
+import 'react-resizable/css/styles.css';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import "./style.scss";
+import { faker } from '@faker-js/faker';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import Grid from "./table/Grid";
+import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
+import { convertToTanStackColumns } from "./hook/useColumns";
+import { convertColumns } from "./hook/convert";
+import { removeInvisibleColumns } from "../grid-component/hooks";
+import { groupArrayByColumns } from "../table-virtuoso/hook/utils";
+dayjs.extend(customParseFormat);
+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.useMemo(() => {
+    return 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] = useState(getWindowSize());
+  React.useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+  const [filterStates, setFilterState] = React.useState(null);
+  const [sorterStates, setSorterStates] = React.useState([]);
+  const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [columns, setColumns] = React.useState([]);
+  React.useEffect(() => {
+    // setColumns(propsColumns as any)
+
+    setColumns(updateWidthsByOther(propsColumns, columns));
+  }, [propsColumns]);
+  const originData = React.useMemo(() => {
+    return addRowIdArray(dataSource);
+  }, [dataSource]);
+  const [expanded, setExpanded] = React.useState({});
+  const [columnPinning, setColumnPinning] = React.useState({});
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const convertData = React.useMemo(() => {
+    if (groupAble && groupSetting?.client !== false) {
+      return groupArrayByColumns(originData, groupColumns);
+    }
+    return originData;
+  }, [originData, groupAble, groupColumns, groupSetting?.client]);
+  const mergedColumns = React.useMemo(() => {
+    return convertToTanStackColumns({
+      t,
+      columns,
+      format,
+      editAble
+    });
+
+    // return convertToTanStackColumns<RecordType>(columns)
+  }, [t, columns, format, editAble, groupColumns]);
+  const isDataTree = React.useMemo(() => {
+    return 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.useEffect(() => {
+    const abc = {
+      // left: groupColumns ? [...getFixedFields(columns, 'left'), ...groupColumns] : getFixedFields(columns, 'left'),
+      left: getFixedFields(columns, 'left'),
+      right: getFixedFields(columns, 'right')
+    };
+    setColumnPinning(abc);
+  }, [columns]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(convertData), {
+    value: undefined
+  });
+  React.useEffect(() => {
+    if (defaultExpandAllRows) {
+      const allKeys = findAllChildrenKeys2(convertData, rowKey, 'children');
+      setExpanded(convertToObjTrue(allKeys));
+    } else {
+      if (defaultExpandedRowKeys) {
+        setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
+      }
+    }
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);
+
+  // ========================= Keys =========================
+
+  const {
+    selectedRowKeys,
+    defaultSelectedRowKeys
+  } = selectionSettings ?? {};
+  const [mergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || [], {
+    value: selectedRowKeys
+  });
+  const mergedData = React.useMemo(() => {
+    return filterDataByColumns(convertData, filterStates, sorterStates, mergedFilterKeys);
+  }, [convertData, filterStates, mergedFilterKeys, sorterStates]);
+  React.useEffect(() => {
+    const a = getInvisibleColumns(columns);
+
+    // const bcd = convertToObj(groupColumns)
+
+    setColumnVisibility({
+      ...a
+    });
+  }, [columns]);
+  const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
+    value: undefined
+  });
+  const triggerChangeColumns = (cols, keys, type) => {
+    if (type === 'cellClick') {
+      setColumns(cols);
+    } else {
+      const aa = flatColumns2(columns).map(it => it.field);
+      const rsss = getDiffent2Array(aa, keys);
+      setColumnsHiddenKeys(rsss);
+      onChooseColumns?.({
+        showColumns: removeInvisibleColumns([...cols]),
+        columns: [...cols],
+        flattenColumns: convertFlatColumn1([...cols])
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
+    t: t,
+    id: id,
+    prefix: prefix
+
+    // originData={convertData}
+    ,
+    originData: originData,
+    dataSource: mergedData,
+    locale: locale,
+    format: format
+    // columns={columns111 as any}
+    ,
+    columns: convertColumns(mergedColumns),
+    propsColumns: columns,
+    rowKey: rowKey,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    columnPinning: columnPinning,
+    setColumnPinning: setColumnPinning,
+    columnHidden: columnsHiddenKeys ? 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
+  })));
+};
+export default InternalTable;

package/es/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/es/group-component/TableContainer.js

@@ -0,0 +1,375 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import classNames from 'classnames';
+import { TableContext } from "./useContext";
+import Pagination from 'rc-master-ui/es/pagination';
+import { Toolbar } from 'rc-master-ui';
+import { Collapse2, Expand2, Maximize, Minimize } from 'becoxy-icons';
+import { ColumnsChoose } from "./ColumnsChoose";
+import { numericFormatter } from 'react-numeric-component';
+import TableWrapper from "./table/TableWrapper";
+import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { convertToObjTrue, findAllChildrenKeys2, flatColumns2, isObjEmpty } from "../table-component/hook/utils";
+import { ColumnsGroup } from "./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.useRef(null);
+  const containerRef = React.useRef(null);
+  const bottomToolbarRef = React.useRef(null);
+  const topToolbarRef = React.useRef(null);
+  const [tableHeight, settableHeight] = React.useState(0);
+  const [focusedCell, setFocusedCell] = React.useState(undefined);
+  React.useEffect(() => {
+    // const totalHeight = minHeight ?? height
+    const totalHeight = 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.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 = 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 = sumSize(rightCols);
+  const leftWidth = 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.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
+  React.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 = 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 = findAllChildrenKeys2(dataSource, rowKey, 'children');
+    setExpanded(convertToObjTrue(allKeys));
+  };
+  const groupToolbar = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        marginRight: 10
+      }
+    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
+      t: t
+      // defaultGroupColumns={['name']}
+      ,
+      unClearableLevel: groupSetting?.unClearableLevel
+      // unClearableLevel={2}
+      ,
+      columns: propsColumns ? flatColumns2(propsColumns) : [],
+      columnsGrouped: groupColumns,
+      onSubmit: handleOnGroup
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, !isObjEmpty(expanded) ? /*#__PURE__*/React.createElement(Collapse2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/React.createElement(Expand2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
+    ref: topToolbarRef,
+    className: classNames(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, groupToolbar(), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
+    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.createElement(Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/React.createElement(Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    columnHidden: columnHidden,
+    columns: columns,
+    originColumns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns
+  })))), /*#__PURE__*/React.createElement(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.createElement(TableWrapper, {
+    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.createElement("div", {
+    ref: bottomToolbarRef
+  }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
+  // style={{padding: '0.75rem 1rem'}}
+  , _extends({
+    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) => `${numericFormatter((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${numericFormatter((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${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);
+      }
+    }
+  }))));
+};
+export default TableContainer;

package/es/group-component/TableContainerEdit.d.ts

@@ -0,0 +1,48 @@
+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[];
+    propsColumns: ColumnsTable;
+    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;
+    isDataTree: boolean;
+    windowSize: {
+        innerHeight: number;
+        innerWidth: number;
+    };
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    triggerChangeColumns: any;
+    columnHidden: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    setColumnSizing: Dispatch<SetStateAction<any>>;
+    setColumns: Dispatch<SetStateAction<any>>;
+    columnSizingInfo: ColumnSizingInfoState;
+    columnSizing: ColumnSizingState;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+};
+declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
+export default TableContainerEdit;