material-react-table 1.2.9 → 1.3.0-beta.1

package/src/_locales/it.ts

@@ -0,0 +1,92 @@
+import { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_IT: MRT_Localization = {
+  actions: 'Azioni',
+  and: 'e',
+  cancel: 'Cancella',
+  changeFilterMode: 'Cambia modalità filtro',
+  changeSearchMode: 'Cambia modalita ricerca',
+  clearFilter: 'Cancella filtro',
+  clearSearch: 'Cancella ricerca',
+  clearSort: 'Cancella ordinamento',
+  clickToCopy: 'Click per copiare',
+  columnActions: 'Azioni colonna',
+  copiedToClipboard: 'Copia negli appunti',
+  dropToGroupBy: 'Crea gruppo da {column}',
+  edit: 'Modifica',
+  expand: 'Espandi',
+  expandAll: 'Esapndi tutto',
+  filterArrIncludes: 'Includi',
+  filterArrIncludesAll: 'Includi tutto',
+  filterArrIncludesSome: 'Inclusioni',
+  filterBetween: 'Tra',
+  filterBetweenInclusive: 'Tra inclusioni',
+  filterByColumn: 'Filtra da {column}',
+  filterContains: 'Contiene',
+  filterEmpty: 'Vuoto',
+  filterEndsWith: 'Finisce con',
+  filterEquals: 'Uguale',
+  filterEqualsString: 'Uguale',
+  filterFuzzy: 'Sfocato',
+  filterGreaterThan: 'Maggiore di',
+  filterGreaterThanOrEqualTo: 'Magiorre o uguale a',
+  filterInNumberRange: 'Tra',
+  filterIncludesString: 'Contiene',
+  filterIncludesStringSensitive: 'Contiene',
+  filterLessThan: 'Minore di',
+  filterLessThanOrEqualTo: 'Minore o uguale a',
+  filterMode: 'Modalità filtro: {filterType}',
+  filterNotEmpty: 'Non vuoto',
+  filterNotEquals: 'Non uguale',
+  filterStartsWith: 'Inizia con',
+  filterWeakEquals: 'Uguale',
+  filteringByColumn: 'Filtrando da {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Vai alla prima pagina',
+  goToLastPage: 'Vai all\'ultima pagina',
+  goToNextPage: 'Vai alla pagina successiva',
+  goToPreviousPage: 'Vai alla pagina precedente',
+  grab: 'Prendi',
+  groupByColumn: 'Raggruppa da {column}',
+  groupedBy: 'Raggruppa da ',
+  hideAll: 'Nascondi tutto',
+  hideColumn: 'Nasconi la colonna {column}',
+  max: 'Massimo',
+  min: 'Minimo',
+  move: 'Sposta',
+  noRecordsToDisplay: 'Nessun record da mostrare',
+  noResultsFound: 'Nessun risultato trovato',
+  of: 'di',
+  or: 'o',
+  pinToLeft: 'Blocca a sinistra',
+  pinToRight: 'Blocca a destra',
+  resetColumnSize: 'Resetta dimensione colonna',
+  resetOrder: 'Resetta ordine',
+  rowActions: 'Azioni riga',
+  rowNumber: '#',
+  rowNumbers: 'Righe',
+  rowsPerPage: 'Righe per pagina',
+  save: 'Salva',
+  search: 'Cerca',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} di {rowCount} row(s) selezionate',
+  select: 'Seleziona',
+  showAll: 'Mostra tutto',
+  showAllColumns: 'Mostra tutte le colonne',
+  showHideColumns: 'Mostra/Nascondi colonne',
+  showHideFilters: 'Mostra/Nascondi filtri',
+  showHideSearch: 'Mostra/Nascondi ricerca',
+  sortByColumnAsc: 'Ordina da {column} crescente',
+  sortByColumnDesc: 'Ordina da {column} decrecente',
+  sortedByColumnAsc: 'Ordinato da {column} crescente',
+  sortedByColumnDesc: 'Ordinato da {column} decrescente',
+  thenBy: ', poi da',
+  toggleDensity: 'Cambia densità',
+  toggleFullScreen: 'Cambia schermo intero',
+  toggleSelectAll: 'Cambia selezione totale',
+  toggleSelectRow: 'Cambia selezione riga',
+  toggleVisibility: 'Cambia visibilità',
+  ungroupByColumn: 'Rimuovi gruppo {column}',
+  unpin: 'Sblocca',
+  unpinAll: 'Sblocca tutto',
+  unsorted: 'Non ordinato',
+};

package/src/body/MRT_TableBodyCell.tsx

@@ -133,7 +133,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
     editingMode !== 'modal' &&
     (editingMode === 'table' ||
       editingRow?.id === row.id ||
-      editingCell?.id === cell.id);
+      editingCell?.id === cell.id) &&
+    !row.getIsGrouped();
 
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);

package/src/column.utils.ts

@@ -1,4 +1,9 @@
-import type { ColumnOrderState, GroupingState } from '@tanstack/react-table';
+import type {
+  ColumnOrderState,
+  GroupingState,
+  Row,
+} from '@tanstack/react-table';
+import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 import { alpha, lighten } from '@mui/material/styles';
@@ -38,12 +43,15 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
 };
 
 export const prepareColumns = <TData extends Record<string, any> = {}>({
+  aggregationFns,
   columnDefs,
   columnFilterFns,
   defaultDisplayColumn,
   filterFns,
   sortingFns,
 }: {
+  aggregationFns: typeof MRT_AggregationFns &
+    MaterialReactTableProps<TData>['aggregationFns'];
   columnDefs: MRT_ColumnDef<TData>[];
   columnFilterFns: { [key: string]: MRT_FilterOption };
   defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
@@ -52,16 +60,21 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
     MaterialReactTableProps<TData>['sortingFns'];
 }): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
+    //assign columnId
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
     if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
       console.error(
         'Column definitions must have a valid `accessorKey` or `id` property',
       );
     }
+
+    //assign columnDefType
     if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
     if (columnDef.columns?.length) {
       columnDef.columnDefType = 'group';
+      //recursively prepare columns if this is a group column
       columnDef.columns = prepareColumns({
+        aggregationFns,
         columnDefs: columnDef.columns,
         columnFilterFns,
         defaultDisplayColumn,
@@ -69,12 +82,28 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
         sortingFns,
       });
     } else if (columnDef.columnDefType === 'data') {
+      //assign aggregationFns if multiple aggregationFns are provided
+      if (Array.isArray(columnDef.aggregationFn)) {
+        const aggFns = columnDef.aggregationFn as string[];
+        columnDef.aggregationFn = (
+          columnId: string,
+          leafRows: Row<TData>[],
+          childRows: Row<TData>[],
+        ) =>
+          aggFns.map((fn) =>
+            aggregationFns[fn]?.(columnId, leafRows, childRows),
+          );
+      }
+
+      //assign filterFns
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
           filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
         (columnDef as MRT_DefinedColumnDef)._filterFn =
           columnFilterFns[columnDef.id];
       }
+
+      //assign sortingFns
       if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
         // @ts-ignore
         columnDef.sortingFn = sortingFns[columnDef.sortingFn];

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -65,7 +65,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
           {...iconButtonProps}
           sx={(theme) => ({
             height: '2rem',
-            m: '-6px -3px',
+            m: '-8px -4px',
             opacity: 0.5,
             transform: 'scale(0.85)',
             transition: 'opacity 150ms',

package/src/table/MRT_TableRoot.tsx

@@ -209,6 +209,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const columnDefs = useMemo(
     () =>
       prepareColumns({
+        aggregationFns: props.aggregationFns as any,
         columnDefs: [...displayColumns, ...props.columns],
         columnFilterFns: props.state?.columnFilterFns ?? columnFilterFns,
         defaultDisplayColumn: props.defaultDisplayColumn ?? {},
@@ -296,7 +297,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       tablePaperRef,
       topToolbarRef,
     },
-    setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
+    setColumnFilterFns: props.onColumnFilterFnsChange ?? setColumnFilterFns,
     setDensity: props.onDensityChange ?? setDensity,
     setDraggingColumn: props.onDraggingColumnChange ?? setDraggingColumn,
     setDraggingRow: props.onDraggingRowChange ?? setDraggingRow,