material-react-table 2.0.5 → 2.1.0

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -19,12 +19,21 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
 }: Props<TData>) => {
   const {
     getState,
-    options: { columnResizeMode },
+    options: { columnResizeDirection, columnResizeMode },
     setColumnSizingInfo,
   } = table;
   const { density } = getState();
   const { column } = header;
 
+  const mx =
+    density === 'compact'
+      ? '-8px'
+      : density === 'comfortable'
+        ? '-16px'
+        : '-24px';
+
+  const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
+
   return (
     <Box
       className="Mui-TableHeadCell-ResizeHandle-Wrapper"
@@ -40,7 +49,10 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
       style={{
         transform:
           column.getIsResizing() && columnResizeMode === 'onEnd'
-            ? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
+            ? `translateX(${
+                (columnResizeDirection === 'rtl' ? -1 : 1) *
+                (getState().columnSizingInfo.deltaOffset ?? 0)
+              }px)`
             : undefined,
       }}
       sx={(theme) => ({
@@ -50,15 +62,12 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
             header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
         },
         cursor: 'col-resize',
-        mr:
-          density === 'compact'
-            ? '-12px'
-            : density === 'comfortable'
-            ? '-20px'
-            : '-28px',
+        left: columnResizeDirection === 'rtl' ? lr : undefined,
+        ml: columnResizeDirection === 'rtl' ? mx : undefined,
+        mr: columnResizeDirection === 'ltr' ? mx : undefined,
         position: 'absolute',
         px: '4px',
-        right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
+        right: columnResizeDirection === 'ltr' ? lr : undefined,
       })}
     >
       <Divider
@@ -70,6 +79,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
           borderWidth: '2px',
           height: '24px',
           touchAction: 'none',
+          transform: 'translateX(4px)',
           transition: column.getIsResizing()
             ? undefined
             : 'all 150ms ease-in-out',

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -10,21 +10,12 @@ import {
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
   type MRT_DefinedTableOptions,
+  type MRT_DisplayColumnIds,
   type MRT_GroupingState,
+  type MRT_Localization,
   type MRT_Row,
   type MRT_RowData,
 } from '../types';
-import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
-
-const blankColProps = {
-  children: null,
-  sx: {
-    flex: '1 0 auto',
-    minWidth: 0,
-    p: 0,
-    width: 0,
-  },
-};
 
 interface Params<TData extends MRT_RowData> {
   columnOrder: MRT_ColumnOrderState;
@@ -33,124 +24,28 @@ interface Params<TData extends MRT_RowData> {
   tableOptions: MRT_DefinedTableOptions<TData>;
 }
 
-export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
-  columnOrder,
-  creatingRow,
-  grouping,
-  tableOptions,
-}: Params<TData>) => {
+export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
+  params: Params<TData>,
+): MRT_ColumnDef<TData>[] => {
+  const { columnOrder, creatingRow, grouping, tableOptions } = params;
+  const order = tableOptions.state?.columnOrder ?? columnOrder;
+
   return useMemo(
     () =>
-      (
-        [
-          (tableOptions.state?.columnOrder ?? columnOrder).includes(
-            'mrt-row-pin',
-          ) && {
-            Cell: ({ row, table }) => (
-              <MRT_TableBodyRowPinButton row={row} table={table} />
-            ),
-            header: tableOptions.localization.pin,
-            size: 60,
-            ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
-            columnDefType: 'display',
-            id: 'mrt-row-pin',
-          },
-          (tableOptions.state?.columnOrder ?? columnOrder).includes(
-            'mrt-row-drag',
-          ) && {
-            Cell: ({ row, rowRef, table }) => (
-              <MRT_TableBodyRowGrabHandle
-                row={row}
-                rowRef={rowRef as RefObject<HTMLTableRowElement>}
-                table={table}
-              />
-            ),
-            header: tableOptions.localization.move,
-            size: 60,
-            ...tableOptions.displayColumnDefOptions?.['mrt-row-drag'],
-            columnDefType: 'display',
-            id: 'mrt-row-drag',
-          },
-          ((tableOptions.state?.columnOrder ?? columnOrder).includes(
-            'mrt-row-actions',
-          ) ||
-            (creatingRow && tableOptions.createDisplayMode === 'row')) && {
-            Cell: ({ cell, row, table }) => (
-              <MRT_ToggleRowActionMenuButton
-                cell={cell}
-                row={row}
-                table={table}
-              />
-            ),
-            header: tableOptions.localization.actions,
-            size: 70,
-            ...tableOptions.displayColumnDefOptions?.['mrt-row-actions'],
-            columnDefType: 'display',
-            id: 'mrt-row-actions',
-          },
-          (tableOptions.state?.columnOrder ?? columnOrder).includes(
-            'mrt-row-expand',
-          ) &&
-            showExpandColumn(
-              tableOptions,
-              tableOptions.state?.grouping ?? grouping,
-            ) && {
-              Cell: ({ row, table }) => (
-                <MRT_ExpandButton row={row} table={table} />
-              ),
-              Header: tableOptions.enableExpandAll
-                ? ({ table }) => <MRT_ExpandAllButton table={table} />
-                : null,
-              header: tableOptions.localization.expand,
-              size: 60,
-              ...tableOptions.displayColumnDefOptions?.['mrt-row-expand'],
-              columnDefType: 'display',
-              id: 'mrt-row-expand',
-            },
-          (tableOptions.state?.columnOrder ?? columnOrder).includes(
-            'mrt-row-select',
-          ) && {
-            Cell: ({ row, table }) => (
-              <MRT_SelectCheckbox row={row} table={table} />
-            ),
-            Header:
-              tableOptions.enableSelectAll &&
-              tableOptions.enableMultiRowSelection
-                ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
-                : null,
-            header: tableOptions.localization.select,
-            size: 60,
-            ...tableOptions.displayColumnDefOptions?.['mrt-row-select'],
-            columnDefType: 'display',
-            id: 'mrt-row-select',
-          },
-          (tableOptions.state?.columnOrder ?? columnOrder).includes(
-            'mrt-row-numbers',
-          ) && {
-            Cell: ({ row }) => row.index + 1,
-            Header: () => tableOptions.localization.rowNumber,
-            header: tableOptions.localization.rowNumbers,
-            size: 60,
-            ...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',
-            muiTableBodyCellProps: blankColProps,
-            muiTableFooterCellProps: blankColProps,
-            muiTableHeadCellProps: blankColProps,
-          },
-        ] as MRT_ColumnDef<TData>[]
-      ).filter(Boolean),
+      [
+        makeRowPinColumn,
+        makeRowDragColumn,
+        makeRowActionsColumn,
+        makeRowExpandColumn,
+        makeRowSelectColumn,
+        makeRowNumbersColumn,
+        makeSpacerColumn,
+      ]
+        .map((makeCol) => makeCol(params, order))
+        .filter(Boolean) as MRT_ColumnDef<TData>[],
     [
       columnOrder,
+      creatingRow,
       grouping,
       tableOptions.displayColumnDefOptions,
       tableOptions.editDisplayMode,
@@ -177,3 +72,155 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
     ],
   );
 };
+
+function defaultDisplayColumnProps<TData extends MRT_RowData>(
+  {
+    defaultDisplayColumn,
+    displayColumnDefOptions,
+    localization,
+  }: MRT_DefinedTableOptions<TData>,
+  id: MRT_DisplayColumnIds,
+  header?: keyof MRT_Localization,
+  size = 60,
+) {
+  return {
+    ...defaultDisplayColumn,
+    header: header ? localization[header]! : '',
+    size,
+    ...displayColumnDefOptions?.[id],
+    id,
+  } as const;
+}
+
+function makeRowPinColumn<TData extends MRT_RowData>(
+  { tableOptions }: Params<TData>,
+  order: MRT_ColumnOrderState,
+): MRT_ColumnDef<TData> | null {
+  const id: MRT_DisplayColumnIds = 'mrt-row-pin';
+  if (order.includes(id)) {
+    return {
+      Cell: ({ row, table }) => (
+        <MRT_TableBodyRowPinButton row={row} table={table} />
+      ),
+      ...defaultDisplayColumnProps(tableOptions, id, 'pin'),
+    };
+  }
+  return null;
+}
+
+function makeRowDragColumn<TData extends MRT_RowData>(
+  { tableOptions }: Params<TData>,
+  order: MRT_ColumnOrderState,
+): MRT_ColumnDef<TData> | null {
+  const id: MRT_DisplayColumnIds = 'mrt-row-drag';
+  if (order.includes(id)) {
+    return {
+      Cell: ({ row, rowRef, table }) => (
+        <MRT_TableBodyRowGrabHandle
+          row={row}
+          rowRef={rowRef as RefObject<HTMLTableRowElement>}
+          table={table}
+        />
+      ),
+      ...defaultDisplayColumnProps(tableOptions, id, 'move'),
+    };
+  }
+  return null;
+}
+
+function makeRowActionsColumn<TData extends MRT_RowData>(
+  { creatingRow, tableOptions }: Params<TData>,
+  order: MRT_ColumnOrderState,
+): MRT_ColumnDef<TData> | null {
+  const id: MRT_DisplayColumnIds = 'mrt-row-actions';
+  if (
+    order.includes(id) ||
+    (creatingRow && tableOptions.createDisplayMode === 'row')
+  ) {
+    return {
+      Cell: ({ cell, row, table }) => (
+        <MRT_ToggleRowActionMenuButton cell={cell} row={row} table={table} />
+      ),
+      ...defaultDisplayColumnProps(tableOptions, id, 'actions'),
+    };
+  }
+  return null;
+}
+
+function makeRowExpandColumn<TData extends MRT_RowData>(
+  { grouping, tableOptions }: Params<TData>,
+  order: MRT_ColumnOrderState,
+): MRT_ColumnDef<TData> | null {
+  const id: MRT_DisplayColumnIds = 'mrt-row-expand';
+  if (
+    order.includes(id) &&
+    showExpandColumn(tableOptions, tableOptions.state?.grouping ?? grouping)
+  ) {
+    return {
+      Cell: ({ row, table }) => <MRT_ExpandButton row={row} table={table} />,
+      Header: tableOptions.enableExpandAll
+        ? ({ table }) => <MRT_ExpandAllButton table={table} />
+        : undefined,
+      ...defaultDisplayColumnProps(tableOptions, id, 'expand'),
+    };
+  }
+  return null;
+}
+
+function makeRowSelectColumn<TData extends MRT_RowData>(
+  { tableOptions }: Params<TData>,
+  order: MRT_ColumnOrderState,
+): MRT_ColumnDef<TData> | null {
+  const id: MRT_DisplayColumnIds = 'mrt-row-select';
+  if (order.includes(id)) {
+    return {
+      Cell: ({ row, table }) => <MRT_SelectCheckbox row={row} table={table} />,
+      Header:
+        tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
+          ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
+          : undefined,
+      ...defaultDisplayColumnProps(tableOptions, id, 'select'),
+    };
+  }
+  return null;
+}
+
+function makeRowNumbersColumn<TData extends MRT_RowData>(
+  { tableOptions }: Params<TData>,
+  order: MRT_ColumnOrderState,
+): MRT_ColumnDef<TData> | null {
+  const id: MRT_DisplayColumnIds = 'mrt-row-numbers';
+  if (order.includes(id) || tableOptions.enableRowNumbers)
+    return {
+      Cell: ({ row }) => row.index + 1,
+      Header: () => tableOptions.localization.rowNumber,
+      ...defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'),
+    };
+  return null;
+}
+
+const blankColProps = {
+  children: null,
+  sx: {
+    flex: '1 0 auto',
+    minWidth: 0,
+    p: 0,
+    width: 0,
+  },
+};
+
+function makeSpacerColumn<TData extends MRT_RowData>(
+  { tableOptions }: Params<TData>,
+  order: MRT_ColumnOrderState,
+): MRT_ColumnDef<TData> | null {
+  const id: MRT_DisplayColumnIds = 'mrt-row-spacer';
+  if (order.includes(id)) {
+    return {
+      ...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
+      muiTableBodyCellProps: blankColProps,
+      muiTableFooterCellProps: blankColProps,
+      muiTableHeadCellProps: blankColProps,
+    };
+  }
+  return null;
+}

package/src/hooks/useMRT_TableOptions.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useTheme } from '@mui/material';
 import { MRT_AggregationFns } from '../aggregationFns';
 import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
@@ -38,6 +39,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   aggregationFns,
   autoResetExpanded = false,
   columnFilterDisplayMode = 'subheader',
+  columnResizeDirection,
   columnResizeMode = 'onChange',
   createDisplayMode = 'modal',
   defaultColumn,
@@ -92,6 +94,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   sortingFns,
   ...rest
 }: MRT_TableOptions<TData>) => {
+  const theme = useTheme();
   const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
   const _localization = useMemo(
     () => ({
@@ -118,6 +121,10 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     [defaultDisplayColumn],
   );
 
+  if (!columnResizeDirection) {
+    columnResizeDirection = theme.direction || 'ltr';
+  }
+
   layoutMode =
     layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
   if (
@@ -146,6 +153,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     aggregationFns: _aggregationFns,
     autoResetExpanded,
     columnFilterDisplayMode,
+    columnResizeDirection,
     columnResizeMode,
     createDisplayMode,
     defaultColumn: _defaultColumn,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -127,7 +127,9 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
       variant="standard"
       {...textFieldProps}
       InputProps={{
-        disableUnderline: editDisplayMode === 'table',
+        ...(textFieldProps.variant !== 'outlined'
+          ? { disableUnderline: editDisplayMode === 'table' }
+          : {}),
         ...textFieldProps.InputProps,
         sx: (theme) => ({
           mb: 0,

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -63,8 +63,8 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
                 column.getFilterValue() === undefined
                   ? 'true'
                   : column.getFilterValue() === 'true'
-                  ? 'false'
-                  : undefined,
+                    ? 'false'
+                    : undefined,
               );
               checkboxProps?.onChange?.(e, checked);
             }}

package/src/inputs/MRT_FilterTextField.tsx

@@ -107,10 +107,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     ? textFieldProps?.placeholder ??
       localization.filterByColumn?.replace('{column}', String(columnDef.header))
     : rangeFilterIndex === 0
-    ? localization.min
-    : rangeFilterIndex === 1
-    ? localization.max
-    : '';
+      ? localization.min
+      : rangeFilterIndex === 1
+        ? localization.max
+        : '';
   const allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
   const showChangeModeButton =
@@ -127,10 +127,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     isMultiSelectFilter
       ? (column.getFilterValue() as string[]) || []
       : isRangeFilter
-      ? (column.getFilterValue() as [string, string])?.[
-          rangeFilterIndex as number
-        ] || ''
-      : (column.getFilterValue() as string) ?? '',
+        ? (column.getFilterValue() as [string, string])?.[
+            rangeFilterIndex as number
+          ] || ''
+        : (column.getFilterValue() as string) ?? '',
   );
 
   const handleChangeDebounced = useCallback(
@@ -161,8 +161,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       textFieldProps.type === 'date'
         ? event.target.valueAsDate
         : textFieldProps.type === 'number'
-        ? event.target.valueAsNumber
-        : event.target.value;
+          ? event.target.valueAsNumber
+          : event.target.value;
     handleChange(newValue);
     textFieldProps?.onChange?.(event);
   };
@@ -290,7 +290,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         whiteSpace: 'nowrap',
       },
     },
-    InputProps: endAdornment //hack because mui looks for presense of endAdornment key instead of undefined
+    InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
       ? { endAdornment, startAdornment }
       : { startAdornment },
     fullWidth: true,
@@ -337,12 +337,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       minWidth: isDateFilter
         ? '160px'
         : enableColumnFilterModes && rangeFilterIndex === 0
-        ? '110px'
-        : isRangeFilter
-        ? '100px'
-        : !filterChipLabel
-        ? '120px'
-        : 'auto',
+          ? '110px'
+          : isRangeFilter
+            ? '100px'
+            : !filterChipLabel
+              ? '120px'
+              : 'auto',
       mx: '-2px',
       p: 0,
       width: 'calc(100% + 4px)',

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -62,8 +62,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       row
         ? row.getToggleSelectedHandler()(event)
         : selectAllMode === 'all'
-        ? table.getToggleAllRowsSelectedHandler()(event)
-        : table.getToggleAllPageRowsSelectedHandler()(event);
+          ? table.getToggleAllRowsSelectedHandler()(event)
+          : table.getToggleAllPageRowsSelectedHandler()(event);
       if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
         if (row) {
           row.pin(

package/src/locales/fr.ts

@@ -51,7 +51,7 @@ export const MRT_Localization_FR: MRT_Localization = {
   groupByColumn: 'Grouper par {column}',
   groupedBy: 'Groupé par ',
   hideAll: 'Cacher tout',
-  hideColumn: 'Cacher {column} colonne',
+  hideColumn: 'Cacher colonne {column}',
   max: 'Max',
   min: 'Min',
   move: 'Déplacer',

package/src/locales/he.ts

@@ -0,0 +1,94 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_HE: 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: 'או',
+  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: 'בטל נעיצת הכל',
+};

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -106,8 +106,8 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
           outline: isDragging
             ? `2px dashed ${theme.palette.grey[500]}`
             : hoveredColumn?.id === column.id
-            ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
-            : 'none',
+              ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
+              : 'none',
           outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',

package/src/style.utils.ts

@@ -83,8 +83,8 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     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,
+        ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
+        : undefined,
     display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
     left:
       column.getIsPinned() === 'left'