material-react-table 2.0.0-beta.3 → 2.0.0-beta.5

package/src/locales/az.ts

@@ -0,0 +1,94 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_AZ: MRT_Localization = {
+  actions: 'Əməliyyatlar',
+  and: 'və',
+  cancel: 'Ləğv Et',
+  changeFilterMode: 'Filter Rejimini Dəyiş',
+  changeSearchMode: 'Axtarış Rejimini Dəyiş',
+  clearFilter: 'Filteri təmizlə',
+  clearSearch: 'Axtarışı təmizlə',
+  clearSort: 'Sıralamanı sıfırla',
+  clickToCopy: 'Köçür',
+  columnActions: 'Sütun Əməliyyatları',
+  copiedToClipboard: 'Panelə Köçürüldü',
+  collapse: 'Daralt',
+  collapseAll: 'Hamısını Daralt',
+  dropToGroupBy: '{column} İlə Qruplandırmaq Üçün Buraxın',
+  edit: 'Düzəliş Et',
+  expand: 'Genişlət',
+  expandAll: 'Hamısını Genişlət',
+  filterArrIncludes: 'Daxil Et',
+  filterArrIncludesAll: 'Hamısını Daxil Et',
+  filterArrIncludesSome: 'Daxildir',
+  filterBetween: 'Arasında',
+  filterBetweenInclusive: 'Daxildir Arasında',
+  filterByColumn: '{column} Filteri',
+  filterContains: 'Daxildir',
+  filterEmpty: 'Boş',
+  filterEndsWith: 'Sonu',
+  filterEquals: 'Bərabər',
+  filterEqualsString: 'Bərabər',
+  filterFuzzy: 'Təxmini',
+  filterGreaterThan: 'Böyükdür',
+  filterGreaterThanOrEqualTo: 'Böyük Bərabərdir',
+  filterInNumberRange: 'Arasında',
+  filterIncludesString: 'Daxil',
+  filterIncludesStringSensitive: 'Daxil',
+  filterLessThan: 'Kiçikdir',
+  filterLessThanOrEqualTo: 'Kiçik Bərabərdir',
+  filterMode: 'Filter Rejimi: {filterType}',
+  filterNotEmpty: 'Boş Deyil',
+  filterNotEquals: 'Bərabər Deyil',
+  filterStartsWith: 'Başlanğıcı',
+  filterWeakEquals: 'Bərabərdir',
+  filteringByColumn: 'Filter Rejimi - {filterType} {filterValue}',
+  goToFirstPage: 'İlk Səhifəyə Get',
+  goToLastPage: 'Son Səhifəyə Get',
+  goToNextPage: 'Sonrakı Səhifəyə Get',
+  goToPreviousPage: 'Əvvəlki Səhifəyə Get',
+  grab: 'Tut',
+  groupByColumn: "{column}'a Görə Qruplandır",
+  groupedBy: 'Qruplandı ',
+  hideAll: 'Hamısını Gizlə',
+  hideColumn: '{column} Sütununu Gizlə',
+  max: 'Maksimum',
+  min: 'Minimum',
+  move: 'Daşı',
+  noRecordsToDisplay: 'Göstəriləcək Qeyd Yoxdur',
+  noResultsFound: 'Heç Bir Nəticə Tapılmadı',
+  of: 'of',
+  or: 'və ya',
+  pin: 'Sabitlə',
+  pinToLeft: 'Sola Sabitlə',
+  pinToRight: 'Sağa Sabitlə',
+  resetColumnSize: 'Sütun Ölçüsünü Sıfırla',
+  resetOrder: 'Sıranı Temizlə',
+  rowActions: 'Sətir Əməliyyatları',
+  rowNumber: '#',
+  rowNumbers: 'Sətir Sayl',
+  rowsPerPage: 'Səhifə Başına Sətirlər',
+  save: 'Yadda Saxla',
+  search: 'Axtar',
+  selectedCountOfRowCountRowsSelected:
+    '{rowCount} Sətir Arasında {selectedCount} Ədəd Seçildi',
+  select: 'Seç',
+  showAll: 'Hamısını Göstər',
+  showAllColumns: 'Bütün Sütunları Göstər',
+  showHideColumns: 'Sütunları Göstər/Gizlə',
+  showHideFilters: 'Filterləri Göstər/Gizlə',
+  showHideSearch: 'Axtarışı Göstər/Gizlə',
+  sortByColumnAsc: 'Artan Şəkildə Sırala',
+  sortByColumnDesc: 'Azalan Şəkildə Sırala',
+  sortedByColumnAsc: 'Artan Şəkildə Sıralandı',
+  sortedByColumnDesc: 'Azalan Şəkildə Sıralandı',
+  thenBy: ', sonra ',
+  toggleDensity: 'Sıxlığı Dəyiş',
+  toggleFullScreen: 'Tam Ekranı Dəyiş',
+  toggleSelectAll: 'Hamısını Seç',
+  toggleSelectRow: 'Sətir Seç',
+  toggleVisibility: 'Görünməni Dəyiş',
+  ungroupByColumn: '{column} Sütununu Ayır',
+  unpin: 'Ayır',
+  unpinAll: 'Hamısını Ayır',
+};

package/src/locales/no.ts

@@ -1,4 +1,4 @@
-import { type MRT_Localization } from '../types';
+import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NO: MRT_Localization = {
   cancel: 'Avbryt',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import {
@@ -24,7 +24,7 @@ export const commonListItemStyles = {
   display: 'flex',
 };
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header: MRT_Header<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -36,6 +36,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   header,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -396,6 +397,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {columnDef.renderColumnActionsMenuItems?.({
         closeMenu: () => setAnchorEl(null),

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import Box from '@mui/material/Box';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import {
   type MRT_FilterOption,
@@ -105,7 +105,7 @@ const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const rangeVariants = ['range-slider', 'date-range', 'range'];
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
   onSelect?: () => void;
@@ -121,6 +121,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   setAnchorEl,
   setFilterValue,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -240,6 +241,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {(header && column && columnDef
         ? columnDef.renderColumnFilterModeMenuItems?.({

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,7 +1,7 @@
 import { type MouseEvent } from 'react';
 import Box from '@mui/material/Box';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import {
   commonListItemStyles,
@@ -14,7 +14,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   handleEdit: (event: MouseEvent) => void;
   row: MRT_Row<TData>;
@@ -28,6 +28,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   row,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -49,6 +50,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {parseFromValuesOrFunc(enableEditing, row) && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import { getDefaultColumnOrderIds } from '../column.utils';
 import {
@@ -11,7 +11,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -22,6 +22,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   anchorEl,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getAllColumns,
@@ -85,6 +86,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       <Box
         sx={{

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -7,20 +7,21 @@ import {
 } from 'react';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../column.utils';
+import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends MenuItemProps {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
@@ -34,6 +35,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   hoveredColumn,
   setHoveredColumn,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -93,19 +95,21 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
         disableRipple
         onDragEnter={handleDragEnter}
         ref={menuItemRef as any}
+        {...rest}
         sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
           my: 0,
           opacity: isDragging ? 0.5 : 1,
           outline: isDragging
-            ? `2px dashed ${theme.palette.divider}`
+            ? `2px dashed ${theme.palette.grey[500]}`
             : hoveredColumn?.id === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
+            ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
             : 'none',
           outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
         })}
       >
         <Box

package/src/modals/MRT_EditRowModal.tsx

@@ -1,4 +1,4 @@
-import Dialog from '@mui/material/Dialog';
+import Dialog, { type DialogProps } from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -12,7 +12,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<DialogProps> {
   open: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -20,6 +20,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_EditRowModal = <TData extends MRT_RowData>({
   open,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -42,6 +43,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
     ...parseFromValuesOrFunc(muiEditRowModalProps, { row, table }),
     ...(creatingRow &&
       parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
+    ...rest,
   };
 
   const internalEditComponents = row
@@ -92,7 +94,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
             <form onSubmit={(e) => e.preventDefault()}>
               <Stack
                 sx={{
-                  gap: '24px',
+                  gap: '32px',
                   paddingTop: '16px',
                   width: '100%',
                 }}

package/src/style.utils.ts

@@ -0,0 +1,149 @@
+import { type CSSProperties } from 'react';
+import { type TableCellProps } from '@mui/material/TableCell';
+import { alpha, darken, lighten } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
+import {
+  getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn,
+  getTotalRight,
+  parseFromValuesOrFunc,
+} from './column.utils';
+import {
+  type MRT_Column,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from './types';
+
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const getMRTTheme = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  theme: Theme,
+) => ({
+  baseBackgroundColor:
+    theme.palette.mode === 'dark'
+      ? lighten(theme.palette.background.default, 0.05)
+      : theme.palette.background.default,
+  draggingBorderColor: theme.palette.primary.main,
+  matchHighlightColor:
+    theme.palette.mode === 'dark'
+      ? darken(theme.palette.warning.dark, 0.25)
+      : 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,
+});
+
+export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
+  column,
+  header,
+  table,
+  tableCellProps,
+  theme,
+}: {
+  column: MRT_Column<TData>;
+  header?: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+  tableCellProps: TableCellProps;
+  theme: Theme;
+}) => {
+  const {
+    options: { layoutMode },
+  } = table;
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px)`,
+  };
+
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = '0 0 auto';
+  }
+
+  return {
+    backgroundColor:
+      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+        ? alpha(
+            darken(
+              getMRTTheme(table, theme).baseBackgroundColor,
+              theme.palette.mode === 'dark' ? 0.05 : 0.01,
+            ),
+            0.97,
+          )
+        : 'inherit',
+    backgroundImage: 'inherit',
+    boxShadow: getIsLastLeftPinnedColumn(table, column)
+      ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
+      : getIsFirstRightPinnedColumn(column)
+      ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
+      : undefined,
+    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+    left:
+      column.getIsPinned() === 'left'
+        ? `${column.getStart('left')}px`
+        : undefined,
+    ml:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'left' &&
+      column.getPinnedIndex() === 0
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.left?.length ?? 1)
+          }px`
+        : undefined,
+    mr:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'right' &&
+      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.right?.length ?? 1) *
+            1.2
+          }px`
+        : undefined,
+    opacity:
+      table.getState().draggingColumn?.id === column.id ||
+      table.getState().hoveredColumn?.id === column.id
+        ? 0.5
+        : 1,
+    position:
+      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+        ? 'sticky'
+        : undefined,
+    right:
+      column.getIsPinned() === 'right'
+        ? `${getTotalRight(table, column)}px`
+        : undefined,
+    transition: table.options.enableColumnVirtualization
+      ? 'none'
+      : `padding 150ms ease-in-out`,
+    ...widthStyles,
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+  };
+};
+
+export const getCommonToolbarStyles = <TData extends MRT_RowData>({
+  table,
+  theme,
+}: {
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => ({
+  alignItems: 'flex-start',
+  backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+  display: 'grid',
+  flexWrap: 'wrap-reverse',
+  minHeight: '3.5rem',
+  overflow: 'hidden',
+  position: 'relative',
+  transition: 'all 150ms ease-in-out',
+  zIndex: 1,
+});

package/src/table/MRT_Table.tsx

@@ -4,23 +4,24 @@ import {
   type Virtualizer,
   useVirtualizer,
 } from '@tanstack/react-virtual';
-import Table from '@mui/material/Table';
+import Table, { type TableProps } from '@mui/material/Table';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
 import {
   extraIndexRangeExtractor,
-  parseCSSVarId,
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
+import { parseCSSVarId } from '../style.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_Table = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getFlatHeaders,
@@ -30,7 +31,6 @@ export const MRT_Table = <TData extends MRT_RowData>({
       columnVirtualizerOptions,
       columns,
       enableColumnPinning,
-      enableColumnResizing,
       enableColumnVirtualization,
       enableStickyHeader,
       enableTableFooter,
@@ -50,7 +50,10 @@ export const MRT_Table = <TData extends MRT_RowData>({
     isFullScreen,
   } = getState();
 
-  const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+  const tableProps = {
+    ...parseFromValuesOrFunc(muiTableProps, { table }),
+    ...rest,
+  };
 
   const columnVirtualizerProps = parseFromValuesOrFunc(
     columnVirtualizerOptions,
@@ -157,32 +160,23 @@ export const MRT_Table = <TData extends MRT_RowData>({
   };
 
   return (
-    <>
-      <Table
-        stickyHeader={enableStickyHeader || isFullScreen}
-        {...tableProps}
-        style={{ ...columnSizeVars, ...tableProps?.style }}
-        sx={(theme) => ({
-          borderCollapse: 'separate',
-          display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-          tableLayout:
-            layoutMode === 'semantic' && enableColumnResizing
-              ? 'fixed'
-              : undefined,
-          ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
-        })}
-      >
-        {enableTableHead && <MRT_TableHead {...props} />}
-        {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
-          <Memo_MRT_TableBody
-            columnVirtualizer={columnVirtualizer}
-            {...props}
-          />
-        ) : (
-          <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
-        )}
-        {enableTableFooter && <MRT_TableFooter {...props} />}
-      </Table>
-    </>
+    <Table
+      stickyHeader={enableStickyHeader || isFullScreen}
+      {...tableProps}
+      style={{ ...columnSizeVars, ...tableProps?.style }}
+      sx={(theme) => ({
+        borderCollapse: 'separate',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
+      })}
+    >
+      {enableTableHead && <MRT_TableHead {...props} />}
+      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+        <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+      ) : (
+        <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+      )}
+      {enableTableFooter && <MRT_TableFooter {...props} />}
+    </Table>
   );
 };