es-grid-template 1.1.5 → 1.1.6

package/es/grid-component/table/Grid.js

@@ -1,91 +1,27 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment } from 'react';
 import { GridStyle } from "../GridStyle";
 import TableGrid from "../TableGrid";
-import { renderContent } from "../hooks/useColumns";
+// import type {ColumnsTable} from "../type";
+
+// import {renderContent} from "../hooks/useColumns";
+
 const Grid = props => {
   const {
-    t,
-    columns,
     height,
-    tableRef,
-    components,
     style,
-    format,
-    getRowKey,
-    triggerChangeColumns,
     ...rest
   } = props;
-  const transformColumns = React.useCallback(cols => {
-    // @ts-ignore
-    return cols.map(column => {
-      if (!column?.field && !column?.key) {
-        return column;
-      }
-
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
-        return {
-          ...column,
-          children: transformColumns(column.children)
-        };
-      }
-      const transformedColumn = {
-        ...column,
-        dataIndex: column.field ?? column.dataIndex,
-        title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
-        ellipsis: column.ellipsis !== false,
-        align: column.textAlign ?? column.align,
-        fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
-      };
-      // @ts-ignore
-      if (["index", "#"].includes(transformedColumn.dataIndex)) {
-        return {
-          ...transformedColumn,
-          render: (_, __, rowIndex) => rowIndex + 1
-        };
-      }
-
-      // if (transformedColumn.dataIndex === "command") {
-      //   return {
-      //     ...transformedColumn,
-      //     onCell: () => ({ className: "ui-rc-cell-command" }),
-      //     render: () => (
-      //       <div className="ui-rc-cell-command__content">
-      //         {column.commandItems?.map((item, index) =>
-      //           item.visible !== false ? <Command key={`command-${index}`} item={item} onClick={(e) => e.preventDefault()} /> : null
-      //         )}
-      //       </div>
-      //     ),
-      //   };
-      // }
-
-      return {
-        ...transformedColumn,
-        render: (value, record, rowIndex) => renderContent(column, value, record, rowIndex, format)
-      };
-    });
-  }, [format, t]);
-  const mergedColumns = useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
       position: 'relative'
     }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
-    t: t,
-    tableRef: tableRef,
-    components: {
-      ...components
-    },
-    format: format,
-    columns: mergedColumns,
     style: {
       ...style,
       minHeight: height
-    },
-    getRowKey: getRowKey,
-    triggerChangeColumns: triggerChangeColumns
+    }
   }))));
 };
 export default Grid;

package/es/grid-component/table/GridEdit.js

@@ -41,7 +41,8 @@ const GridEdit = props => {
   } = props;
 
   // const forceUpdate = useForceUpdate();
-  const [updateKey, setUpdateKey] = useState(0);
+  // const [updateKey, setUpdateKey] = useState(0);
+
   const isSelecting = useRef(false);
   const startCell = useRef(null);
   const isSelectingRow = useRef(false);
@@ -133,17 +134,25 @@ const GridEdit = props => {
     }
     setSelectedCells(newSelectedCells);
   };
-  const handleClickColHeader = (column, indexColumn) => {
-    const newSelectedCells = new Set();
-    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
-      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
-        newSelectedCells.add(`${r}-${c}`);
-      }
-    }
-    setSelectedCells(new Set(newSelectedCells));
-    // forceUpdate();
-    setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
-  };
+
+  // const handleClickColHeader = (column: ColumnTable, indexColumn: number) => {
+  //
+  //   const newSelectedCells = new Set();
+  //
+  //   for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
+  //     for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
+  //       newSelectedCells.add(`${r}-${c}`)
+  //     }
+  //   }
+  //
+  //   // console.log('newSelectedCells', newSelectedCells)
+  //   // setSelectedCells(newSelectedCells)
+  //
+  //   setSelectedCells(new Set(newSelectedCells));
+  //   // forceUpdate();
+  //   setUpdateKey((prev) => prev + 1); // Cập nhật key để trigger re-render
+  // }
+
   const handleMouseDownColIndex = (row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
@@ -317,6 +326,7 @@ const GridEdit = props => {
     // }
   };
   const onSubmit = formData => {
+    console.log('onSubmit', formData);
     try {
       // const record = (await form.validateFields()) as RecordType;
       const row = {
@@ -370,6 +380,8 @@ const GridEdit = props => {
       option,
       field
     } = args;
+
+    // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
@@ -393,6 +405,7 @@ const GridEdit = props => {
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
+          console.log('onCellChange Callback');
           onCellChange({
             field,
             indexCol: 1,
@@ -406,6 +419,7 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
+          console.log('onCellChange');
           onCellChange({
             field,
             indexCol: 1,
@@ -424,6 +438,7 @@ const GridEdit = props => {
       console.log('aaaaaa blur');
     }
     if (prevState && newState && prevState !== newState && type === 'enter') {
+      console.log('enter');
       onSubmit(record);
     }
   };
@@ -707,12 +722,12 @@ const GridEdit = props => {
           editing: isEditing(record),
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex
         }),
-        onHeaderCell: data => ({
-          ...col.onHeaderCell(),
-          onClick: () => {
-            handleClickColHeader(data, colIndex);
-          }
-        }),
+        // onHeaderCell: (data) => ({
+        //   ...col.onHeaderCell(),
+        //   onClick: () => {
+        //     handleClickColHeader(data as ColumnTable, colIndex)
+        //   }
+        // }),
         render: (value, record, rowIndex) => {
           return /*#__PURE__*/React.createElement("div", {
             className: classNames('ui-rc_cell-content', {
@@ -748,8 +763,9 @@ const GridEdit = props => {
   }, /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
-    t: t,
-    key: updateKey,
+    t: t
+    // key={updateKey}
+    ,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
@@ -773,8 +789,7 @@ const GridEdit = props => {
       ...style,
       minHeight: height
     },
-    rowHoverable: false,
-    getRowKey: getRowKey
+    rowHoverable: false
   }))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

package/es/grid-component/type.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import type { Key, ReactElement, ReactNode } from "react";
 import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
@@ -9,7 +9,6 @@ import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
-export type Key = React.Key;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
@@ -87,6 +86,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     maxWidth?: string | number;
     format?: IFormat;
     allowFiltering?: boolean;
+    allowSorter?: boolean;
     operator?: FilterOperator;
     hideOperator?: boolean;
     placeholder?: string;
@@ -161,6 +161,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
     loading?: boolean;
     allowResizing?: boolean;
+    showToolbar?: boolean;
     onDataChange?: (data: RecordType[]) => void;
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
 }
@@ -177,7 +178,7 @@ export interface CommandItem {
     title: string;
     color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
     tooltip?: string;
-    icon?: any;
+    icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
     template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
     client?: boolean;
     confirmDialog?: boolean;
@@ -211,7 +212,6 @@ export type SourceFilter = {
     loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
 };
 export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
-export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
 export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/lib/grid-component/InternalTable.js

@@ -65,6 +65,7 @@ const InternalTable = props => {
     onFilterClick,
     editAble,
     rowKey,
+    format,
     onDataChange,
     sortMultiple,
     ...rest
@@ -124,27 +125,23 @@ const InternalTable = props => {
       setSelectedKeys,
       selectedKeys,
       confirm,
-      // close,
+      close,
       setOperatorKey,
       operatorKey,
       visible,
       searchValue,
       setSearchValue
     }) => {
-      const type = (0, _hooks.getTypeFilter)(column);
-      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
-      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
-      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           padding: 8,
           minWidth: 275
         },
         onKeyDown: e => e.stopPropagation()
-      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
+      }, (column?.showOperator !== false || column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange') && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
-        options: (0, _hooks.translateOption)(operatorOptions, t),
+        options: (0, _hooks.translateOption)(_hooks.numberOperator, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -175,17 +172,13 @@ const InternalTable = props => {
         style: {
           width: 90
         }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      }, "Filter"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
         type: "link",
         size: "small",
         onClick: () => {
-          // setSearchValue('')
-          setSelectedKeys([]);
-          confirm();
-          // handleSearch()
-          // close()
+          close();
         }
-      }, t ? t("Clear") : 'Clear')));
+      }, "close")));
     },
     filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
       fontSize: 12,
@@ -203,7 +196,7 @@ const InternalTable = props => {
         }
       }
     }
-  }), [buddhistLocale, dataSourceFilter, onFilterCallback, onFilterClick, t]);
+  }), [onFilterCallback, onFilterClick, _useColumns.renderFilter, t]);
   const handleResize = indexPath => (e, {
     size
   }) => {
@@ -257,7 +250,7 @@ const InternalTable = props => {
         key: col.field ?? col.dataIndex ?? col.key,
         title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
         ellipsis: col.ellipsis !== false,
-        align: col.textAlign ?? col.align ?? col.type === 'number' ? 'right' : undefined,
+        align: col.textAlign ?? col.align,
         fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
       };
       if (col.children) {
@@ -266,31 +259,52 @@ const InternalTable = props => {
           children: transformColumns(col.children, currentPath)
         };
       }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false || col.field === 'command') {
+
+      // @ts-ignore
+      if (["index", "#"].includes(transformedColumn.dataIndex)) {
         return {
-          ...transformedColumn
+          ...transformedColumn,
+          render: (_, __, rowIndex) => rowIndex + 1
+        };
+      }
+      if (col.field === 'command') {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: col.field === 'command' ? "ui-rc-cell-command" : ''
+          }),
+          onHeaderCell: () => ({
+            width: col.width,
+            onResize: handleResize(currentPath)
+          })
         };
       }
       return {
-        ...getColumnSearchProps(col),
+        ...(col.allowFiltering === false ? {} : {
+          ...getColumnSearchProps(col)
+        }),
         ...transformedColumn,
         onFilter: value => {
           return value;
         },
-        sorter: {
+        sorter: col.sorter === false ? undefined : {
           compare: a => a,
           multiple: sortMultiple ? index : undefined
         },
         onHeaderCell: () => ({
           width: col.width,
           onResize: handleResize(currentPath)
-        })
+        }),
+        render: (value, record, rowIndex) => (0, _useColumns.renderContent)(col, value, record, rowIndex, format)
       };
     });
-  }, [getColumnSearchProps, sortMultiple, t]);
+  }, [getColumnSearchProps]);
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
+
+  // console.log('mergedColumns', mergedColumns)
+
   const triggerChangeColumns = newColumns => {
     setColumns(newColumns);
   };
@@ -309,6 +323,7 @@ const InternalTable = props => {
         cell: allowResizing ? ResizableTitle : undefined
       }
     },
+    format: format,
     columns: mergedColumns
     // columns={columns}
     ,

package/lib/grid-component/TableGrid.d.ts

@@ -6,7 +6,6 @@ type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: () => void;
     tableRef: any;
-    getRowKey: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/lib/grid-component/TableGrid.js

@@ -23,21 +23,6 @@ var _ColumnsChoose = require("./ColumnsChoose");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 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; }
-// import type {CheckboxProps} from "rc-master-ui";
-
-// import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
-// import { devUseWarning } from '../../_util/warning';
-// import { arrAdd, arrDel } from 'rc-tree/lib/util';
-
-// import {useMergedState} from "rc-util";
-
-// import {convertDataToEntities} from "rc-tree/lib/utils/treeUtil";
-// import type {DataNode} from "rc-tree/lib/interface";
-// import {devUseWarning} from "antd/es/_util/warning";
-// import type {GetCheckDisabled} from "rc-tree/es/interface";
-// import useLazyKVMap from "antd/es/table/hooks/useLazyKVMap";
-// import useMultipleSelect from "rc-master-ui/es/_util/hooks/useMultipleSelect";
-
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -105,21 +90,6 @@ const useStyle = (0, _antdStyle.createStyles)(({
 // type OnChange = NonNullable<TableProps<any>['onChange']>;
 
 const EMPTY_LIST = [];
-
-// const flattenData = <RecordType extends AnyObject = AnyObject>(
-//   childrenColumnName: keyof RecordType,
-//   data?: RecordType[],
-// ): RecordType[] => {
-//   let list: RecordType[] = [];
-//   (data || []).forEach((record) => {
-//     list.push(record);
-//     if (record && typeof record === 'object' && childrenColumnName in record) {
-//       list = [...list, ...flattenData<RecordType>(childrenColumnName, record[childrenColumnName])];
-//     }
-//   });
-//   return list;
-// };
-
 const TableGrid = props => {
   const {
     columns,
@@ -142,7 +112,7 @@ const TableGrid = props => {
     selectionSettings,
     rowSelection,
     rowSelected,
-    rowKey,
+    rowKey = 'id',
     pagination,
     scroll,
     onFilterClick,
@@ -150,7 +120,7 @@ const TableGrid = props => {
     loading,
     triggerChangeColumns,
     summary,
-    getRowKey,
+    showToolbar,
     onSorter,
     ...rest
   } = props;
@@ -160,13 +130,11 @@ const TableGrid = props => {
   const {
     mode,
     type,
-    // checkboxOnly,
+    checkboxOnly,
     hideSelectAll,
     columnWidth,
     selectedRowKeys,
     defaultSelectedRowKeys
-    // getCheckboxProps,
-    // checkStrictly = true
   } = selectionSettings || {};
   const clickRef = (0, _react.useRef)(null);
   const menuRef = (0, _react.useRef)(null);
@@ -181,10 +149,15 @@ const TableGrid = props => {
     viewportHeight
   });
 
+  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
+
   // ========================= Keys =========================
   const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST, {
     value: selectedRowKeys
   });
+
+  // Reset if rowSelection reset
+
   _react.default.useEffect(() => {
     if (!selectionSettings) {
       setMergedSelectedKeys(EMPTY_LIST);
@@ -257,6 +230,18 @@ const TableGrid = props => {
       });
     }
   };
+  const handleRowClick = () => () => {
+    if (checkboxOnly !== true) {
+      if (type === 'single') {}
+    }
+    if (clickRef.current) return;
+
+    // @ts-ignore
+    clickRef.current = setTimeout(() => {
+      // console.log("Single Click:", record);
+      clickRef.current = null;
+    }, 250);
+  };
   const handleRowDoubleClick = (record, index) => e => {
     if (clickRef.current) {
       clearTimeout(clickRef.current);
@@ -285,10 +270,9 @@ const TableGrid = props => {
           rowData: selectedRow
         });
       } else {
-        // @ts-ignore
         setMergedSelectedKeys(keys);
         rowSelected?.({
-          selected: [selectedRow],
+          selected: selectedRows,
           type: 'rowSelected',
           rowData: selectedRow
         });
@@ -297,8 +281,6 @@ const TableGrid = props => {
   };
   const handleChange = sorter => {
     onSorter?.(sorter);
-    // setFilteredInfo(filters);
-    // setSortedInfo(sorter as Sorts);
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
@@ -328,7 +310,7 @@ const TableGrid = props => {
     // className={styles.customTable}
     ,
     className: (0, _classnames.default)(className, {
-      'table-none-column-select': mode === undefined && type !== 'multiple'
+      'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,
     virtual: virtual,
@@ -342,18 +324,17 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick(data, index),
+        // onClick: handleRowClick,
+        onClick: handleRowClick(),
         onContextMenu: onContextMenu(data)
       };
     },
     rowSelection: {
       ...selectionSettings,
-      type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
-      // selectedRowKeys: mode === 'checkbox' && type === 'single' ? mergedSelectedKeys : undefined,
-
       selectedRowKeys: mergedSelectedKeys,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
@@ -404,43 +385,48 @@ const TableGrid = props => {
       onFilter?.(convertFilters(val));
     },
     onChange: (paging, filters, sorter) => handleChange(sorter),
-    title: () => {
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, title?.(dataSource)), (toolbarItems || showColumnChoose !== false) && /*#__PURE__*/_react.default.createElement("div", {
+    title: showToolbar === false ? undefined : () => {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, title?.(dataSource)), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           display: 'flex',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
+          alignItems: 'center'
         }
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+      }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar
+      // @ts-ignore
+      , {
         style: {
-          width: '100%'
+          width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px` : `calc(100% - 50px`
         },
         items: toolbarItems ?? [],
-        mode: 'responsive'
-        // mode={'scroll'}
-        // onClick={(val: any) => {
-        // }}
-      }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+        mode: 'scroll'
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
+      }, 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'
+        // @ts-ignore
+        ,
+        showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+      }, pagination)), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
         columns: columns,
         t: t,
         triggerChangeColumns: triggerChangeColumns
-      }), /*#__PURE__*/_react.default.createElement("div", null)));
-    }
-
-    // rowClassName={(record) => (selectionSettings?.getCheckboxProps(record).disabled ? "row-disabled" : "")}
-    ,
-    rowClassName: record => {
-      const originalOnCell = selectionSettings?.getCheckboxProps?.(record) || {};
-      return originalOnCell.disabled ? 'row-disabled' : '';
+      }))));
     }
-  }, rest)), pagination && pagination.onChange && /*#__PURE__*/_react.default.createElement(_pagination.default
+  }, rest)), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
   , (0, _extends2.default)({
     showSizeChanger: true,
     responsive: true,
-    size: 'small'
-    // @ts-ignore
-    ,
-    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+    size: 'small',
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
   }, pagination))));
 };
 var _default = exports.default = TableGrid;