material-react-table 1.8.5 → 1.9.1

package/src/_locales/sr-Latn-RS.ts

@@ -0,0 +1,94 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_SR_LATN_RS: MRT_Localization = {
+  actions: 'Akcije',
+  and: 'i',
+  cancel: 'Otkaži',
+  changeFilterMode: 'Promeni režim filtriranja',
+  changeSearchMode: 'Promeni režim pretrage',
+  clearFilter: 'Poništi filter',
+  clearSearch: 'Poništi pretragu',
+  clearSort: 'Poništi sortiranje',
+  clickToCopy: 'Klikni da kopiraš',
+  collapse: 'Raširi',
+  collapseAll: 'Raširi sve',
+  columnActions: 'Akcije nad kolonama',
+  copiedToClipboard: 'Kopirani u clipboard',
+  dropToGroupBy: 'Ubaci u grupu po {column}',
+  edit: 'Izmeni',
+  expand: 'Proširi',
+  expandAll: 'Proširi sve',
+  filterArrIncludes: 'Uključuje',
+  filterArrIncludesAll: 'Uključuje sve',
+  filterArrIncludesSome: 'Uključuje',
+  filterBetween: 'Između',
+  filterBetweenInclusive: 'Inkluzivno između',
+  filterByColumn: 'Filtriraj po {column}',
+  filterContains: 'Sadrži',
+  filterEmpty: 'Prazno',
+  filterEndsWith: 'Završava se na',
+  filterEquals: 'Jednako',
+  filterEqualsString: 'Jednako',
+  filterFuzzy: 'Fazi',
+  filterGreaterThan: 'Veće',
+  filterGreaterThanOrEqualTo: 'Veće ili jednako',
+  filterInNumberRange: 'Između',
+  filterIncludesString: 'Sadrži',
+  filterIncludesStringSensitive: 'Sadrži',
+  filterLessThan: 'Manje',
+  filterLessThanOrEqualTo: 'Manje ili jednako',
+  filterMode: 'Režim filtriranja: {filterType}',
+  filterNotEmpty: 'Nije prazno',
+  filterNotEquals: 'Nije jednako',
+  filterStartsWith: 'Počinje sa',
+  filterWeakEquals: 'Jednako',
+  filteringByColumn: 'Filtriranje po {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Idi na prvu stranicu',
+  goToLastPage: 'Idi na poslednju stranicu',
+  goToNextPage: 'Idi na sledeću stranicu',
+  goToPreviousPage: 'Idi na prošlu stranicu',
+  grab: 'Zgrabi',
+  groupByColumn: 'Grupiši po {column}',
+  groupedBy: 'Grupisano po ',
+  hideAll: 'Sakrij sve',
+  hideColumn: 'Sakrij {column} kolonu',
+  max: 'Max',
+  min: 'Min',
+  move: 'Pomeri',
+  noRecordsToDisplay: 'Nema redova za prikaz',
+  noResultsFound: 'Nema rezultata',
+  of: 'od',
+  or: 'ili',
+  pinToLeft: 'Zakači levo',
+  pinToRight: 'Zakači desno',
+  resetColumnSize: 'Resetuj širinu kolone',
+  resetOrder: 'Resetuj poredak',
+  rowActions: 'Akcije nad redovima',
+  rowNumber: '#',
+  rowNumbers: 'Broj redova',
+  rowsPerPage: 'Redova po stranici',
+  save: 'Snimi',
+  search: 'Pretraži',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} od {rowCount} redova označeno',
+  select: 'Označi',
+  showAll: 'Prikaži sve',
+  showAllColumns: 'Prikaži sve kolone',
+  showHideColumns: 'Prikaži/sakrij kolone',
+  showHideFilters: 'Prikaži/sakrij filtere',
+  showHideSearch: 'Prikaži/sakrij pretragu',
+  sortByColumnAsc: 'Sortiraj po {column} rastuće',
+  sortByColumnDesc: 'Sortiraj po {column} opadajuće',
+  sortedByColumnAsc: 'Sortirano po {column} rastuće',
+  sortedByColumnDesc: 'Sortirano po {column} opadajuće',
+  thenBy: ', onda po ',
+  toggleDensity: 'Podesi gustinu',
+  toggleFullScreen: 'Uključi/isključi preko celog ekrana',
+  toggleSelectAll: 'Označi/odznači sve redove',
+  toggleSelectRow: 'Označi/odznači red',
+  toggleVisibility: 'Uključi/isključi vidljivost',
+  ungroupByColumn: 'Odgrupiši po {column}',
+  unpin: 'Otkači',
+  unpinAll: 'Otkači sve',
+  unsorted: 'Nesortirano',
+};

package/src/body/MRT_TableBody.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import {
   useVirtualizer,
-  VirtualItem,
-  Virtualizer,
+  type VirtualItem,
+  type Virtualizer,
 } from '@tanstack/react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';

package/src/body/MRT_TableBodyCell.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import Skeleton from '@mui/material/Skeleton';
 import TableCell from '@mui/material/TableCell';
-import { darken, lighten, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
@@ -24,7 +24,6 @@ import type { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
-  enableHover?: boolean;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows: number;
   rowIndex: number;
@@ -35,7 +34,6 @@ interface Props {
 
 export const MRT_TableBodyCell = ({
   cell,
-  enableHover,
   measureElement,
   numRows,
   rowIndex,
@@ -237,14 +235,11 @@ export const MRT_TableBodyCell = ({
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         '&:hover': {
-          backgroundColor:
-            enableHover &&
-            isEditable &&
-            ['table', 'cell'].includes(editingMode ?? '')
-              ? theme.palette.mode === 'dark'
-                ? `${lighten(theme.palette.background.default, 0.2)} !important`
-                : `${darken(theme.palette.background.default, 0.1)} !important`
-              : undefined,
+          outline: ['table', 'cell'].includes(editingMode ?? '')
+            ? `1px solid ${theme.palette.text.secondary}`
+            : undefined,
+          outlineOffset: '-1px',
+          textOverflow: 'clip',
         },
         ...getCommonCellStyles({
           column,
@@ -296,10 +291,10 @@ export const MRT_TableBodyCell = ({
         ) : (
           <MRT_TableBodyCellValue cell={cell} table={table} />
         )}
+        {cell.getIsGrouped() && !columnDef.GroupedCell && (
+          <> ({row.subRows?.length})</>
+        )}
       </>
-      {cell.getIsGrouped() && !columnDef.GroupedCell && (
-        <> ({row.subRows?.length})</>
-      )}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,6 +1,6 @@
 import React, { DragEvent, memo, useRef } from 'react';
 import TableRow from '@mui/material/TableRow';
-import { darken, lighten } from '@mui/material/styles';
+import { alpha, darken, lighten } from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
@@ -32,7 +32,6 @@ export const MRT_TableBodyRow = ({
   virtualRow,
 }: Props) => {
   const {
-    getIsSomeColumnsPinned,
     getState,
     options: {
       enableRowOrdering,
@@ -63,7 +62,6 @@ export const MRT_TableBodyRow = ({
     <>
       <TableRow
         data-index={virtualRow?.index}
-        hover
         onDragEnter={handleDragEnter}
         selected={row.getIsSelected()}
         ref={(node: HTMLTableRowElement) => {
@@ -87,8 +85,10 @@ export const MRT_TableBodyRow = ({
           width: '100%',
           '&:hover td': {
             backgroundColor:
-              tableRowProps?.hover !== false && getIsSomeColumnsPinned()
-                ? theme.palette.mode === 'dark'
+              tableRowProps?.hover !== false
+                ? row.getIsSelected()
+                  ? `${alpha(theme.palette.primary.main, 0.2)}`
+                  : theme.palette.mode === 'dark'
                   ? `${lighten(theme.palette.background.default, 0.12)}`
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
@@ -107,7 +107,6 @@ export const MRT_TableBodyRow = ({
             : (cellOrVirtualCell as MRT_Cell);
           const props = {
             cell,
-            enableHover: tableRowProps?.hover !== false,
             key: cell.id,
             measureElement: columnVirtualizer?.measureElement,
             numRows,

package/src/column.utils.ts

@@ -1,8 +1,8 @@
-import type { Row } from '@tanstack/react-table';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 import { alpha, lighten } from '@mui/material/styles';
+import type { Row } from '@tanstack/react-table';
 import type { TableCellProps } from '@mui/material/TableCell';
 import type { Theme } from '@mui/material/styles';
 import type {

package/src/filterFns.ts

@@ -1,5 +1,5 @@
 import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
-import { filterFns, Row } from '@tanstack/react-table';
+import { filterFns, type Row } from '@tanstack/react-table';
 
 const fuzzy = <TData extends Record<string, any> = {}>(
   row: Row<TData>,

package/src/footer/MRT_TableFooterRow.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { VirtualItem } from '@tanstack/react-virtual';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {

package/src/head/MRT_TableHeadCell.tsx

@@ -213,10 +213,14 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
+                minWidth: '5ch',
                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:
                   (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
+                '&:hover': {
+                  textOverflow: 'clip',
+                },
               }}
               title={columnDefType === 'data' ? columnDef.header : undefined}
             >

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -31,7 +31,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
       onTouchStart={header.getResizeHandler()}
       sx={(theme) => ({
         cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.5rem' : '-1rem',
+        mr: density === 'compact' ? '-0.75rem' : '-1rem',
         position: 'absolute',
         right: '1px',
         px: '4px',

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_Header, MRT_TableInstance } from '..';
@@ -16,6 +17,7 @@ export const MRT_TableHeadCellSortLabel = ({
   tableCellProps,
 }: Props) => {
   const {
+    getState,
     options: {
       icons: { ArrowDownwardIcon },
       localization,
@@ -23,6 +25,7 @@ export const MRT_TableHeadCellSortLabel = ({
   } = table;
   const { column } = header;
   const { columnDef } = column;
+  const { sorting } = getState();
 
   const sortTooltip = column.getIsSorted()
     ? column.getIsSorted() === 'desc'
@@ -32,28 +35,33 @@ export const MRT_TableHeadCellSortLabel = ({
 
   return (
     <Tooltip arrow placement="top" title={sortTooltip}>
-      <TableSortLabel
-        aria-label={sortTooltip}
-        active={!!column.getIsSorted()}
-        direction={
-          column.getIsSorted()
-            ? (column.getIsSorted() as 'asc' | 'desc')
-            : undefined
-        }
-        sx={{
-          flex: '0 0',
-          width: '2.3ch',
-          transform:
-            tableCellProps?.align !== 'right'
-              ? 'translateX(-0.5ch)'
-              : undefined,
-        }}
-        IconComponent={ArrowDownwardIcon}
-        onClick={(e) => {
-          e.stopPropagation();
-          header.column.getToggleSortingHandler()?.(e);
-        }}
-      />
+      <Badge
+        badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0}
+        overlap="circular"
+      >
+        <TableSortLabel
+          aria-label={sortTooltip}
+          active={!!column.getIsSorted()}
+          direction={
+            column.getIsSorted()
+              ? (column.getIsSorted() as 'asc' | 'desc')
+              : undefined
+          }
+          sx={{
+            flex: '0 0',
+            width: '2.4ch',
+            transform:
+              tableCellProps?.align !== 'right'
+                ? 'translateX(-0.5ch)'
+                : undefined,
+          }}
+          IconComponent={ArrowDownwardIcon}
+          onClick={(e) => {
+            e.stopPropagation();
+            header.column.getToggleSortingHandler()?.(e);
+          }}
+        />
+      </Badge>
     </Tooltip>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -149,7 +149,7 @@ export const MRT_FilterTextField = ({
     } else if (isRangeFilter) {
       setFilterValue('');
       column.setFilterValue((old: [string | undefined, string | undefined]) => {
-        const newFilterValues = old ?? ['', ''];
+        const newFilterValues = (Array.isArray(old) && old) || ['', ''];
         newFilterValues[rangeFilterIndex as number] = undefined;
         return newFilterValues;
       });

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -99,6 +99,10 @@ export const mrtFilterOptions = (
   },
 ];
 
+const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
+const emptyModes = ['empty', 'notEmpty'];
+const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
+
 interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
@@ -150,48 +154,66 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   );
 
   const handleSelectFilterMode = (option: MRT_FilterOption) => {
-    if (header && column) {
+    const prevFilterMode = columnDef?._filterFn ?? '';
+    if (!header || !column) {
+      // global filter mode
+      setGlobalFilterFn(option);
+    } else if (option !== prevFilterMode) {
+      // column filter mode
       setColumnFilterFns((prev: { [key: string]: any }) => ({
         ...prev,
         [header.id]: option,
       }));
-      if (['empty', 'notEmpty'].includes(option as string)) {
-        if (currentFilterValue !== ' ') {
+
+      // reset filter value and/or perform new filter render
+      if (emptyModes.includes(option)) {
+        // will now be empty/notEmpty filter mode
+        if (
+          currentFilterValue !== ' ' &&
+          !emptyModes.includes(prevFilterMode)
+        ) {
           column.setFilterValue(' ');
+        } else if (currentFilterValue) {
+          column.setFilterValue(currentFilterValue); // perform new filter render
         }
       } else if (
         columnDef?.filterVariant === 'multi-select' ||
-        ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(
-          option as string,
-        )
+        arrModes.includes(option as string)
       ) {
+        // will now be array filter mode
         if (
           currentFilterValue instanceof String ||
           (currentFilterValue as Array<any>)?.length
         ) {
           column.setFilterValue([]);
           setFilterValue?.([]);
+        } else if (currentFilterValue) {
+          column.setFilterValue(currentFilterValue); // perform new filter render
         }
       } else if (
         columnDef?.filterVariant === 'range' ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(
-          option as MRT_FilterOption,
-        )
+        rangeModes.includes(option as MRT_FilterOption)
       ) {
-        if (!(currentFilterValue as Array<any>)?.every((v) => v === '')) {
+        // will now be range filter mode
+        if (
+          !Array.isArray(currentFilterValue) ||
+          (!(currentFilterValue as Array<any>)?.every((v) => v === '') &&
+            !rangeModes.includes(prevFilterMode))
+        ) {
           column.setFilterValue(['', '']);
           setFilterValue?.('');
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
         }
       } else {
-        if (
-          !['', undefined].includes(currentFilterValue as string | undefined)
-        ) {
+        // will now be single value filter mode
+        if (Array.isArray(currentFilterValue)) {
           column.setFilterValue('');
           setFilterValue?.('');
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
         }
       }
-    } else {
-      setGlobalFilterFn(option);
     }
     setAnchorEl(null);
     onSelect?.();

package/src/menus/MRT_RowActionMenu.tsx

@@ -39,6 +39,7 @@ export const MRT_RowActionMenu = ({
     <Menu
       anchorEl={anchorEl}
       open={!!anchorEl}
+      onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -98,8 +98,9 @@ export const MRT_ShowHideColumnsMenuItems = <
           justifyContent: 'flex-start',
           my: 0,
           opacity: isDragging ? 0.5 : 1,
+          outlineOffset: '-2px',
           outline: isDragging
-            ? `1px dashed ${theme.palette.divider}`
+            ? `2px dashed ${theme.palette.divider}`
             : hoveredColumn?.id === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : 'none',

package/src/sortingFns.ts

@@ -1,6 +1,6 @@
-import { compareItems, RankingInfo } from '@tanstack/match-sorter-utils';
-import { Row, sortingFns } from '@tanstack/react-table';
-import { MRT_Row } from '.';
+import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
+import { type Row, sortingFns } from '@tanstack/react-table';
+import type { MRT_Row } from '.';
 
 const fuzzy = <TData extends Record<string, any> = {}>(
   rowA: Row<TData>,

package/src/table/MRT_Table.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import {
   defaultRangeExtractor,
-  Range,
   useVirtualizer,
-  Virtualizer,
+  type Range,
+  type Virtualizer,
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import { MRT_TableHead } from '../head/MRT_TableHead';

package/src/table/MRT_TableRoot.tsx

@@ -26,7 +26,7 @@ import {
   showExpandColumn,
   getColumnId,
 } from '../column.utils';
-import {
+import type {
   MRT_Cell,
   MRT_Column,
   MRT_ColumnDef,