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

package/src/body/MRT_TableDetailPanel.tsx

@@ -51,7 +51,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
       className="Mui-TableBodyCell-DetailPanel"
       {...tableRowProps}
       sx={(theme) => ({
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position: virtualRow ? 'absolute' : undefined,
         top: virtualRow
           ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
@@ -70,10 +70,10 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
         {...tableCellProps}
         sx={(theme) => ({
           backgroundColor: virtualRow
-            ? lighten(theme.palette.background.default, 0.06)
+            ? lighten(theme.palette.background.default, 0.05)
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
-          display: layoutMode === 'grid' ? 'flex' : 'table-cell',
+          display: layoutMode?.startsWith('grid') ? 'flex' : 'table-cell',
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,6 +1,5 @@
 import { type DragEventHandler } from 'react';
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,6 +1,5 @@
 import { type MouseEvent, useState } from 'react';
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { type MRT_TableInstance } from '../types';

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,5 +1,4 @@
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,5 +1,4 @@
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 
@@ -36,7 +35,7 @@ export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
       title={rest?.title ?? localization.toggleFullScreen}
     >
       <IconButton
-        aria-label={localization.showHideFilters}
+        aria-label={localization.toggleFullScreen}
         onClick={handleToggleFullScreen}
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import {
   createRow as _createRow,
   flexRender as _flexRender,
@@ -295,7 +295,10 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
   tableCellProps: TableCellProps;
   theme: Theme;
 }) => {
-  const widthStyles = {
+  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)`,
@@ -303,6 +306,15 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
       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'
@@ -314,13 +326,7 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
       : getIsFirstRightPinnedColumn(column)
       ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
       : undefined,
-    display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
-    flex:
-      table.options.layoutMode === 'grid'
-        ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-            header?.id ?? column.id,
-          )}-size) 0 auto`
-        : undefined,
+    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
     left:
       column.getIsPinned() === 'left'
         ? `${column.getStart('left')}px`

package/src/footer/MRT_TableFooter.tsx

@@ -44,7 +44,7 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
       }}
       sx={(theme) => ({
         bottom: stickFooter ? 0 : undefined,
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         opacity: stickFooter ? 0.97 : undefined,
         outline: stickFooter
           ? theme.palette.mode === 'light'

package/src/footer/MRT_TableFooterCell.tsx

@@ -35,7 +35,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+        display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
         fontWeight: 'bold',
         justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:

package/src/footer/MRT_TableFooterRow.tsx

@@ -48,8 +48,8 @@ export const MRT_TableFooterRow = <TData extends Record<string, any>>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.04),
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        backgroundColor: lighten(theme.palette.background.default, 0.05),
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         width: '100%',
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}

package/src/head/MRT_TableHead.tsx

@@ -2,6 +2,7 @@ import { type VirtualItem } from '@tanstack/react-virtual';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_ToolbarAlertBanner } from '../toolbar';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -19,11 +20,17 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     getHeaderGroups,
+    getSelectedRowModel,
     getState,
-    options: { enableStickyHeader, layoutMode, muiTableHeadProps },
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      muiTableHeadProps,
+      positionToolbarAlertBanner,
+    },
     refs: { tableHeadRef },
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen, showAlertBanner } = getState();
 
   const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
 
@@ -40,24 +47,39 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
         }
       }}
       sx={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         opacity: 0.97,
         position: stickyHeader ? 'sticky' : 'relative',
-        top: stickyHeader && layoutMode === 'grid' ? 0 : undefined,
+        top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
         zIndex: stickyHeader ? 2 : undefined,
         ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}
     >
-      {getHeaderGroups().map((headerGroup) => (
-        <MRT_TableHeadRow
-          headerGroup={headerGroup as any}
-          key={headerGroup.id}
-          table={table}
-          virtualColumns={virtualColumns}
-          virtualPaddingLeft={virtualPaddingLeft}
-          virtualPaddingRight={virtualPaddingRight}
-        />
-      ))}
+      {positionToolbarAlertBanner === 'head-overlay' &&
+      (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
+        <tr style={{ display: layoutMode?.startsWith('grid') ? 'grid' : undefined }}>
+          <th
+            colSpan={table.getVisibleLeafColumns().length}
+            style={{
+              display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
+              padding: 0,
+            }}
+          >
+            <MRT_ToolbarAlertBanner table={table} />
+          </th>
+        </tr>
+      ) : (
+        getHeaderGroups().map((headerGroup) => (
+          <MRT_TableHeadRow
+            headerGroup={headerGroup as any}
+            key={headerGroup.id}
+            table={table}
+            virtualColumns={virtualColumns}
+            virtualPaddingLeft={virtualPaddingLeft}
+            virtualPaddingRight={virtualPaddingRight}
+          />
+        ))
+      )}
     </TableHead>
   );
 };

package/src/head/MRT_TableHeadCell.tsx

@@ -126,7 +126,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
       }}
       {...tableCellProps}
       sx={(theme: Theme) => ({
-        flexDirection: layoutMode === 'grid' ? 'column' : undefined,
+        flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
         fontWeight: 'bold',
         overflow: 'visible',
         p:

package/src/head/MRT_TableHeadRow.tsx

@@ -37,9 +37,9 @@ export const MRT_TableHeadRow = <TData extends Record<string, any>>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.04),
+        backgroundColor: lighten(theme.palette.background.default, 0.05),
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         top: 0,
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}

package/src/hooks/useMRT_Effects.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useReducer, useRef } from 'react';
 import { getCanRankRows } from '../column.utils';
 import { type MRT_SortingState, type MRT_TableInstance } from '../types';
 
@@ -6,10 +6,12 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
   table: MRT_TableInstance<TData>,
 ) => {
   const {
+    getIsSomeRowsPinned,
     getState,
-    options: { enablePagination, rowCount },
+    options: { enablePagination, enableRowPinning, rowCount },
   } = table;
   const {
+    density,
     globalFilter,
     isFullScreen,
     isLoading,
@@ -18,6 +20,7 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
     sorting,
   } = getState();
 
+  const rerender = useReducer(() => ({}), {})[1];
   const isMounted = useRef(false);
   const initialBodyHeight = useRef<string>();
   const previousTop = useRef<number>();
@@ -74,4 +77,12 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
       table.setSorting(() => appliedSort.current || []);
     }
   }, [globalFilter]);
+
+  useEffect(() => {
+    if (enableRowPinning && getIsSomeRowsPinned()) {
+      setTimeout(() => {
+        rerender();
+      }, 150);
+    }
+  }, [density]);
 };

package/src/hooks/useMRT_TableOptions.ts

@@ -93,8 +93,13 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     [defaultDisplayColumn],
   );
 
-  if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-    layoutMode = 'grid';
+  if (layoutMode === 'semantic') {
+    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
+      layoutMode = 'grid';
+    }
+    if (enableColumnResizing) {
+      layoutMode = 'grid-no-grow';
+    }
   }
 
   if (rest.enableRowVirtualization) {

package/src/icons.ts

@@ -1,6 +1,8 @@
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
 import DensityLargeIcon from '@mui/icons-material/DensityLarge';
@@ -13,9 +15,11 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import LastPageIcon from '@mui/icons-material/LastPage';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
@@ -31,6 +35,8 @@ export interface MRT_Icons {
   ArrowDownwardIcon: any;
   ArrowRightIcon: any;
   CancelIcon: any;
+  ChevronLeftIcon: any;
+  ChevronRightIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
   DensityLargeIcon: any;
@@ -43,9 +49,11 @@ export interface MRT_Icons {
   FilterAltIcon: any;
   FilterListIcon: any;
   FilterListOffIcon: any;
+  FirstPageIcon?: any;
   FullscreenExitIcon: any;
   FullscreenIcon: any;
   KeyboardDoubleArrowDownIcon: any;
+  LastPageIcon?: any;
   MoreHorizIcon: any;
   MoreVertIcon: any;
   PushPinIcon: any;
@@ -62,6 +70,8 @@ export const MRT_Default_Icons: MRT_Icons = {
   ArrowDownwardIcon,
   ArrowRightIcon,
   CancelIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
   ClearAllIcon,
   CloseIcon,
   DensityLargeIcon,
@@ -74,9 +84,11 @@ export const MRT_Default_Icons: MRT_Icons = {
   FilterAltIcon,
   FilterListIcon,
   FilterListOffIcon,
+  FirstPageIcon,
   FullscreenExitIcon,
   FullscreenIcon,
   KeyboardDoubleArrowDownIcon,
+  LastPageIcon,
   MoreHorizIcon,
   MoreVertIcon,
   PushPinIcon,

package/src/locales/hy.ts

@@ -0,0 +1,93 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_HY: MRT_Localization = {
+  actions: 'Գործողություններ',
+  and: 'և',
+  cancel: 'Չեղարկել',
+  changeFilterMode: 'Փոխել զտիչի ռեժիմը',
+  changeSearchMode: 'Փոխել որոնման ռեժիմը',
+  clearFilter: 'Մաքրել զտիչը',
+  clearSearch: 'Մաքրել որոնումը',
+  clearSort: 'Մաքրել տեսակավորումը',
+  clickToCopy: 'Սեղմել պատճենելու համար',
+  columnActions: 'Սյունակի գործողություն',
+  copiedToClipboard: 'Պատճենվել է փոխանակման բուֆերում',
+  collapse: 'Փոքրացնել',
+  collapseAll: 'Փոքրացնել բոլորը',
+  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: 'կամ',
+  pinToLeft: 'Կցել ձախից',
+  pinToRight: 'Կցել աջից',
+  resetColumnSize: 'Չեղարկել սյունակի չափը',
+  resetOrder: 'Չեղարկել կարգը',
+  rowActions: 'Տողի գործողությունները',
+  rowNumber: '#',
+  rowNumbers: 'Տողերի քանակը',
+  rowsPerPage: 'Տողեր էջում',
+  save: 'Պահպանել',
+  search: 'Գտնել',
+  selectedCountOfRowCountRowsSelected:
+    '{rowCount} տողից ընտրված է {selectedCount}',
+  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/table/MRT_Table.tsx

@@ -150,9 +150,11 @@ export const MRT_Table = <TData extends Record<string, any>>({
         style={{ ...columnSizeVars, ...tableProps?.style }}
         sx={(theme) => ({
           borderCollapse: 'separate',
-          display: layoutMode === 'grid' ? 'grid' : 'table',
+          display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
           tableLayout:
-            layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
+            layoutMode === 'semantic' && enableColumnResizing
+              ? 'fixed'
+              : undefined,
           ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
         })}
       >