material-react-table 1.0.0-beta.8 → 1.0.1

package/src/MaterialReactTable.tsx

@@ -3,6 +3,7 @@ import React, {
   MutableRefObject,
   ReactNode,
   SetStateAction,
+  useMemo,
 } from 'react';
 import type {
   AlertProps,
@@ -44,12 +45,103 @@ import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
-import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
+import { MRT_Localization_EN } from './_locales/en';
 import { MRT_SortingFns } from './sortingFns';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
+import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from './column.utils';
 
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
+export interface MRT_Localization {
+  actions: string;
+  and: string;
+  cancel: string;
+  changeFilterMode: string;
+  changeSearchMode: string;
+  clearFilter: string;
+  clearSearch: string;
+  clearSort: string;
+  clickToCopy: string;
+  columnActions: string;
+  copiedToClipboard: string;
+  dropToGroupBy: string;
+  edit: string;
+  expand: string;
+  expandAll: string;
+  filterArrIncludes: string;
+  filterArrIncludesAll: string;
+  filterArrIncludesSome: string;
+  filterBetween: string;
+  filterBetweenInclusive: string;
+  filterByColumn: string;
+  filterContains: string;
+  filterEmpty: string;
+  filterEndsWith: string;
+  filterEquals: string;
+  filterEqualsString: string;
+  filterFuzzy: string;
+  filterGreaterThan: string;
+  filterGreaterThanOrEqualTo: string;
+  filterInNumberRange: string;
+  filterIncludesString: string;
+  filterIncludesStringSensitive: string;
+  filterLessThan: string;
+  filterLessThanOrEqualTo: string;
+  filterMode: string;
+  filterNotEmpty: string;
+  filterNotEquals: string;
+  filterStartsWith: string;
+  filterWeakEquals: string;
+  filteringByColumn: string;
+  goToFirstPage: string;
+  goToLastPage: string;
+  goToNextPage: string;
+  goToPreviousPage: string;
+  grab: string;
+  groupByColumn: string;
+  groupedBy: string;
+  hideAll: string;
+  hideColumn: string;
+  max: string;
+  min: string;
+  move: string;
+  noRecordsToDisplay: string;
+  noResultsFound: string;
+  of: string;
+  or: string;
+  pinToLeft: string;
+  pinToRight: string;
+  resetColumnSize: string;
+  resetOrder: string;
+  rowActions: string;
+  rowNumber: string;
+  rowNumbers: string;
+  rowsPerPage: string;
+  save: string;
+  search: string;
+  select: string;
+  selectedCountOfRowCountRowsSelected: string;
+  showAll: string;
+  showAllColumns: string;
+  showHideColumns: string;
+  showHideFilters: string;
+  showHideSearch: string;
+  sortByColumnAsc: string;
+  sortByColumnDesc: string;
+  sortedByColumnAsc: string;
+  sortedByColumnDesc: string;
+  thenBy: string;
+  toggleDensity: string;
+  toggleFullScreen: string;
+  toggleSelectAll: string;
+  toggleSelectRow: string;
+  toggleVisibility: string;
+  ungroupByColumn: string;
+  unpin: string;
+  unpinAll: string;
+  unsorted: string;
+}
+
 export interface MRT_RowModel<TData extends Record<string, any> = {}> {
   flatRows: MRT_Row<TData>[];
   rows: MRT_Row<TData>[];
@@ -191,10 +283,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   Filter?: ({
     column,
     header,
+    rangeFilterIndex,
     table,
   }: {
     column: MRT_Column<TData>;
     header: MRT_Header<TData>;
+    rangeFilterIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Footer?:
@@ -265,7 +359,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   enableEditing?: boolean;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: (string | { text: string; value: any })[];
-  filterVariant?: 'text' | 'select' | 'multi-select' | 'range';
+  filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
   /**
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
    */
@@ -314,10 +408,14 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     | TableCellProps
     | (({
         cell,
+        column,
+        row,
         table,
       }: {
-        table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
       }) => TableCellProps);
   muiTableFooterCellProps?:
     | TableCellProps
@@ -346,6 +444,15 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
       }) => IconButtonProps);
+  muiTableHeadCellFilterCheckboxProps?:
+    | CheckboxProps
+    | (({
+        column,
+        table,
+      }: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => CheckboxProps);
   muiTableHeadCellFilterTextFieldProps?:
     | TextFieldProps
     | (({
@@ -699,6 +806,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           column: MRT_Column<TData>;
         }) => IconButtonProps);
+    muiTableHeadCellFilterCheckboxProps?:
+      | CheckboxProps
+      | (({
+          column,
+          table,
+        }: {
+          column: MRT_Column<TData>;
+          table: MRT_TableInstance<TData>;
+        }) => CheckboxProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | (({
@@ -783,6 +899,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbar?:
+      | ReactNode
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ReactNode);
     renderBottomToolbarCustomActions?: ({
       table,
     }: {
@@ -847,6 +966,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderTopToolbar?:
+      | ReactNode
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ReactNode);
     renderTopToolbarCustomActions?: ({
       table,
     }: {
@@ -882,11 +1004,11 @@ export type Virtualizer = {
   measure: () => void;
 };
 
-export default <TData extends Record<string, any> = {}>({
+const MaterialReactTable = <TData extends Record<string, any> = {}>({
   aggregationFns,
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
-  defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
+  defaultColumn,
   defaultDisplayColumn,
   editingMode = 'modal',
   enableBottomToolbar = true,
@@ -924,68 +1046,84 @@ export default <TData extends Record<string, any> = {}>({
   positionToolbarAlertBanner = 'top',
   positionToolbarDropZone = 'top',
   rowNumberMode = 'original',
-  selectAllMode = 'all',
+  selectAllMode = 'page',
   sortingFns,
   ...rest
-}: MaterialReactTableProps<TData>) => (
-  <MRT_TableRoot
-    aggregationFns={{ ...MRT_AggregationFns, ...aggregationFns }}
-    autoResetExpanded={autoResetExpanded}
-    columnResizeMode={columnResizeMode}
-    defaultColumn={defaultColumn}
-    defaultDisplayColumn={{
-      columnDefType: 'display',
-      enableClickToCopy: false,
-      enableColumnActions: false,
-      enableColumnDragging: false,
-      enableColumnFilter: false,
-      enableColumnOrdering: false,
-      enableEditing: false,
-      enableGlobalFilter: false,
-      enableGrouping: false,
-      enableHiding: false,
-      enableResizing: false,
-      enableSorting: false,
+}: MaterialReactTableProps<TData>) => {
+  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), []);
+  const _localization = useMemo(
+    () => ({
+      ...MRT_Localization_EN,
+      ...localization,
+    }),
+    [],
+  );
+  const _aggregationFns = useMemo(
+    () => ({ ...MRT_AggregationFns, ...aggregationFns }),
+    [],
+  );
+  const _filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
+  const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
+  const _defaultColumn = useMemo<Partial<MRT_ColumnDef<TData>>>(
+    () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
+    [],
+  );
+  const _defaultDisplayColumn = useMemo<Partial<MRT_ColumnDef<TData>>>(
+    () => ({
+      ...(MRT_DefaultDisplayColumn as Partial<MRT_ColumnDef<TData>>),
       ...defaultDisplayColumn,
-    }}
-    editingMode={editingMode}
-    enableBottomToolbar={enableBottomToolbar}
-    enableColumnActions={enableColumnActions}
-    enableColumnFilters={enableColumnFilters}
-    enableColumnOrdering={enableColumnOrdering}
-    enableColumnResizing={enableColumnResizing}
-    enableDensityToggle={enableDensityToggle}
-    enableExpandAll={enableExpandAll}
-    enableFilters={enableFilters}
-    enableFullScreenToggle={enableFullScreenToggle}
-    enableGlobalFilter={enableGlobalFilter}
-    enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
-    enableGrouping={enableGrouping}
-    enableHiding={enableHiding}
-    enableMultiRowSelection={enableMultiRowSelection}
-    enableMultiSort={enableMultiSort}
-    enablePagination={enablePagination}
-    enablePinning={enablePinning}
-    enableRowSelection={enableRowSelection}
-    enableSelectAll={enableSelectAll}
-    enableSorting={enableSorting}
-    enableStickyHeader={enableStickyHeader}
-    enableTableFooter={enableTableFooter}
-    enableTableHead={enableTableHead}
-    enableToolbarInternalActions={enableToolbarInternalActions}
-    enableTopToolbar={enableTopToolbar}
-    filterFns={{ ...MRT_FilterFns, ...filterFns }}
-    icons={{ ...MRT_Default_Icons, ...icons }}
-    localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
-    positionActionsColumn={positionActionsColumn}
-    positionExpandColumn={positionExpandColumn}
-    positionGlobalFilter={positionGlobalFilter}
-    positionPagination={positionPagination}
-    positionToolbarAlertBanner={positionToolbarAlertBanner}
-    positionToolbarDropZone={positionToolbarDropZone}
-    rowNumberMode={rowNumberMode}
-    selectAllMode={selectAllMode}
-    sortingFns={{ ...MRT_SortingFns, ...sortingFns }}
-    {...rest}
-  />
-);
+    }),
+    [],
+  );
+
+  return (
+    <MRT_TableRoot
+      aggregationFns={_aggregationFns}
+      autoResetExpanded={autoResetExpanded}
+      columnResizeMode={columnResizeMode}
+      defaultColumn={_defaultColumn}
+      defaultDisplayColumn={_defaultDisplayColumn}
+      editingMode={editingMode}
+      enableBottomToolbar={enableBottomToolbar}
+      enableColumnActions={enableColumnActions}
+      enableColumnFilters={enableColumnFilters}
+      enableColumnOrdering={enableColumnOrdering}
+      enableColumnResizing={enableColumnResizing}
+      enableDensityToggle={enableDensityToggle}
+      enableExpandAll={enableExpandAll}
+      enableFilters={enableFilters}
+      enableFullScreenToggle={enableFullScreenToggle}
+      enableGlobalFilter={enableGlobalFilter}
+      enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
+      enableGrouping={enableGrouping}
+      enableHiding={enableHiding}
+      enableMultiRowSelection={enableMultiRowSelection}
+      enableMultiSort={enableMultiSort}
+      enablePagination={enablePagination}
+      enablePinning={enablePinning}
+      enableRowSelection={enableRowSelection}
+      enableSelectAll={enableSelectAll}
+      enableSorting={enableSorting}
+      enableStickyHeader={enableStickyHeader}
+      enableTableFooter={enableTableFooter}
+      enableTableHead={enableTableHead}
+      enableToolbarInternalActions={enableToolbarInternalActions}
+      enableTopToolbar={enableTopToolbar}
+      filterFns={_filterFns}
+      icons={_icons}
+      localization={_localization}
+      positionActionsColumn={positionActionsColumn}
+      positionExpandColumn={positionExpandColumn}
+      positionGlobalFilter={positionGlobalFilter}
+      positionPagination={positionPagination}
+      positionToolbarAlertBanner={positionToolbarAlertBanner}
+      positionToolbarDropZone={positionToolbarDropZone}
+      rowNumberMode={rowNumberMode}
+      selectAllMode={selectAllMode}
+      sortingFns={_sortingFns}
+      {...rest}
+    />
+  );
+};
+
+export default MaterialReactTable;

package/src/_locales/de.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/{localization.ts → _locales/en.ts}

@@ -1,88 +1,6 @@
-export interface MRT_Localization {
-  actions: string;
-  and: string;
-  cancel: string;
-  changeFilterMode: string;
-  changeSearchMode: string;
-  clearFilter: string;
-  clearSearch: string;
-  clearSort: string;
-  clickToCopy: string;
-  columnActions: string;
-  copiedToClipboard: string;
-  dropToGroupBy: string;
-  edit: string;
-  expand: string;
-  expandAll: string;
-  filterArrIncludes: string;
-  filterArrIncludesAll: string;
-  filterArrIncludesSome: string;
-  filterBetween: string;
-  filterBetweenInclusive: string;
-  filterByColumn: string;
-  filterContains: string;
-  filterEmpty: string;
-  filterEndsWith: string;
-  filterEquals: string;
-  filterEqualsString: string;
-  filterFuzzy: string;
-  filterGreaterThan: string;
-  filterGreaterThanOrEqualTo: string;
-  filterInNumberRange: string;
-  filterIncludesString: string;
-  filterIncludesStringSensitive: string;
-  filterLessThan: string;
-  filterLessThanOrEqualTo: string;
-  filterMode: string;
-  filterNotEmpty: string;
-  filterNotEquals: string;
-  filterStartsWith: string;
-  filterWeakEquals: string;
-  filteringByColumn: string;
-  grab: string;
-  groupByColumn: string;
-  groupedBy: string;
-  hideAll: string;
-  hideColumn: string;
-  max: string;
-  min: string;
-  move: string;
-  noRecordsToDisplay: string;
-  noResultsFound: string;
-  or: string;
-  pinToLeft: string;
-  pinToRight: string;
-  resetColumnSize: string;
-  resetOrder: string;
-  rowActions: string;
-  rowNumber: string;
-  rowNumbers: string;
-  save: string;
-  search: string;
-  select: string;
-  selectedCountOfRowCountRowsSelected: string;
-  showAll: string;
-  showAllColumns: string;
-  showHideColumns: string;
-  showHideFilters: string;
-  showHideSearch: string;
-  sortByColumnAsc: string;
-  sortByColumnDesc: string;
-  sortedByColumnAsc: string;
-  sortedByColumnDesc: string;
-  thenBy: string;
-  toggleDensity: string;
-  toggleFullScreen: string;
-  toggleSelectAll: string;
-  toggleSelectRow: string;
-  toggleVisibility: string;
-  ungroupByColumn: string;
-  unpin: string;
-  unpinAll: string;
-  unsorted: string;
-}
+import { MRT_Localization } from '../MaterialReactTable';
 
-export const MRT_DefaultLocalization_EN: MRT_Localization = {
+export const MRT_Localization_EN: MRT_Localization = {
   actions: 'Actions',
   and: 'and',
   cancel: 'Cancel',
@@ -123,6 +41,10 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   filterStartsWith: 'Starts With',
   filterWeakEquals: 'Equals',
   filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Go to first page',
+  goToLastPage: 'Go to last page',
+  goToNextPage: 'Go to next page',
+  goToPreviousPage: 'Go to previous page',
   grab: 'Grab',
   groupByColumn: 'Group by {column}',
   groupedBy: 'Grouped by ',
@@ -133,6 +55,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   move: 'Move',
   noRecordsToDisplay: 'No records to display',
   noResultsFound: 'No results found',
+  of: 'of',
   or: 'or',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
@@ -141,6 +64,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
+  rowsPerPage: 'Rows per page',
   save: 'Save',
   search: 'Search',
   selectedCountOfRowCountRowsSelected:

package/src/_locales/es.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/fr.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/hi.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/id.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/ja.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/nl.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/pt-BR.ts

@@ -0,0 +1,92 @@
+import { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_PT_BR: MRT_Localization = {
+  actions: 'Ações',
+  and: 'e',
+  cancel: 'Cancelar',
+  changeFilterMode: 'Alterar o modo de filtro',
+  changeSearchMode: 'Alterar o modo de pesquisa',
+  clearFilter: 'Limpar filtros',
+  clearSearch: 'Limpar pesquisa',
+  clearSort: 'Limpar classificações',
+  clickToCopy: 'Clique para copiar',
+  columnActions: 'Ações das colunas',
+  copiedToClipboard: 'Copiado para área de transferência',
+  dropToGroupBy: 'Solte para agrupar por {column}',
+  edit: 'Editar',
+  expand: 'Expandir',
+  expandAll: 'Expandir tudo',
+  filterArrIncludes: 'Inclui',
+  filterArrIncludesAll: 'Incluir tudo',
+  filterArrIncludesSome: 'Inclui alguns',
+  filterBetween: 'Entre',
+  filterBetweenInclusive: 'Entre valores incluídos',
+  filterByColumn: 'Filtrar por {column}',
+  filterContains: 'Contém',
+  filterEmpty: 'vazio',
+  filterEndsWith: 'Termina com',
+  filterEquals: 'Igual',
+  filterEqualsString: 'Igual',
+  filterFuzzy: 'Impreciso',
+  filterGreaterThan: 'Maior que',
+  filterGreaterThanOrEqualTo: 'Maior ou igual que',
+  filterInNumberRange: 'Entre',
+  filterIncludesString: 'Contém',
+  filterIncludesStringSensitive: 'Contém',
+  filterLessThan: 'Menor que',
+  filterLessThanOrEqualTo: 'Menor ou igual que',
+  filterMode: 'Modo de filtro: {filterType}',
+  filterNotEmpty: 'Não é vazio',
+  filterNotEquals: 'Não é igual',
+  filterStartsWith: 'Começa com',
+  filterWeakEquals: 'Igual',
+  filteringByColumn: 'Filtrando por {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Ir para a primeira página',
+  goToLastPage: 'Ir para a última página',
+  goToNextPage: 'Ir para a próxima página',
+  goToPreviousPage: 'Ir para a página anterior',
+  grab: 'Agarrar',
+  groupByColumn: 'Agrupar por {column}',
+  groupedBy: 'Agrupado por ',
+  hideAll: 'Ocultar tudo',
+  hideColumn: 'Ocultar coluna {column}',
+  max: 'Max',
+  min: 'Min',
+  move: 'Mover',
+  noRecordsToDisplay: 'Não há registros a serem exibidos',
+  noResultsFound: 'Nenhum resultado encontrado',
+  of: 'de',
+  or: 'ou',
+  pinToLeft: 'Fixar à esquerda',
+  pinToRight: 'Fixar à direita',
+  resetColumnSize: 'Restaurar tamanho da coluna',
+  resetOrder: 'Restaurar ordem',
+  rowActions: 'Ações da linha',
+  rowNumber: '#',
+  rowNumbers: 'Número da linha',
+  rowsPerPage: 'Linhas por página',
+  save: 'Salvar',
+  search: 'Pesquisar',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} de {rowCount} linha(s) selecionada(s)',
+  select: 'Selecionar',
+  showAll: 'Mostrar tudo',
+  showAllColumns: 'Mostrar todas as colunas',
+  showHideColumns: 'Mostrar/Ocultar colunas',
+  showHideFilters: 'Mostrar/Ocultar filtros',
+  showHideSearch: 'Mostrar/Ocultar barra de pesquisa',
+  sortByColumnAsc: 'Ordenar por {column} em ascendente',
+  sortByColumnDesc: 'Ordenar por {column} em descendente',
+  sortedByColumnAsc: 'Ordenado por {column} em ascendente',
+  sortedByColumnDesc: 'Ordenado por {column} em descendente',
+  thenBy: ', depois por ',
+  toggleDensity: 'Alternar densidade',
+  toggleFullScreen: 'Alternar tela cheia',
+  toggleSelectAll: 'Alternar selecionar tudo',
+  toggleSelectRow: 'Alternar seleção da linha',
+  toggleVisibility: 'Alternar visibilidade',
+  ungroupByColumn: 'Desagrupar por {column}',
+  unpin: 'Desfixar',
+  unpinAll: 'Desfixar tudo',
+  unsorted: 'Desordenar',
+};

package/src/_locales/pt.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/ru.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/uk.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/vi.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/zh.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/body/MRT_EditRowModal.tsx

@@ -32,9 +32,10 @@ export const MRT_EditRowModal = <TData extends Record<string, any> = {}>({
         <form onSubmit={(e) => e.preventDefault()}>
           <Stack
             sx={{
-              width: '100%',
-              minWidth: { xs: '300px', sm: '360px', md: '400px' },
               gap: '1.5rem',
+              minWidth: { xs: '300px', sm: '360px', md: '400px' },
+              pt: '1rem',
+              width: '100%',
             }}
           >
             {row

package/src/body/MRT_TableBodyCell.tsx

@@ -68,7 +68,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const mcTableCellBodyProps =
     columnDef.muiTableBodyCellProps instanceof Function
-      ? columnDef.muiTableBodyCellProps({ cell, table })
+      ? columnDef.muiTableBodyCellProps({ cell, column, row, table })
       : columnDef.muiTableBodyCellProps;
 
   const tableCellProps = {

package/src/body/MRT_TableBodyRow.tsx

@@ -69,7 +69,7 @@ export const MRT_TableBodyRow: FC<Props> = ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),
           opacity:
             draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
-          transition: 'all 0.2s ease-in-out',
+          transition: 'all 0.1s ease-in-out',
           '&:hover td': {
             backgroundColor:
               tableRowProps?.hover !== false && getIsSomeColumnsPinned()

package/src/body/MRT_TableDetailPanel.tsx

@@ -36,7 +36,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
-          transition: 'all 0.2s ease-in-out',
+          transition: 'all 0.1s ease-in-out',
           width: `${table.getTotalSize()}px`,
           ...(tableCellProps?.sx instanceof Function
             ? tableCellProps.sx(theme)

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -59,7 +59,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
                   ? -90
                   : 0
               }deg)`,
-              transition: 'transform 0.2s',
+              transition: 'transform 0.1s',
             }}
           />
         </IconButton>

package/src/buttons/MRT_ExpandButton.tsx

@@ -61,7 +61,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
                   ? -180
                   : 0
               }deg)`,
-              transition: 'transform 0.2s',
+              transition: 'transform 0.1s',
             }}
           />
         </IconButton>