es-grid-template 1.7.24 → 1.7.26

package/es/table-component/TableContainer.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 // import type { Dispatch, SetStateAction } from "react";
 
 import React from 'react';
@@ -5,11 +6,18 @@ import TableHead from "./header/TableHead";
 import { sumSize } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
-import TableBody from "./body/TableBody";
+// import TableBody from './body/TableBody'
 import { TableContext } from "./useContext";
+import Pagination from 'rc-master-ui/es/pagination';
+import { Toolbar } from 'rc-master-ui';
+import { Maximize, Minimize } from 'becoxy-icons';
+import { ColumnsChoose } from "./ColumnsChoose";
+import TableFooter from "./footer/TableFooter";
+import TableBody from "./body/TableBody";
+import { numericFormatter } from 'react-numeric-component';
 const TableContainer = props => {
   const {
-    // t,
+    t,
     table,
     id,
     prefix,
@@ -29,10 +37,37 @@ const TableContainer = props => {
     contextMenuItems,
     setSorterChange,
     setFilterChange,
-    tableHeight
+    height,
+    showToolbar,
+    toolbarItems,
+    actionTemplate,
+    pagination,
+    fullScreen,
+    showColumnChoose,
+    summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    columnHidden,
+    expanded,
+    setExpanded,
+    showEmptyText
   } = props;
   const tableContainerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const bottomToolbarRef = React.useRef(null);
+  const topToolbarRef = React.useRef(null);
   const visibleColumns = table.getVisibleLeafColumns();
+  const [isFullScreen] = React.useState(false);
+  const [tableHeight, settableHeight] = React.useState(0);
+  React.useEffect(() => {
+    const totalHeight = height;
+    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    }
+  }, [id, height, editAble]);
   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)) : [];
   const columnVirtualizer = useVirtualizer({
@@ -43,15 +78,6 @@ const TableContainer = props => {
     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 columnSizingState = table.getState().columnSizing
-
-  // React.useEffect(() => {
-  //   requestAnimationFrame(() => {
-  //     columnVirtualizer.measure()
-  //   })
-  // }, [columnSizingState, columnVirtualizer])
-
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
   const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
@@ -68,6 +94,61 @@ const TableContainer = props => {
     virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
   }
   return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/React.createElement("div", {
+    ref: topToolbarRef,
+    className: classNames(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/React.createElement(Maximize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), /*#__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: (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.createElement(ColumnsChoose, {
+    columnHidden: columnHidden,
+    columns: columns,
+    originColumns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns
+  })))), /*#__PURE__*/React.createElement("div", {
     className: classNames(`${prefix}-grid-container`, {
       'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
       'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
@@ -79,16 +160,20 @@ const TableContainer = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      height: tableHeight ?? '500px' //should be a fixed height
+      // height: tableHeight ?? '500px' //should be a fixed height
+      maxHeight: tableHeight //should be a fixed height
       // minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
+      locale,
       prefix,
       id,
       rowKey,
       format,
       expandable,
+      expanded,
+      setExpanded,
       dataSource,
       originData,
       // triggerFilter,
@@ -124,7 +209,42 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns,
     commandClick: commandClick,
     editAble: editAble,
-    contextMenuItems: contextMenuItems
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText
+  }), summary && /*#__PURE__*/React.createElement(TableFooter, {
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  })))), /*#__PURE__*/React.createElement("div", {
+    ref: bottomToolbarRef
+  }, pagination && /*#__PURE__*/React.createElement(Pagination
+  // style={{padding: '0.75rem 1rem'}}
+  , _extends({}, pagination, {
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
+    showTotal: (total, range) => `${numericFormatter((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${numericFormatter((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${numericFormatter((total ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`,
+    pageSizeOptions: [20, 50, 100, 1000, 10000],
+    onChange: (page, pageSize) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize);
+      } else {
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize);
+      }
+    }
   }))));
 };
 export default TableContainer;

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

@@ -1,13 +1,14 @@
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
-import type { Table } from "@tanstack/react-table";
-import type { TableProps } from "./type";
+import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { ColumnsTable, TableProps } from "./type";
 type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
     prefix: string;
     id: string;
     rowKey: any;
     originData: T[];
+    propsColumns: ColumnsTable;
     setIsSelectionChange: Dispatch<SetStateAction<{
         isChange: boolean;
         type: string;
@@ -18,11 +19,13 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
-    triggerChangeData?: (newData: T[], type: string) => void;
-    mergedFilterKeys: any;
-    setMergedFilterKeys: any;
-    setExpanded: any;
-    expanded: any;
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    triggerChangeColumns: any;
+    columnHidden: any;
 };
 declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainerEdit;