material-react-table 1.8.5 → 1.9.0

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_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

@@ -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,7 +85,7 @@ export const MRT_TableBodyRow = ({
           width: '100%',
           '&:hover td': {
             backgroundColor:
-              tableRowProps?.hover !== false && getIsSomeColumnsPinned()
+              tableRowProps?.hover !== false
                 ? theme.palette.mode === 'dark'
                   ? `${lighten(theme.palette.background.default, 0.12)}`
                   : `${darken(theme.palette.background.default, 0.05)}`
@@ -107,7 +105,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/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/menus/MRT_FilterOptionMenu.tsx

@@ -156,9 +156,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         [header.id]: option,
       }));
       if (['empty', 'notEmpty'].includes(option as string)) {
-        if (currentFilterValue !== ' ') {
-          column.setFilterValue(' ');
-        }
+        column.setFilterValue(' ');
       } else if (
         columnDef?.filterVariant === 'multi-select' ||
         ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(

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',