release v2.13.0

apps/material-react-table-docs/components/prop-tables/columnOptions.ts

@@ -608,7 +608,7 @@ export const columnOptions: ColumnOption[] = [
     linkText: '',
     source: 'TanStack Table',
     required: false,
-    type: 'false | 1 | -1',
+    type: "'first' | 'last' | false | 1 | -1",
   },
   {
     columnOption: 'renderCellActionMenuItems',

apps/material-react-table-docs/components/prop-tables/tableOptions.ts

@@ -12,6 +12,16 @@ export type TableOption = {
 };
 
 export const tableOptions: TableOption[] = [
+  {
+    tableOption: '_features',
+    defaultValue: '',
+    description: `An array of extra features that you can add to the table instance.`,
+    link: 'https://tanstack.com/table/latest/docs/guide/custom-features',
+    linkText: 'TanStack Table Custom Features Docs',
+    required: false,
+    source: 'TanStack Table',
+    type: 'Array<TableFeature>',
+  },
   {
     tableOption: 'aggregationFns',
     defaultValue: '',

apps/material-react-table-docs/pages/changelog.mdx

@@ -9,6 +9,16 @@ import Head from 'next/head';
 
 > Note: As of v2.12.0, the React and ReactDom peer dependencies have been moved back down to React v17 in order to help more people upgrade to MRT v2 without having to upgrade to React v18.
 
+### Version 2.13.0 - 2024-04-18
+
+- Upgraded to TanStack Table v8.16.0
+  - New `sortUndefined` `"first"` and `"last"` options to allow forcing undefined values to be pushed to the beginning or end of sorted rows.
+  - New `_features` table option to allow adding new custom internal features to the TanStack Table instance.
+  - fixed `column.getCanGroup` always resolving to `true`
+- Started using the default modal `z-index` value from the MUI theme for the full-screen table dialog to avoid issues with other modals and app bar components.
+- Disabled Edit Save Button when `isSaving` state is `true`
+- Fixed DatePicker Types generic
+
 ### Version 2.12.1 - 2024-02-28
 
 - Fixed `rangeFilterIndex` being undefined in filterProps callback

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.12.1",
+  "version": "2.13.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx

@@ -16,18 +16,9 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField, { type TextFieldProps } from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
-import {
-  DatePicker,
-  type DatePickerProps,
-} from '@mui/x-date-pickers/DatePicker';
-import {
-  DateTimePicker,
-  type DateTimePickerProps,
-} from '@mui/x-date-pickers/DateTimePicker';
-import {
-  TimePicker,
-  type TimePickerProps,
-} from '@mui/x-date-pickers/TimePicker';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import {
   type DropdownOption,
   type MRT_Header,
@@ -75,7 +66,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
 
   const args = { column, rangeFilterIndex, table };
 
-  const textFieldProps: TextFieldProps = {
+  const textFieldProps = {
     ...parseFromValuesOrFunc(muiFilterTextFieldProps, args),
     ...parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args),
     ...rest,
@@ -86,20 +77,20 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     ...parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args),
   };
 
-  const datePickerProps: DatePickerProps<any> = {
+  const datePickerProps = {
     ...parseFromValuesOrFunc(muiFilterDatePickerProps, args),
     ...parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args),
-  };
+  } as any;
 
-  const dateTimePickerProps: DateTimePickerProps<any> = {
+  const dateTimePickerProps = {
     ...parseFromValuesOrFunc(muiFilterDateTimePickerProps, args),
     ...parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args),
-  };
+  } as any;
 
-  const timePickerProps: TimePickerProps<any> = {
+  const timePickerProps = {
     ...parseFromValuesOrFunc(muiFilterTimePickerProps, args),
     ...parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args),
-  };
+  } as any;
 
   const {
     allowedColumnFilterOptions,

packages/material-react-table/src/locales/el.ts

@@ -1,96 +1,96 @@
 import { type MRT_Localization } from '..';
 
-export const MRT_Localization_EL: MRT_Localization = { 
-  actions: "Ενέργειες",
-  and: "και",
-  cancel: "Ακύρωση",
-  changeFilterMode: "Αλλαγή λειτουργίας φίλτρου",
-  changeSearchMode: "Αλλαγή λειτουργίας αναζήτησης",
-  clearFilter: "Καθαρισμός φίλτρου",
-  clearSearch: "Καθαρισμός αναζήτησης",
-  clearSelection: "Καθαρισμός επιλογής",
-  clearSort: "Καθαρισμός ταξινόμησης",
-  clickToCopy: "Κλικ για αντιγραφή",
-  copy: "Αντιγραφή",
-  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: "Αναζήτηση",
+export const MRT_Localization_EL: MRT_Localization = {
+  actions: 'Ενέργειες',
+  and: 'και',
+  cancel: 'Ακύρωση',
+  changeFilterMode: 'Αλλαγή λειτουργίας φίλτρου',
+  changeSearchMode: 'Αλλαγή λειτουργίας αναζήτησης',
+  clearFilter: 'Καθαρισμός φίλτρου',
+  clearSearch: 'Καθαρισμός αναζήτησης',
+  clearSelection: 'Καθαρισμός επιλογής',
+  clearSort: 'Καθαρισμός ταξινόμησης',
+  clickToCopy: 'Κλικ για αντιγραφή',
+  copy: 'Αντιγραφή',
+  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: "Αποκαρφίτσωση όλων",
+    '{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: 'Αποκαρφίτσωση όλων',
 };

packages/material-react-table/src/types.ts

@@ -605,15 +605,15 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-      }) => DatePickerProps<any>)
-    | DatePickerProps<any>;
+      }) => DatePickerProps<never>)
+    | DatePickerProps<never>;
   muiFilterDateTimePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-      }) => DateTimePickerProps<any>)
-    | DateTimePickerProps<any>;
+      }) => DateTimePickerProps<never>)
+    | DateTimePickerProps<never>;
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -632,8 +632,8 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-      }) => TimePickerProps<any>)
-    | TimePickerProps<any>;
+      }) => TimePickerProps<never>)
+    | TimePickerProps<never>;
   muiTableBodyCellProps?:
     | ((props: {
         cell: MRT_Cell<TData, TValue>;
@@ -998,15 +998,15 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-      }) => DatePickerProps<any>)
-    | DatePickerProps<any>;
+      }) => DatePickerProps<never>)
+    | DatePickerProps<never>;
   muiFilterDateTimePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-      }) => DateTimePickerProps<any>)
-    | DateTimePickerProps<any>;
+      }) => DateTimePickerProps<never>)
+    | DateTimePickerProps<never>;
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1025,8 +1025,8 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-      }) => TimePickerProps<any>)
-    | TimePickerProps<any>;
+      }) => TimePickerProps<never>)
+    | TimePickerProps<never>;
   muiLinearProgressProps?:
     | ((props: {
         isTopToolbar: boolean;