material-react-table 1.5.0 → 1.5.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -45,30 +45,30 @@
     "node": ">=14"
   },
   "scripts": {
-    "build": "rm -rf dist locales && rollup -c && size-limit",
-    "dev": "rm -rf dist locales && rollup -c -w",
-    "lib:build": "rm -rf dist locales && rollup -c && size-limit",
-    "lib:dev": "rm -rf dist locales && rollup -c -w",
+    "build": "rm -rf dist && rollup -c && size-limit",
+    "dev": "rm -rf dist && rollup -c -w",
+    "lib:build": "rm -rf dist && rollup -c && size-limit",
+    "lib:dev": "rm -rf dist && rollup -c -w",
     "lint": "eslint .",
     "size": "size-limit"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.7",
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.0",
+    "@mui/material": "^5.11.1",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^10.0.1",
     "@size-limit/preset-small-lib": "^8.1.0",
-    "@types/node": "^18.11.15",
+    "@types/node": "^18.11.17",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "eslint": "^8.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
+    "eslint": "^8.30.0",
     "eslint-plugin-mui-path-imports": "^0.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/MaterialReactTable.tsx

@@ -222,6 +222,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
   setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
+  setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 
 export type MRT_TableState<TData extends Record<string, any> = {}> =
@@ -242,6 +243,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
     showGlobalFilter: boolean;
     showProgressBars: boolean;
     showSkeletons: boolean;
+    showToolbarDropZone: boolean;
   };
 
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
@@ -971,6 +973,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right' | 'none';
@@ -1170,9 +1173,16 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
 
   if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
     layoutMode = 'grid';
+  }
+
+  if (rest.enableRowVirtualization) {
     enableStickyHeader = true;
   }
 
+  if (enablePagination === false && manualPagination === undefined) {
+    manualPagination = true;
+  }
+
   if (!rest.data?.length) {
     manualFiltering = true;
     manualGrouping = true;

package/src/_locales/zh-Hans.ts

@@ -0,0 +1,94 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_ZH_HANS: MRT_Localization = {
+  actions: '动作',
+  and: '与',
+  cancel: '取消',
+  changeFilterMode: '更改过滤模式',
+  changeSearchMode: '更改搜寻模式',
+  clearFilter: '清除过滤',
+  clearSearch: '清除搜寻',
+  clearSort: '清除排序',
+  clickToCopy: '点击以复制',
+  collapse: '折叠',
+  collapseAll: '全部折叠',
+  columnActions: '栏位动作',
+  copiedToClipboard: '已复制至剪贴板',
+  dropToGroupBy: '拖放以按 {column} 分组',
+  edit: '编辑',
+  expand: '展开',
+  expandAll: '全部展开',
+  filterArrIncludes: '包括',
+  filterArrIncludesAll: '包括所有',
+  filterArrIncludesSome: '包括',
+  filterBetween: '介于首尾',
+  filterBetweenInclusive: '介于首尾之间',
+  filterByColumn: '以 {column} 过滤',
+  filterContains: '包含',
+  filterEmpty: '是空字串',
+  filterEndsWith: '结尾为',
+  filterEquals: '等于',
+  filterEqualsString: '等于',
+  filterFuzzy: '模糊搜索',
+  filterGreaterThan: '大于',
+  filterGreaterThanOrEqualTo: '大于等于',
+  filterInNumberRange: '介于',
+  filterIncludesString: '包含',
+  filterIncludesStringSensitive: '包含',
+  filterLessThan: '小于',
+  filterLessThanOrEqualTo: '小于等于',
+  filterMode: '过滤模式：{filterType}',
+  filterNotEmpty: '非空字串',
+  filterNotEquals: '不等于',
+  filterStartsWith: '开首为',
+  filterWeakEquals: '等于',
+  filteringByColumn: '正以 {column} 过滤：{filterType} {filterValue}',
+  goToFirstPage: '到第一页',
+  goToLastPage: '到最后一页',
+  goToNextPage: '下一页',
+  goToPreviousPage: '上一页',
+  grab: '拖曳',
+  groupByColumn: '按 {column} 分组',
+  groupedBy: '分组依据 ',
+  hideAll: '隐藏全部',
+  hideColumn: '隐藏 {column} 栏位',
+  max: '最大',
+  min: '最小',
+  move: '移动',
+  noRecordsToDisplay: '无纪录可显示',
+  noResultsFound: '未找到结果',
+  of: '/',
+  or: '或',
+  pinToLeft: '固定至左边',
+  pinToRight: '固定至右边',
+  resetColumnSize: '重置栏位大小',
+  resetOrder: '重置排序',
+  rowActions: '横列动作',
+  rowNumber: '#',
+  rowNumbers: '横列号码',
+  rowsPerPage: '每页横列数目',
+  save: '储存',
+  search: '搜寻',
+  selectedCountOfRowCountRowsSelected:
+    '已选择横列：{selectedCount}/{rowCount}',
+  select: '选择',
+  showAll: '显示全部',
+  showAllColumns: '显示全部栏位',
+  showHideColumns: '显示/隐藏 栏位',
+  showHideFilters: '显示/隐藏 过滤条件',
+  showHideSearch: '显示/隐藏 搜寻条件',
+  sortByColumnAsc: '按 {column} 顺序排序',
+  sortByColumnDesc: '按 {column} 倒序排序',
+  sortedByColumnAsc: '已按 {column} 顺序排序',
+  sortedByColumnDesc: '已按 {column} 倒序排序',
+  thenBy: '，然后以',
+  toggleDensity: '切换密度',
+  toggleFullScreen: '切换',
+  toggleSelectAll: '切换选择全部',
+  toggleSelectRow: '切换选择横列',
+  toggleVisibility: '切换可见度',
+  ungroupByColumn: '取消按 {column} 分组',
+  unpin: '取消固定',
+  unpinAll: '全部取消固定',
+  unsorted: '取消排序',
+};

package/src/_locales/zh-Hant.ts

@@ -0,0 +1,94 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_ZH_HANT: MRT_Localization = {
+  actions: '動作',
+  and: '與',
+  cancel: '取消',
+  changeFilterMode: '更改過濾模式',
+  changeSearchMode: '更改搜尋模式',
+  clearFilter: '清除過濾',
+  clearSearch: '清除搜尋',
+  clearSort: '清除排序',
+  clickToCopy: '點擊以複製',
+  collapse: '折疊',
+  collapseAll: '全部折疊',
+  columnActions: '欄位動作',
+  copiedToClipboard: '已複製至剪貼板',
+  dropToGroupBy: '拖放以按 {column} 分組',
+  edit: '編輯',
+  expand: '展開',
+  expandAll: '全部展開',
+  filterArrIncludes: '包括',
+  filterArrIncludesAll: '包括所有',
+  filterArrIncludesSome: '包括',
+  filterBetween: '介於首尾',
+  filterBetweenInclusive: '介於首尾之間',
+  filterByColumn: '以 {column} 過濾',
+  filterContains: '包含',
+  filterEmpty: '是空字串',
+  filterEndsWith: '結尾為',
+  filterEquals: '等於',
+  filterEqualsString: '等於',
+  filterFuzzy: '模糊搜索',
+  filterGreaterThan: '大於',
+  filterGreaterThanOrEqualTo: '大於等於',
+  filterInNumberRange: '介於',
+  filterIncludesString: '包含',
+  filterIncludesStringSensitive: '包含',
+  filterLessThan: '小於',
+  filterLessThanOrEqualTo: '小於等於',
+  filterMode: '過濾模式：{filterType}',
+  filterNotEmpty: '非空字串',
+  filterNotEquals: '不等於',
+  filterStartsWith: '開首為',
+  filterWeakEquals: '等於',
+  filteringByColumn: '正以 {column} 過濾：{filterType} {filterValue}',
+  goToFirstPage: '到第一頁',
+  goToLastPage: '到最後一頁',
+  goToNextPage: '下一頁',
+  goToPreviousPage: '上一頁',
+  grab: '拖曳',
+  groupByColumn: '按 {column} 分組',
+  groupedBy: '分組依據 ',
+  hideAll: '隱藏全部',
+  hideColumn: '隱藏 {column} 欄位',
+  max: '最大',
+  min: '最小',
+  move: '移動',
+  noRecordsToDisplay: '無紀錄可顯示',
+  noResultsFound: '未找到結果',
+  of: '/',
+  or: '或',
+  pinToLeft: '固定至左邊',
+  pinToRight: '固定至右邊',
+  resetColumnSize: '重置欄位大小',
+  resetOrder: '重置排序',
+  rowActions: '橫列動作',
+  rowNumber: '#',
+  rowNumbers: '橫列號碼',
+  rowsPerPage: '每頁橫列數目',
+  save: '儲存',
+  search: '搜尋',
+  selectedCountOfRowCountRowsSelected:
+    '已選擇橫列：{selectedCount}/{rowCount}',
+  select: '選擇',
+  showAll: '顯示全部',
+  showAllColumns: '顯示全部欄位',
+  showHideColumns: '顯示/隱藏 欄位',
+  showHideFilters: '顯示/隱藏 過濾條件',
+  showHideSearch: '顯示/隱藏 搜尋條件',
+  sortByColumnAsc: '按 {column} 順序排序',
+  sortByColumnDesc: '按 {column} 倒序排序',
+  sortedByColumnAsc: '已按 {column} 順序排序',
+  sortedByColumnDesc: '已按 {column} 倒序排序',
+  thenBy: '，然後以',
+  toggleDensity: '切換密度',
+  toggleFullScreen: '切換',
+  toggleSelectAll: '切換選擇全部',
+  toggleSelectRow: '切換選擇橫列',
+  toggleVisibility: '切換可見度',
+  ungroupByColumn: '取消按 {column} 分組',
+  unpin: '取消固定',
+  unpinAll: '全部取消固定',
+  unsorted: '取消排序',
+};

package/src/body/MRT_TableBody.tsx

@@ -81,10 +81,7 @@ export const MRT_TableBody: FC<Props> = ({
       }
       return rankedRows;
     }
-
-    return enablePagination
-      ? getRowModel().rows
-      : getPrePaginationRowModel().rows;
+    return getRowModel().rows;
   }, [
     enableGlobalFilterRankedResults,
     (enableGlobalFilterRankedResults && globalFilter) || !enablePagination

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -41,11 +41,13 @@ export const MRT_ShowHideColumnsButton = <
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <MRT_ShowHideColumnsMenu
-        anchorEl={anchorEl}
-        setAnchorEl={setAnchorEl}
-        table={table}
-      />
+      {anchorEl && (
+        <MRT_ShowHideColumnsMenu
+          anchorEl={anchorEl}
+          setAnchorEl={setAnchorEl}
+          table={table}
+        />
+      )}
     </>
   );
 };

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent, useState } from 'react';
+import React, { MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
@@ -16,17 +16,19 @@ const commonIconButtonStyles = {
   },
 };
 
-interface Props {
-  cell: MRT_Cell;
-  row: MRT_Row;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  cell: MRT_Cell<TData>;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
+export const MRT_ToggleRowActionMenuButton = <
+  TData extends Record<string, any> = {},
+>({
   cell,
   row,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -92,9 +94,9 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
           <MRT_RowActionMenu
             anchorEl={anchorEl}
             handleEdit={handleStartEditMode}
-            row={row}
+            row={row as any}
             setAnchorEl={setAnchorEl}
-            table={table}
+            table={table as any}
           />
         </>
       ) : null}

package/src/footer/MRT_TableFooter.tsx

@@ -47,6 +47,7 @@ export const MRT_TableFooter: FC<Props> = ({
             : `1px solid ${theme.palette.grey[700]}`
           : undefined,
         position: stickFooter ? 'sticky' : undefined,
+        zIndex: stickFooter ? 1 : undefined,
         ...(tableFooterProps?.sx instanceof Function
           ? tableFooterProps?.sx(theme)
           : (tableFooterProps?.sx as any)),

package/src/index.tsx

@@ -17,6 +17,7 @@ import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterBu
 import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
+import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 
 export {
   MRT_CopyButton,
@@ -31,4 +32,5 @@ export {
   MRT_ToolbarAlertBanner,
   MRT_ToolbarDropZone,
   MRT_ToolbarInternalButtons,
+  MRT_ToggleRowActionMenuButton,
 };

package/src/table/MRT_TableRoot.tsx

@@ -117,6 +117,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
   );
+  const [showToolbarDropZone, setShowToolbarDropZone] = useState(
+    initialState?.showToolbarDropZone ?? false,
+  );
 
   const displayColumns = useMemo(
     () =>
@@ -284,6 +287,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         showAlertBanner,
         showColumnFilters,
         showGlobalFilter,
+        showToolbarDropZone,
         ...props.state,
       } as TableState,
     }),
@@ -310,6 +314,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
+    setShowToolbarDropZone: props.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
   } as MRT_TableInstance<TData>;
 
   if (props.tableInstanceRef) {

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -1,4 +1,4 @@
-import React, { DragEvent } from 'react';
+import React, { DragEvent, useEffect } from 'react';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
@@ -16,25 +16,30 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any> = {}>({
     getState,
     options: { enableGrouping, localization },
     setHoveredColumn,
+    setShowToolbarDropZone,
   } = table;
 
-  const { draggingColumn, hoveredColumn, grouping } = getState();
+  const { draggingColumn, hoveredColumn, grouping, showToolbarDropZone } =
+    getState();
 
   const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
     setHoveredColumn({ id: 'drop-zone' });
   };
 
-  return (
-    <Fade
-      unmountOnExit
-      mountOnEnter
-      in={
+  useEffect(() => {
+    if (table.options.state?.showToolbarDropZone !== undefined) {
+      setShowToolbarDropZone(
         !!enableGrouping &&
-        !!draggingColumn &&
-        !grouping.includes(draggingColumn.id)
-      }
-    >
+          !!draggingColumn &&
+          !grouping.includes(draggingColumn.id),
+      );
+    }
+  }, [enableGrouping, draggingColumn, grouping]);
+
+  return (
+    <Fade in={showToolbarDropZone}>
       <Box
+        className="Mui-ToolbarDropZone"
         sx={(theme) => ({
           alignItems: 'center',
           backgroundColor: alpha(