MRT logoMantine React Table

docs
/
API
/
table options

Table Options (Props)

Many of the options you can pass to useMantineReactTable are the same as the ones you can pass to the TanStack Table useReactTable hook.

Here is a list of all the table options that you can pass to the useMantineReactTable hook.

const table = useMantineReactTable({
  // all the options that you can pass here (recommended)
});

//or all of the props that could be passed to `<MantineReactTable />` IF not using `useMantineReactTable` hook
return (
  <MantineReactTable
  // all of the props that could be passed here if no `table` prop is passed
  />
);

return <MantineReactTable table={table} />; //recommended
#
Prop Name
Type
Default Value
More Info Links
1Record<string, AggregationFn>TanStack Table Grouping Docs
2booleanTanStack Table Core Table Docs
3booleanTanStack Table Expanding Docs
4booleanTanStack Table Pagination Docs
5'subheader' | 'popover' | 'custom''subheader'MRT Column Filtering Docs
6Array<MRT_FilterOption | string> | nullMRT Column Filtering Docs
7'onChange' | 'onEnd''onChange'MRT Column Resizing Docs
8Array<MRT_ColumnDef<TData>>MRT Column Options API Reference
9MutableRefObject<Virtualizer | null>
10Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>
11'modal' | 'row' | 'custom''modal'MRT Editing Docs
12Array<TData>Usage Docs
13booleanfalseTanStack Table Core Table Docs
14booleanfalseTanStack Table Core Table Docs
15booleanfalseTanStack Table Core Table Docs
16booleanfalseTanStack Table Core Table Docs
17booleanfalseTanStack Table Core Table Docs
18Partial<MRT_ColumnDef<TData>>TanStack Table Core Table Docs
19{ [key: string]: MRT_ColumnDef<TData> }MRT Display Columns Docs
20'modal' | 'row' | 'cell' | 'table' | 'custom''modal'MRT Editing Docs
21booleantrueMRT Row Selection Docs
22booleantrueMRT Customize Toolbars Docs
23booleanfalseMRT Click to Copy Docs
24booleantrueMRT Column Actions Docs
25booleanfalseMRT Column Ordering DnD Docs
26booleanfalseMRT Column Filtering Docs
27booleantrueMRT Column Filtering Docs
28booleanMRT Column Ordering DnD Docs
29boolean
30booleanMRT Column Resizing Docs
31booleanMRT Virtualization Docs
32booleantrueMRT Density Toggle Docs
33boolean | (row: MRT_Row<TData>) => booleanMRT Editing Docs
34booleantrueMRT Expanding Sub Rows Docs
35booleanMRT Expanding Sub Rows Docs
36booleanMRT Column Filtering Docs
37booleantrueMRT Column Filtering Docs
38booleantrueTanStack Filters Docs
39booleantrueMRT Full Screen Toggle Docs
40booleantrueMRT Global Filtering Docs
41booleantrueMRT Global Filtering Docs
42booleantrueMRT Global Filtering Docs
43booleanMRT Aggregation and Grouping Docs
44booleantrueMRT Column Hiding Docs
45booleanTanStack Sorting Docs
46booleantrueMRT Row Selection Docs
47boolean
48booleantrue
49boolean
50boolean
51booleanRow Numbers Feature Guide
52boolean
53boolean | (row: MRT_Row) => boolean
54booleanMRT Virtualization Docs
55booleantrue
56booleantrue
57booleantrue
58boolean
59boolean
60booleantrue
61booleantrue
62booleantrue
63booleantrue
64booleantrue
65(dataRow: TData) => TData[]
66Record<string, FilterFn>TanStack Table Filters Docs
67booleanfalseTanStack Filtering Docs
68(column: Column<TData, MRT_CellValue>) => boolean
69(table: Table<TData>) => () => RowModel<TData>TanStack Table Core Table Docs
70() => MRT_RowModel<TData>
71() => Map<any, number>TanStack Table Filters Docs
72() => RowModel<TData>TanStack Table Filters Docs
73() => Map<any, number>TanStack Table Filters Docs
74() => RowModel<TData>TanStack Table Filters Docs
75(table: Table<TData>) => () => RowModel<TData>TanStack Table Grouping Docs
76(row: Row<TData>) => booleanTanStack Table Expanding Docs
77() => MRT_RowModel<TData>
78(row: Row<TData>) => booleanTanStack Table Expanding Docs
79(originalRow: TData, index: number, parent?: MRT_Row<TData>) => stringTanStack Table Core Table Docs
80(table: Table<TData>) => () => RowModel<TData>TanStack Table Sorting Docs
81(originalRow: TData, index: number) => undefined | TData[]TanStack Table Core Table Docs
82MRT_FilterOption
83Array<MRT_FilterOption | string> | null
84false | 'reorder' | 'remove'reorderTanStack Table Grouping Docs
85Partial<MRT_Icons>;
86Partial<MRT_TableState<TData>>Table State Management Guide
87(e: unknown) => booleanTanStack Table Sorting Docs
88'semantic' | 'grid''semantic'TODO
89MRT_LocalizationLocalization (i18n) Guide
90BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs
91ActionIconProps | (({table, column }) => ActionIconProps);Mantine ActionIcon Docs
92ActionIconProps | ({table, column }) => ActionIconPropsMantine ActionIcon Docs
93UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonPropsMantine UnstyledButton Docs
94ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
95BoxProps | ({ row, table }) => BoxPropsMantine Box Docs
96ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
97SelectProps | ({ cell, column, row, table }) => SelectPropsMantine Select Docs
98TextInputProps | ({ cell, column, row, table }) => TextInputPropsMantine TextInput Docs
99ActionIconProps | ({ table }) => ActionIconPropsMantine ActionIcon Docs
100ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
101AutocompleteProps | ({ column, table, rangeFilterIndex }) => AutocompletePropsMantine Autocomplete Docs
102CheckboxProps | ({ column, table }) => CheckboxPropsMantine Checkbox Docs
103DateInputProps | ({ table, column, rangeFilterIndex }) => DateInputPropsMantine DateInput Docs
104MultiSelectProps | ({ column, table }) => MultiSelectProps{ clearable: true }Mantine MultiSelect Docs
105RangeSliderProps | ({ column, table }) => RangeSliderPropsMantine Slider Docs
106SelectProps | ({ column, table }) => SelectPropsMantine Select Docs
107TextInputProps | ({ table, column, rangeFilterIndex }) => TextInputPropsMantine TextInput Docs
108HighlightProps | ({ cell, column, row, table }) => HighlightPropsMantine Highlight Docs
109LoadingOverlayProps | ({ table }) => LoadingOverlayPropsMantine LoadingOverlay Docs
110PaginationProps & { rowsPerPageOptions?: string[], showRowsPerPage?: boolean; }Mantine Pagination Docs
111PaperProps | ({ table }} => PaperPropsMantine Paper Docs
112ProgressProps | ({ isTopToolbar, table }) => ProgressPropsMantine Progress Docs
113ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
114TextInputProps | ({ table }) => TextInputPropsMantine TextInput Docs
115CheckboxProps | ({ table }) => CheckboxPropsMantine Checkbox Docs
116CheckboxProps | ({ row, table }) => CheckboxPropsMantine Checkbox Docs
117SkeletonProps | ({ cell, column, row, table }) => SkeletonPropsMantine Skeleton Docs
118BoxProps | ({ cell, column, row, table }) => BoxPropsMantine Box Docs
119BoxProps | ({ table }) => BoxPropsMantine Box Docs
120BoxProps | ({ isDetailPanel, row, table }) => BoxPropsMantine Box Docs
121BoxProps | ({ table }) => BoxPropsMantine Box Docs
122BoxProps| ({table, column }) => BoxPropsMantine Box Docs
123BoxProps | ({ table }) => BoxProps);Mantine Box Docs
124BoxProps | ({table, footerGroup}) => BoxPropsMantine Box Docs
125BoxProps | ({ table, column }) => BoxPropsMantine Box Docs
126BoxProps | ({ table }) => BoxPropsMantine TableHead Docs
127BoxProps | ({ table, headerGroup}) => BoxPropsMantine Box Docs
128TableProps | ({ table }} => TablePropsMantine Table Docs
129BadgeProps| ({ table }} => BadgePropsMantine Chip Docs
130AlertProps | ({ table }) => AlertPropsMantine Alert Docs
131BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs
132booleanTanStack Table Expanding Docs
133booleanTanStack Table Filters Docs
134booleanTanStack Table Grouping Docs
135booleanTanStack Table Pagination Docs
136booleanTanStack Table Sorting Docs
137number100TanStack Table Filtering Docs
138numberTanStack Table Sorting Docs
139'cell' | 'row' | 'table-body'Memoize Components Guide
140<T>(defaultOptions: T, options: Partial<T>) => TTanStack Table Core Docs
141TableMetaTanStack Table Core Docs
142OnChangeFn<{ [key: string]: MRT_FilterOption }>
143OnChangeFn<ColumnFiltersState>TanStack Table Filter Docs
144OnChangeFn<ColumnOrderState>TanStack Table Column Ordering Docs
145OnChangeFn<ColumnPinningState>TanStack Table Column Pinning Docs
146OnChangeFn<ColumnSizingState>TanStack Table Column Sizing Docs
147OnChangeFn<ColumnSizingInfoState>TanStack Table Column Sizing Docs
148OnChangeFn<ColumnVisibilityState>TanStack Table Column Visibility Docs
149({ row, table }) => voidMRT Editing Docs
150OnChangeFn<MRT_Row<TData> | null>
151({ exitEditingMode, row, table, values}) => Promise<void> | voidMRT Editing Docs
152OnChangeFn<MRT_DensityState>MRT Density Toggle Docs
153OnChangeFn<MRT_Column<TData> | null>
154OnChangeFn<MRT_Row<TData> | null>
155OnChangeFn<MRT_Cell<TData> | null>
156({ row, table }) => voidMRT Editing Docs
157OnChangeFn<MRT_Row<TData> | null>
158({ exitEditingMode, row, table, values}) => Promise<void> | voidMRT Editing Docs
159OnChangeFn<ExpandedState>TanStack Table Expanding Docs
160OnChangeFn<GlobalFilterState>TanStack Table Filters Docs
161OnChangeFn<GlobalFilterState>TanStack Table Filters Docs
162OnChangeFn<GroupingState>TanStack Table Grouping Docs
163OnChangeFn<MRT_Column<TData> | null>
164OnChangeFn<MRT_Row<TData> | null>
165OnChangeFn<boolean>MRT Full Screen Toggle Docs
166OnChangeFn<PaginationState>TanStack Table Pagination Docs
167OnChangeFn<RowSelectionState>TanStack Table Row Selection Docs
168OnChangeFn<boolean>
169OnChangeFn<boolean>
170OnChangeFn<boolean>
171OnChangeFn<boolean>
172OnChangeFn<SortingState>TanStack Table Sorting Docs
173numberTanStack Table Pagination Docs
174booleanTanStack Table Expanding Docs
175'default' | 'pages' | 'custom''default'MRT Editing Docs
176'first' | 'last'
177'first' | 'last'
178'left' | 'right'
179'bottom' | 'top' | 'both'
180'bottom' | 'top' | 'head-overlay' | 'none'
181'bottom' | 'top' | 'both' | 'none'
182ReactNode | ({ table }) => ReactNode
183({ table }) => ReactNode
184({ closeMenu, column, table, internalColumnMenuItems }) => ReactNode
185({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode
186({ row, table, internalEditComponents }) => ReactNode
187({ row, table }) => ReactNode
188({ row, table, internalEditComponents }) => ReactNode
189({ table }) => ReactNode
190({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode
191({ closeMenu, row, table }) => ReactNode
192({ cell, row, table }) => ReactNode
193({ groupedAlert, selectedAlert, table }) => ReactNode
194({ table }) => ReactNode
195ReactNode | ({ table }) => ReactNode
196({ table }) => ReactNode
197number
198'original' | 'static''static'
199MutableRefObject<Virtualizer | null>
200Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
201'all' | 'page''page'
202'checkbox' | 'radio' | 'switch''checkbox'MRT Editing Docs
203booleanTanStack Table Sorting Docs
204Record<string, SortingFn>TanStack Table Sorting Docs
205Partial<MRT_TableState<TData>>Table State Management Guide

Wanna see the source code for this table? Check it out down below!

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import {
  MantineReactTable,
  type MRT_TableOptions,
  type MRT_ColumnDef,
} from 'mantine-react-table';
import { Anchor, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { type TableOption, tableOptions } from './tableOptions';
import { getPrimaryColor } from 'mantine-react-table';
import { InlineCodeHighlight } from '@mantine/code-highlight';

interface Props {
  onlyOptions?: Set<keyof MRT_TableOptions<TableOption>>;
}

const TableOptionsTable = ({ onlyOptions }: Props) => {
  const isDesktop = useMediaQuery('(min-width: 1200px)');

  const columns = useMemo(
    () =>
      [
        {
          enableClickToCopy: true,
          header: 'Prop Name',
          accessorKey: 'tableOption',
          mantineCopyButtonProps: ({ cell }) => ({
            className: 'prop',
            id: `${cell.getValue<string>()}-prop`,
          }),
          Cell: ({ renderedCellValue, row }) =>
            row.original?.required ? (
              <Text
                component="strong"
                style={(theme) => ({
                  color: getPrimaryColor(theme),
                })}
              >
                {renderedCellValue}*
              </Text>
            ) : (
              renderedCellValue
            ),
        },
        {
          header: 'Type',
          accessorKey: 'type',
          enableGlobalFilter: false,
          Cell: ({ cell }) => (
            <InlineCodeHighlight
              bg="transparent"
              language="typescript"
              code={cell.getValue<string>()}
            />
          ),
        },
        {
          header: 'Required',
          accessorKey: 'required',
          enableGlobalFilter: false,
        },
        {
          header: 'Default Value',
          accessorKey: 'defaultValue',
          enableGlobalFilter: false,
          Cell: ({ cell }) => (
            <InlineCodeHighlight
              bg="transparent"
              language="typescript"
              code={cell.getValue<string>()}
            />
          ),
        },
        {
          header: 'Description',
          accessorKey: 'description',
          enableGlobalFilter: false,
        },
        {
          header: 'More Info Links',
          accessorKey: 'link',
          disableFilters: true,
          enableGlobalFilter: false,
          Cell: ({ cell, row }) => (
            <Link href={cell.getValue() as string} passHref legacyBehavior>
              <Anchor
                c={
                  row.original.source === 'MRT'
                    ? 'dimmed'
                    : row.original.source === 'Mantine'
                      ? 'teal'
                      : row.original.source === 'TanStack Table'
                        ? 'blue'
                        : undefined
                }
                target={
                  (cell.getValue() as string).startsWith('http')
                    ? '_blank'
                    : undefined
                }
                rel="noopener"
              >
                {row.original?.linkText}
              </Anchor>
            </Link>
          ),
        },
      ] as MRT_ColumnDef<TableOption>[],
    [],
  );

  const [columnPinning, setColumnPinning] = useState({});

  useEffect(() => {
    if (typeof window !== 'undefined') {
      if (isDesktop) {
        setColumnPinning({
          left: ['mrt-row-expand', 'mrt-row-numbers', 'tableOption'],
          right: ['link'],
        });
      } else {
        setColumnPinning({});
      }
    }
  }, [isDesktop]);

  const data = useMemo(() => {
    if (onlyOptions) {
      return tableOptions.filter(({ tableOption }) =>
        onlyOptions.has(tableOption),
      );
    }
    return tableOptions;
  }, [onlyOptions]);

  return (
    <MantineReactTable
      columns={columns}
      data={data}
      displayColumnDefOptions={{
        'mrt-row-numbers': {
          size: 10,
        },
        'mrt-row-expand': {
          size: 10,
        },
      }}
      enableColumnActions={!onlyOptions}
      enableColumnFilterModes
      enablePagination={false}
      enableColumnPinning
      enableRowNumbers
      enableBottomToolbar={false}
      enableTopToolbar={!onlyOptions}
      initialState={{
        columnVisibility: { required: false, description: false },
        density: 'xs',
        showGlobalFilter: true,
        sorting: [{ id: 'tableOption', desc: false }],
      }}
      mantineSearchTextInputProps={{
        placeholder: 'Search All Props',
        style: { minWidth: '18rem' },
        variant: 'filled',
      }}
      mantinePaperProps={{
        style: { marginBottom: '24px' },
        id: onlyOptions ? 'relevant-props-table' : 'props-table',
      }}
      positionGlobalFilter="left"
      renderDetailPanel={({ row }) => (
        <Text color={row.original.description ? 'teal' : 'gray'}>
          {row.original.description || 'No Description Provided... Yet...'}
        </Text>
      )}
      rowNumberDisplayMode="static"
      onColumnPinningChange={setColumnPinning}
      state={{ columnPinning }}
    />
  );
};

export default TableOptionsTable;

Using Material-UI instead of Mantine?
Check out Material React Table