material-react-table 2.0.0-beta.6 → 2.0.0-beta.8

package/locales/zh-Hant.js

@@ -0,0 +1,93 @@
+const MRT_Localization_ZH_HANT = {
+    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: '或',
+    pin: '固定',
+    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: '全部取消固定',
+};
+
+export { MRT_Localization_ZH_HANT };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "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.",

package/src/body/MRT_TableBodyRow.tsx

@@ -129,6 +129,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     <>
       <TableRow
         data-index={virtualRow?.index}
+        data-pinned={!!isPinned || undefined}
+        data-selected={row.getIsSelected() || undefined}
         onDragEnter={handleDragEnter}
         ref={(node: HTMLTableRowElement) => {
           if (node) {

package/src/column.utils.ts

@@ -316,17 +316,17 @@ export const extraIndexRangeExtractor = (
   range: Range,
   draggingIndex: number,
 ) => {
-  const newIndexs = defaultRangeExtractor(range);
+  const newIndexes = defaultRangeExtractor(range);
   if (
     draggingIndex >= 0 &&
     draggingIndex < Math.max(range.startIndex - range.overscan, 0)
   ) {
-    newIndexs.unshift(draggingIndex);
+    newIndexes.unshift(draggingIndex);
   }
   if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
-    newIndexs.push(draggingIndex);
+    newIndexes.push(draggingIndex);
   }
-  return newIndexs;
+  return newIndexes;
 };
 
 export function createMRTColumnHelper<

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -57,7 +57,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
             : '-28px',
         position: 'absolute',
         px: '4px',
-        right: '0',
+        right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
       })}
     >
       <Divider

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -14,6 +14,7 @@ import {
   type MRT_Row,
   type MRT_RowData,
 } from '../types';
+import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
 
 const blankColProps = {
   children: null,
@@ -50,8 +51,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             ),
             header: tableOptions.localization.pin,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
+            columnDefType: 'display',
             id: 'mrt-row-pin',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -66,8 +67,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             ),
             header: tableOptions.localization.move,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-drag'],
+            columnDefType: 'display',
             id: 'mrt-row-drag',
           },
           ((tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -83,8 +84,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             ),
             header: tableOptions.localization.actions,
             size: 70,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-actions'],
+            columnDefType: 'display',
             id: 'mrt-row-actions',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -102,8 +103,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
                 : null,
               header: tableOptions.localization.expand,
               size: 60,
-              ...tableOptions.defaultDisplayColumn,
               ...tableOptions.displayColumnDefOptions?.['mrt-row-expand'],
+              columnDefType: 'display',
               id: 'mrt-row-expand',
             },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -119,8 +120,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
                 : null,
             header: tableOptions.localization.select,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-select'],
+            columnDefType: 'display',
             id: 'mrt-row-select',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -130,14 +131,15 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             Header: () => tableOptions.localization.rowNumber,
             header: tableOptions.localization.rowNumbers,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-numbers'],
+            columnDefType: 'display',
             id: 'mrt-row-numbers',
           },
-
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
             'mrt-row-spacer',
           ) && {
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-spacer'],
+            ...MRT_DefaultDisplayColumn,
             columnDefType: 'display',
             header: '',
             id: 'mrt-row-spacer',

package/src/hooks/useMRT_TableOptions.ts

@@ -10,14 +10,14 @@ import {
   type MRT_TableOptions,
 } from '../types';
 
-const MRT_DefaultColumn = {
+export const MRT_DefaultColumn = {
   filterVariant: 'text',
   maxSize: 1000,
   minSize: 40,
   size: 180,
 } as const;
 
-const MRT_DefaultDisplayColumn = {
+export const MRT_DefaultDisplayColumn = {
   columnDefType: 'display',
   enableClickToCopy: false,
   enableColumnActions: false,

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -89,6 +89,8 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     }
   };
 
+  if (!columnDef.header) return null;
+
   return (
     <>
       <MenuItem

package/src/style.utils.ts

@@ -32,7 +32,7 @@ export const getMRTTheme = <TData extends MRT_RowData>(
       : lighten(theme.palette.warning.light, 0.5),
   pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
   selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
-  ...table.options.mrtTheme,
+  ...parseFromValuesOrFunc(table.options.mrtTheme, theme),
 });
 
 export const getCommonMRTCellStyles = <TData extends MRT_RowData>({

package/src/table/MRT_TablePaper.tsx

@@ -1,6 +1,7 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
@@ -62,6 +63,8 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         ...tablePaperProps?.style,
       }}
       sx={(theme) => ({
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundImage: 'unset',
         overflow: 'hidden',
         transition: 'all 100ms ease-in-out',
         ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),

package/src/types.ts

@@ -64,6 +64,7 @@ import { type TableFooterProps } from '@mui/material/TableFooter';
 import { type TableHeadProps } from '@mui/material/TableHead';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
+import { type Theme } from '@mui/material/styles';
 import { type DatePickerProps } from '@mui/x-date-pickers';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
@@ -213,6 +214,14 @@ export interface MRT_Localization {
   unpinAll: string;
 }
 
+export interface MRT_Theme {
+  baseBackgroundColor?: CSSProperties['backgroundColor'];
+  draggingBorderColor?: CSSProperties['borderColor'];
+  matchHighlightColor?: CSSProperties['backgroundColor'];
+  pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
+  selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
+}
+
 export interface MRT_RowModel<TData extends MRT_RowData> {
   flatRows: MRT_Row<TData>[];
   rows: MRT_Row<TData>[];
@@ -646,7 +655,8 @@ export type MRT_DisplayColumnIds =
   | 'mrt-row-expand'
   | 'mrt-row-numbers'
   | 'mrt-row-pin'
-  | 'mrt-row-select';
+  | 'mrt-row-select'
+  | 'mrt-row-spacer';
 
 /**
  * `columns` and `data` props are the only required props, but there are over 170 other optional props.
@@ -709,9 +719,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   /**
    * Change the default options for display columns.
    */
-  defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
+  defaultDisplayColumn?: Partial<MRT_DisplayColumnDef<TData>>;
   displayColumnDefOptions?: Partial<{
-    [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef<TData>>;
+    [key in MRT_DisplayColumnIds]: Partial<MRT_DisplayColumnDef<TData>>;
   }>;
   editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table';
   enableBottomToolbar?: boolean;
@@ -771,13 +781,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
    * @link https://www.material-react-table.com/docs/guides/memoize-components
    */
   memoMode?: 'cells' | 'rows' | 'table-body';
-  mrtTheme?: {
-    baseBackgroundColor?: CSSProperties['backgroundColor'];
-    draggingBorderColor?: CSSProperties['borderColor'];
-    matchHighlightColor?: CSSProperties['backgroundColor'];
-    pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
-    selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
-  };
+  mrtTheme?: ((theme: Theme) => MRT_Theme) | MRT_Theme;
   muiBottomToolbarProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
     | BoxProps;