material-react-table 2.0.0-alpha.4 → 2.0.0-alpha.6

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

@@ -2,12 +2,11 @@ import { useCallback, useMemo } from 'react';
 import {
   type Range,
   type Virtualizer,
-  defaultRangeExtractor,
   useVirtualizer,
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
-import { parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
+import { extraIndexRangeExtractor, parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { type MRT_TableInstance } from '../types';
@@ -43,6 +42,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
     columnSizing,
     columnSizingInfo,
     columnVisibility,
+    draggingColumn,
     isFullScreen,
   } = getState();
 
@@ -93,6 +93,10 @@ export const MRT_Table = <TData extends Record<string, any>>({
     [columnPinning, enableColumnVirtualization, enableColumnPinning],
   );
 
+  const draggingColumnIndex = table
+    .getVisibleLeafColumns()
+    .findIndex((c) => c.id === draggingColumn?.id);
+
   const columnVirtualizer:
     | Virtualizer<HTMLDivElement, HTMLTableCellElement>
     | undefined = enableColumnVirtualization
@@ -103,14 +107,20 @@ export const MRT_Table = <TData extends Record<string, any>>({
         horizontal: true,
         overscan: 3,
         rangeExtractor: useCallback(
-          (range: Range) => [
-            ...new Set([
-              ...leftPinnedIndexes,
-              ...defaultRangeExtractor(range),
-              ...rightPinnedIndexes,
-            ]),
-          ],
-          [leftPinnedIndexes, rightPinnedIndexes],
+          (range: Range) => {
+            const newIndexs = extraIndexRangeExtractor(
+              range,
+              draggingColumnIndex,
+            );
+            return [
+              ...new Set([
+                ...leftPinnedIndexes,
+                ...newIndexs,
+                ...rightPinnedIndexes,
+              ]),
+            ];
+          },
+          [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
         ),
         ...columnVirtualizerProps,
       })
@@ -150,9 +160,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),
         })}
       >

package/src/toolbar/MRT_TablePagination.tsx

@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
-const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 
 interface Props<TData extends Record<string, any> = {}> {
   position?: 'bottom' | 'top';
@@ -25,9 +25,9 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
     getState,
     options: {
       enableToolbarInternalActions,
-      icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
+      icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
       localization,
-      muiTablePaginationProps,
+      muiPaginationProps,
       paginationDisplayMode,
       rowCount,
     },
@@ -39,20 +39,24 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
     showGlobalFilter,
   } = getState();
 
-  const paginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+  const paginationProps = parseFromValuesOrFunc(muiPaginationProps, {
     table,
   });
 
   const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
   const numberOfPages = Math.ceil(totalRowCount / pageSize);
   const showFirstLastPageButtons = numberOfPages > 2;
-  const showFirstButton =
-    showFirstLastPageButtons && paginationProps?.showFirstButton !== false;
-  const showLastButton =
-    showFirstLastPageButtons && paginationProps?.showLastButton !== false;
   const firstRowIndex = pageIndex * pageSize;
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
+  const {
+    rowsPerPageOptions = defaultRowsPerPage,
+    showFirstButton = showFirstLastPageButtons,
+    showLastButton = showFirstLastPageButtons,
+    showRowsPerPage = true,
+    ...rest
+  } = paginationProps ?? {};
+
   return (
     <Box
       sx={{
@@ -60,6 +64,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
         display: 'flex',
         gap: '8px',
         justifyContent: 'space-between',
+        justifySelf: 'flex-end',
         mt:
           position === 'top' &&
           enableToolbarInternalActions &&
@@ -72,20 +77,21 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
         zIndex: 2,
       }}
     >
-      {paginationProps?.showRowsPerPage !== false && (
+      {showRowsPerPage && (
         <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
           <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
             {localization.rowsPerPage}
           </InputLabel>
           <Select
             id="mrt-rows-per-page"
+            inputProps={{ 'aria-label': localization.rowsPerPage }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+event.target.value)}
             sx={{ '&::before': { border: 'none' }, mb: 0 }}
             value={pageSize}
             variant="standard"
           >
-            {defaultPageSizeOptions.map((value) => (
+            {rowsPerPageOptions.map((value) => (
               <MenuItem key={value} sx={{ m: 0 }} value={value}>
                 {value}
               </MenuItem>
@@ -104,18 +110,21 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
                 first: FirstPageIcon,
                 last: LastPageIcon,
                 next: ChevronRightIcon,
-                previous: ChevronLefIcon,
+                previous: ChevronLeftIcon,
               }}
               {...item}
             />
           )}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
-          {...(paginationProps as PaginationProps)}
+          {...(rest as PaginationProps)}
         />
       ) : paginationDisplayMode === 'default' ? (
         <>
-          <Typography mb="0" mx="8px" variant="body2">{`${
+          <Typography
+            sx={{ mb: 0, minWidth: '10ch', mx: '4px' }}
+            variant="body2"
+          >{`${
             lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
           }-${lastRowIndex.toLocaleString()} ${
             localization.of
@@ -137,7 +146,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
               onClick={() => setPageIndex(pageIndex - 1)}
               size="small"
             >
-              <ChevronLefIcon />
+              <ChevronLeftIcon />
             </IconButton>
             <IconButton
               aria-label={localization.goToNextPage}

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -4,11 +4,13 @@ import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
+import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_SelectCheckbox } from '../inputs';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
-  stackAlertBanner: boolean;
+  stackAlertBanner?: boolean;
   table: MRT_TableInstance<TData>;
 }
 
@@ -21,14 +23,18 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
     getSelectedRowModel,
     getState,
     options: {
+      enableRowSelection,
+      enableSelectAll,
       localization,
       muiToolbarAlertBannerChipProps,
       muiToolbarAlertBannerProps,
       positionToolbarAlertBanner,
+      renderToolbarAlertBannerContent,
       rowCount,
     },
+    refs: { tablePaperRef },
   } = table;
-  const { grouping, showAlertBanner } = getState();
+  const { density, grouping, showAlertBanner } = getState();
 
   const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
     table,
@@ -38,7 +44,7 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
     table,
   });
 
-  const selectMessage =
+  const selectedAlert =
     getSelectedRowModel().rows.length > 0
       ? localization.selectedCountOfRowCountRowsSelected
           ?.replace(
@@ -51,7 +57,7 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
           )
       : null;
 
-  const groupedByMessage =
+  const groupedAlert =
     grouping.length > 0 ? (
       <span>
         {localization.groupedBy}{' '}
@@ -70,7 +76,7 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
 
   return (
     <Collapse
-      in={showAlertBanner || !!selectMessage || !!groupedByMessage}
+      in={showAlertBanner || !!selectedAlert || !!groupedAlert}
       timeout={stackAlertBanner ? 200 : 0}
     >
       <Alert
@@ -78,6 +84,12 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
         icon={false}
         {...alertProps}
         sx={(theme) => ({
+          '& .MuiAlert-message': {
+            maxWidth: `calc(${
+              tablePaperRef.current?.clientWidth ?? 360
+            }px - 1rem)`,
+            width: '100%',
+          },
           borderRadius: 0,
           fontSize: '1rem',
           left: 0,
@@ -95,16 +107,42 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
           ...(parseFromValuesOrFunc(alertProps?.sx, theme) as any),
         })}
       >
-        {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
-        <Box sx={{ p: '0.5rem 1rem' }}>
-          {alertProps?.children}
-          {alertProps?.children && (selectMessage || groupedByMessage) && (
-            <br />
-          )}
-          {selectMessage}
-          {selectMessage && groupedByMessage && <br />}
-          {groupedByMessage}
-        </Box>
+        {renderToolbarAlertBannerContent?.({
+          groupedAlert,
+          selectedAlert,
+          table,
+        }) ?? (
+          <>
+            {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
+            <Stack
+              sx={{
+                p:
+                  positionToolbarAlertBanner !== 'head-overlay'
+                    ? '0.5rem 1rem'
+                    : density === 'spacious'
+                    ? '0.75rem 1.25rem'
+                    : density === 'comfortable'
+                    ? '0.5rem 0.75rem'
+                    : '0.25rem 0.5rem',
+              }}
+            >
+              {alertProps?.children}
+              {alertProps?.children && (selectedAlert || groupedAlert) && (
+                <br />
+              )}
+              <Box sx={{ display: 'flex' }}>
+                {enableRowSelection &&
+                  enableSelectAll &&
+                  positionToolbarAlertBanner === 'head-overlay' && (
+                    <MRT_SelectCheckbox selectAll table={table} />
+                  )}{' '}
+                {selectedAlert}
+              </Box>
+              {selectedAlert && groupedAlert && <br />}
+              {groupedAlert}
+            </Stack>
+          </>
+        )}
       </Alert>
     </Collapse>
   );

package/src/toolbar/MRT_TopToolbar.tsx

@@ -14,7 +14,7 @@ import { type MRT_TableInstance } from '../types';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
-  backgroundColor: lighten(theme.palette.background.default, 0.04),
+  backgroundColor: lighten(theme.palette.background.default, 0.05),
   backgroundImage: 'none',
   display: 'grid',
   flexWrap: 'wrap-reverse',

package/src/types.ts

@@ -260,12 +260,8 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<
   setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
   setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
   setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-  setHoveredColumn: Dispatch<
-    SetStateAction<{ id: string } | MRT_Column<TData> | null>
-  >;
-  setHoveredRow: Dispatch<
-    SetStateAction<{ id: string } | MRT_Row<TData> | null>
-  >;
+  setHoveredColumn: Dispatch<SetStateAction<Partial<MRT_Column<TData>> | null>>;
+  setHoveredRow: Dispatch<SetStateAction<Partial<MRT_Row<TData>> | null>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
   setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
@@ -288,8 +284,8 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
   editingCell: MRT_Cell<TData> | null;
   editingRow: MRT_Row<TData> | null;
   globalFilterFn: MRT_FilterOption;
-  hoveredColumn: { id: string } | MRT_Column<TData> | null;
-  hoveredRow: { id: string } | MRT_Row<TData> | null;
+  hoveredColumn: Partial<MRT_Column<TData>> | null;
+  hoveredRow: Partial<MRT_Row<TData>> | null;
   isFullScreen: boolean;
   isLoading: boolean;
   isSaving: boolean;
@@ -727,7 +723,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
   /**
    * Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
    */
-  layoutMode?: 'grid' | 'semantic';
+  layoutMode?: 'grid' | 'grid-no-grow' | 'semantic';
   /**
    * Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.
    *
@@ -838,6 +834,19 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
         table: MRT_TableInstance<TData>;
       }) => LinearProgressProps)
     | LinearProgressProps;
+  muiPaginationProps?:
+    | ((props: { table: MRT_TableInstance<TData> }) => Partial<
+        PaginationProps & {
+          rowsPerPageOptions?: number[];
+          showRowsPerPage?: boolean;
+        }
+      >)
+    | Partial<
+        PaginationProps & {
+          rowsPerPageOptions?: number[];
+          showRowsPerPage?: boolean;
+        }
+      >;
   muiRowDragHandleProps?:
     | ((props: {
         row: MRT_Row<TData>;
@@ -916,19 +925,6 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TableRowProps)
     | TableRowProps;
-  muiTablePaginationProps?:
-    | ((props: { table: MRT_TableInstance<TData> }) => Partial<
-        PaginationProps & {
-          rowsPerPageOptions?: number[];
-          showRowsPerPage?: boolean;
-        }
-      >)
-    | Partial<
-        PaginationProps & {
-          rowsPerPageOptions?: number[];
-          showRowsPerPage?: boolean;
-        }
-      >;
   muiTablePaperProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => PaperProps)
     | PaperProps;
@@ -972,8 +968,8 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
     values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
   }) => Promise<void> | void;
   onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-  onHoveredColumnChange?: OnChangeFn<{ id: string } | MRT_Column<TData> | null>;
-  onHoveredRowChange?: OnChangeFn<{ id: string } | MRT_Row<TData> | null>;
+  onHoveredColumnChange?: OnChangeFn<Partial<MRT_Column<TData>> | null>;
+  onHoveredRowChange?: OnChangeFn<Partial<MRT_Row<TData>> | null>;
   onIsFullScreenChange?: OnChangeFn<boolean>;
   onShowAlertBannerChange?: OnChangeFn<boolean>;
   onShowColumnFiltersChange?: OnChangeFn<boolean>;
@@ -984,7 +980,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
   positionExpandColumn?: 'first' | 'last';
   positionGlobalFilter?: 'left' | 'none' | 'right';
   positionPagination?: 'both' | 'bottom' | 'none' | 'top';
-  positionToolbarAlertBanner?: 'bottom' | 'none' | 'top';
+  positionToolbarAlertBanner?: 'bottom' | 'head-overlay' | 'none' | 'top';
   positionToolbarDropZone?: 'both' | 'bottom' | 'none' | 'top';
   renderBottomToolbar?:
     | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
@@ -1036,6 +1032,11 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
+  renderToolbarAlertBannerContent?: (props: {
+    groupedAlert: ReactNode | null;
+    selectedAlert: ReactNode | null;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   renderToolbarInternalActions?: (props: {
     table: MRT_TableInstance<TData>;
   }) => ReactNode;