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

package/src/locales/np.ts

@@ -0,0 +1,94 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_NP: 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:
+    '{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/menus/MRT_ColumnActionMenu.tsx

@@ -36,6 +36,7 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
+      columnFilterDisplayMode,
       columnFilterModeOptions,
       enableColumnFilterModes,
       enableColumnFilters,
@@ -217,37 +218,39 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
               {localization.clearFilter}
             </Box>
           </MenuItem>,
-          <MenuItem
-            disabled={showColumnFilters && !enableColumnFilterModes}
-            divider={enableGrouping || enableHiding}
-            key={4}
-            onClick={
-              showColumnFilters
-                ? handleOpenFilterModeMenu
-                : handleFilterByColumn
-            }
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <FilterListIcon />
-              </ListItemIcon>
-              {localization.filterByColumn?.replace(
-                '{column}',
-                String(columnDef.header),
+          columnFilterDisplayMode === 'subheader' && (
+            <MenuItem
+              disabled={showColumnFilters && !enableColumnFilterModes}
+              divider={enableGrouping || enableHiding}
+              key={4}
+              onClick={
+                showColumnFilters
+                  ? handleOpenFilterModeMenu
+                  : handleFilterByColumn
+              }
+              sx={commonMenuItemStyles}
+            >
+              <Box sx={commonListItemStyles}>
+                <ListItemIcon>
+                  <FilterListIcon />
+                </ListItemIcon>
+                {localization.filterByColumn?.replace(
+                  '{column}',
+                  String(columnDef.header),
+                )}
+              </Box>
+              {showFilterModeSubMenu && (
+                <IconButton
+                  onClick={handleOpenFilterModeMenu}
+                  onMouseEnter={handleOpenFilterModeMenu}
+                  size="small"
+                  sx={{ p: 0 }}
+                >
+                  <ArrowRightIcon />
+                </IconButton>
               )}
-            </Box>
-            {showFilterModeSubMenu && (
-              <IconButton
-                onClick={handleOpenFilterModeMenu}
-                onMouseEnter={handleOpenFilterModeMenu}
-                size="small"
-                sx={{ p: 0 }}
-              >
-                <ArrowRightIcon />
-              </IconButton>
-            )}
-          </MenuItem>,
+            </MenuItem>
+          ),
           showFilterModeSubMenu && (
             <MRT_FilterOptionMenu
               anchorEl={filterMenuAnchorEl}
@@ -258,7 +261,7 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
               table={table}
             />
           ),
-        ]
+        ].filter(Boolean)
       : []),
     ...(enableGrouping && column.getCanGroup()
       ? [

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -199,7 +199,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
           column.setFilterValue(currentFilterValue); // perform new filter render
         }
       } else if (
-        columnDef?.filterVariant === 'range' ||
+        columnDef?.filterVariant?.includes('range') ||
         rangeModes.includes(option as MRT_FilterOption)
       ) {
         // will now be range filter mode

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,14 +1,22 @@
-import { type ChangeEvent } from 'react';
-import TablePagination from '@mui/material/TablePagination';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Pagination, { type PaginationProps } from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
+
+interface Props<TData extends Record<string, any> = {}> {
   position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination = <TData extends Record<string, any>>({
+export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
   position = 'bottom',
   table,
 }: Props<TData>) => {
@@ -17,8 +25,10 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
     getState,
     options: {
       enableToolbarInternalActions,
+      icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
       localization,
       muiTablePaginationProps,
+      paginationDisplayMode,
       rowCount,
     },
     setPageIndex,
@@ -29,80 +39,127 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
     showGlobalFilter,
   } = getState();
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
-  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-
-  const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+  const paginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
     table,
   });
 
-  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    setPageSize(+event.target.value);
-  };
+  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);
 
   return (
-    <TablePagination
-      component="div"
-      count={totalRowCount}
-      getItemAriaLabel={(type) =>
-        type === 'first'
-          ? localization.goToFirstPage
-          : type === 'last'
-          ? localization.goToLastPage
-          : type === 'next'
-          ? localization.goToNextPage
-          : localization.goToPreviousPage
-      }
-      labelDisplayedRows={({ count, from, to }) =>
-        `${from}-${to} ${localization.of} ${count}`
-      }
-      labelRowsPerPage={localization.rowsPerPage}
-      onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
-      onRowsPerPageChange={handleChangeRowsPerPage}
-      page={Math.max(
-        Math.min(pageIndex, Math.ceil(totalRowCount / pageSize) - 1),
-        0,
-      )}
-      rowsPerPage={pageSize}
-      rowsPerPageOptions={[5, 10, 15, 20, 25, 30, 50, 100]}
-      showFirstButton={showFirstLastPageButtons}
-      showLastButton={showFirstLastPageButtons}
-      {...tablePaginationProps}
-      SelectProps={{
-        MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } },
-        sx: { m: '0 1rem 0 1ch' },
-        ...tablePaginationProps?.SelectProps,
-      }}
-      sx={(theme) => ({
-        '& . MuiTablePagination-select': {
-          m: '0 1px',
-        },
-        '& .MuiTablePagination-actions': {
-          m: '0 1px',
-        },
-        '& .MuiTablePagination-displayedRows': {
-          m: '0 1px',
-        },
-        '& .MuiTablePagination-selectLabel': {
-          m: '0 -1px',
-        },
-        '& .MuiTablePagination-toolbar': {
-          alignItems: 'center',
-          display: 'flex',
-        },
-        '&. MuiInputBase-root': {
-          m: '0 1px',
-        },
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'space-between',
         mt:
           position === 'top' &&
           enableToolbarInternalActions &&
           !showGlobalFilter
-            ? '3.5rem'
+            ? '3rem'
             : undefined,
         position: 'relative',
+        px: '4px',
+        py: '12px',
         zIndex: 2,
-        ...(parseFromValuesOrFunc(tablePaginationProps?.sx, theme) as any),
-      })}
-    />
+      }}
+    >
+      {paginationProps?.showRowsPerPage !== false && (
+        <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"
+            label={localization.rowsPerPage}
+            onChange={(event) => setPageSize(+event.target.value)}
+            sx={{ '&::before': { border: 'none' }, mb: 0 }}
+            value={pageSize}
+            variant="standard"
+          >
+            {defaultPageSizeOptions.map((value) => (
+              <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                {value}
+              </MenuItem>
+            ))}
+          </Select>
+        </Box>
+      )}
+      {paginationDisplayMode === 'pages' ? (
+        <Pagination
+          count={numberOfPages}
+          onChange={(_e, newPageIndex) => setPageIndex(newPageIndex - 1)}
+          page={pageIndex + 1}
+          renderItem={(item) => (
+            <PaginationItem
+              slots={{
+                first: FirstPageIcon,
+                last: LastPageIcon,
+                next: ChevronRightIcon,
+                previous: ChevronLefIcon,
+              }}
+              {...item}
+            />
+          )}
+          showFirstButton={showFirstButton}
+          showLastButton={showLastButton}
+          {...(paginationProps as PaginationProps)}
+        />
+      ) : paginationDisplayMode === 'default' ? (
+        <>
+          <Typography mb="0" mx="8px" variant="body2">{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+          }-${lastRowIndex.toLocaleString()} ${
+            localization.of
+          } ${totalRowCount.toLocaleString()}`}</Typography>
+          <Box gap="xs">
+            {showFirstButton && (
+              <IconButton
+                aria-label={localization.goToFirstPage}
+                disabled={pageIndex <= 0}
+                onClick={() => setPageIndex(0)}
+                size="small"
+              >
+                <FirstPageIcon />
+              </IconButton>
+            )}
+            <IconButton
+              aria-label={localization.goToPreviousPage}
+              disabled={pageIndex <= 0}
+              onClick={() => setPageIndex(pageIndex - 1)}
+              size="small"
+            >
+              <ChevronLefIcon />
+            </IconButton>
+            <IconButton
+              aria-label={localization.goToNextPage}
+              disabled={lastRowIndex >= totalRowCount}
+              onClick={() => setPageIndex(pageIndex + 1)}
+              size="small"
+            >
+              <ChevronRightIcon />
+            </IconButton>
+            {showLastButton && (
+              <IconButton
+                aria-label={localization.goToLastPage}
+                disabled={lastRowIndex >= totalRowCount}
+                onClick={() => setPageIndex(numberOfPages - 1)}
+                size="small"
+              >
+                <LastPageIcon />
+              </IconButton>
+            )}
+          </Box>
+        </>
+      ) : null}
+    </Box>
   );
 };

package/src/types.ts

@@ -39,12 +39,14 @@ import {
   type VirtualizerOptions,
 } from '@tanstack/react-virtual';
 import { type AlertProps } from '@mui/material/Alert';
+import { type AutocompleteProps } from '@mui/material/Autocomplete';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type ChipProps } from '@mui/material/Chip';
 import { type DialogProps } from '@mui/material/Dialog';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type LinearProgressProps } from '@mui/material/LinearProgress';
+import { type PaginationProps } from '@mui/material/Pagination';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
 import { type SkeletonProps } from '@mui/material/Skeleton';
@@ -55,10 +57,10 @@ import { type TableCellProps } from '@mui/material/TableCell';
 import { type TableContainerProps } from '@mui/material/TableContainer';
 import { type TableFooterProps } from '@mui/material/TableFooter';
 import { type TableHeadProps } from '@mui/material/TableHead';
-import { type TablePaginationProps } from '@mui/material/TablePagination';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type ToolbarProps } from '@mui/material/Toolbar';
+import { type DatePickerProps } from '@mui/x-date-pickers';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_Icons } from './icons';
@@ -406,7 +408,10 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: ({ text: string; value: any } | string)[];
   filterVariant?:
+    | 'autocomplete'
     | 'checkbox'
+    | 'date'
+    | 'date-range'
     | 'multi-select'
     | 'range'
     | 'range-slider'
@@ -458,12 +463,25 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TextFieldProps)
     | TextFieldProps;
+  muiFilterAutocompleteProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => AutocompleteProps<any, any, any, any>)
+    | AutocompleteProps<any, any, any, any>;
   muiFilterCheckboxProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => CheckboxProps)
     | CheckboxProps;
+  muiFilterDatePickerProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+      }) => DatePickerProps<any>)
+    | DatePickerProps<any>;
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -782,12 +800,25 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
+  muiFilterAutocompleteProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => AutocompleteProps<any, any, any, any>)
+    | AutocompleteProps<any, any, any, any>;
   muiFilterCheckboxProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => CheckboxProps)
     | CheckboxProps;
+  muiFilterDatePickerProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+      }) => DatePickerProps<any>)
+    | DatePickerProps<any>;
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -886,10 +917,18 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
       }) => TableRowProps)
     | TableRowProps;
   muiTablePaginationProps?:
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-      }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>)
-    | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>;
+    | ((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;