Material React Table Props API Reference

Props

Many of the props you can pass to <MaterialReactTable /> are the same as the ones you can pass to the TanStack Table useReactTable hook.

Here is a list of all the props you can pass to the root <MaterialReactTable />.

<MaterialReactTable
//all the props you can pass here
/>

	#	Type	Default Value	More Info Links
	1	Array<MRT_ColumnDef<TData>>		Column Options API Reference
The array of column defs to use for the table.
	2	Array<TData>		Usage Docs
The data for the table to display. This array should match the type you provided to table.setRowType<...>, but in theory could be an array of anything. It's common for each item in the array to be an object of key/values but this is not required. Columns can access this data via string/index or a functional accessor to return anything they want. When the data option changes reference (compared via Object.is), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.
	3	Record<string, AggregationFn>		TanStack Table Grouping Docs
This option allows you to define custom aggregation functions that can be referenced in a column's aggregationFn option by their key
	4	boolean		TanStack Table Core Table Docs
Set this option to override any of the autoReset... feature options.
	5	boolean		TanStack Table Expanding Docs
Enable this setting to automatically reset the expanded state of the table when grouping state changes.
	6	boolean		TanStack Table Pagination Docs
If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc.
	7	(MRT_FilterOption \| string)[] \| null
No Description Provided... Yet...
	8	'onEnd' \| 'onChange'	'onEnd'	TanStack Table Column Sizing Docs
Determines when the columnSizing state is updated. onChange updates the state when the user is dragging the resize handle. onEnd updates the state when the user releases the resize handle.
	9	boolean	false	TanStack Table Core Table Docs
Set this option to true to output all debugging information to the console.
	10	boolean	false	TanStack Table Core Table Docs
Set this option to true to output column debugging information to the console.
	11	boolean	false	TanStack Table Core Table Docs
Set this option to true to output header debugging information to the console.
	12	boolean	false	TanStack Table Core Table Docs
Set this option to true to output row debugging information to the console.
	13	boolean	false	TanStack Table Core Table Docs
Set this option to true to output table debugging information to the console.
	14	Partial<MRT_ColumnDef<TData>>
Default column options to use for all column defs supplied to the table. This is useful for providing default cell/header/footer renderers, sorting/filtering/grouping options, etc.
	15	{ [key: string]: MRT_ColumnDef<TData> }
Customize and override the column definition options for the built-in display columns. (Select, Expand, Row Actions, etc.)
	16	'cell' \| 'row' \| 'table'	'row'
No Description Provided... Yet...
	17	boolean	true
No Description Provided... Yet...
	18	boolean	false
No Description Provided... Yet...
	19	boolean	true
No Description Provided... Yet...
	20	boolean	false
No Description Provided... Yet...
	21	boolean	false
No Description Provided... Yet...
	22	boolean	true
No Description Provided... Yet...
	23	boolean
No Description Provided... Yet...
	24	boolean
No Description Provided... Yet...
	25	boolean	true
No Description Provided... Yet...
	26	boolean
No Description Provided... Yet...
	27	boolean	true
No Description Provided... Yet...
	28	boolean
No Description Provided... Yet...
	29	boolean	true
No Description Provided... Yet...
	30	boolean	true
No Description Provided... Yet...
	31	boolean	true
No Description Provided... Yet...
	32	boolean	true
No Description Provided... Yet...
	33	boolean	true
No Description Provided... Yet...
	34	boolean
No Description Provided... Yet...
	35	boolean	true
No Description Provided... Yet...
	36	boolean
No Description Provided... Yet...
	37	boolean	true
If true, the user can select multiple rows at once with a checkbox. If false, the user can only select one row at a time with a radio button.
	38	boolean
No Description Provided... Yet...
	39	boolean	true
No Description Provided... Yet...
	40	boolean
No Description Provided... Yet...
	41	boolean
No Description Provided... Yet...
	42	boolean
No Description Provided... Yet...
	43	boolean		Row Numbers Feature Guide
No Description Provided... Yet...
	44	boolean
No Description Provided... Yet...
	45	boolean
No Description Provided... Yet...
	46	boolean
No Description Provided... Yet...
	47	boolean	true
No Description Provided... Yet...
	48	boolean	true
No Description Provided... Yet...
	49	boolean	true
No Description Provided... Yet...
	50	boolean
No Description Provided... Yet...
	51	boolean
No Description Provided... Yet...
	52	boolean	true
No Description Provided... Yet...
	53	boolean	true
No Description Provided... Yet...
	54	boolean	true
No Description Provided... Yet...
	55	boolean	true
No Description Provided... Yet...
	56	boolean	true
No Description Provided... Yet...
	57	(dataRow: TData) => TData[]
No Description Provided... Yet...
	58	Record<string, FilterFn>		TanStack Table Filters Docs
This option allows you to define custom filter functions that can be referenced in a column's filterFn option by their key
	59	boolean
No Description Provided... Yet...
	60	(column: Column<TData, unknown>) => boolean
No Description Provided... Yet...
	61	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Core Table Docs
Material React Table uses the default core row model function from TanStack Table, but you can override its implementation here. It is called once per table and should return a new function which will calculate and return the row model for the table.
	62	() => MRT_RowModel<TData>
No Description Provided... Yet...
	63	() => Map<any, number>		TanStack Table Filters Docs
A function that computes and returns a min/max tuple derived from column.getFacetedRowModel. Useful for displaying faceted result values.
	64	() => RowModel<TData>		TanStack Table Filters Docs
Returns the row model with all other column filters applied, excluding its own filter. Useful for displaying faceted result counts.
	65	() => Map<any, number>		TanStack Table Filters Docs
A function that computes and returns a Map of unique values and their occurrences derived from column.getFacetedRowModel. Useful for displaying faceted result values.
	66	() => RowModel<TData>		TanStack Table Filters Docs
Returns the row model with all other column filters applied, excluding its own filter. Useful for displaying faceted result counts.
	67	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Grouping Docs
Returns the row model after grouping has taken place, but no further.
	68	(row: Row<TData>) => boolean		TanStack Table Expanding Docs
If provided, allows you to override the default behavior of determining whether a row is currently expanded.
	69	() => MRT_RowModel<TData>
No Description Provided... Yet...
	70	(row: Row<TData>) => boolean		TanStack Table Expanding Docs
If provided, allows you to override the default behavior of determining whether a row can be expanded.
	71	( originalRow: TData, index: number, parent?: Row<TData> ) => string		TanStack Table Core Table Docs
This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with . using their grandparents' index eg. index.index.index). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
	72	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Sorting Docs
This function is used to retrieve the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported getSortedRowModel() from your adapter to your table or implement your own.
	73	( originalRow: TData, index: number ) => undefined \| TData[]		TanStack Table Core Table Docs
This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.
	74	MRT_FilterOption
The filter function to use for global filtering.
	75	(MRT_FilterOption \| string)[] \| null
No Description Provided... Yet...
	76	false \| 'reorder' \| 'remove'	reorder	TanStack Table Grouping Docs
Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
	77	Partial<MRT_Icons>;
No Description Provided... Yet...
	78	Partial<MRT_TableState<TData>>		Table State Management Guide
Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. options.autoResetPagination) or via functions like table.resetRowSelection(). Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.
	79	(e: unknown) => boolean		TanStack Table Sorting Docs
Pass a custom function that will be used to determine if a multi-sort event should be triggered. It is passed the event from the sort toggle handler and should return true if the event should trigger a multi-sort.
	80	MRT_Localization		Localization (i18n) Guide
No Description Provided... Yet...
	81	boolean		TanStack Table Expanding Docs
Enables manual row expansion. If this is set to true, getExpandedRowModel will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.
	82	boolean		TanStack Table Filters Docs
Disables the getFilteredRowModel from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering.
	83	boolean		TanStack Table Grouping Docs
Enables manual grouping. If this option is set to true, the table will not automatically group rows using getGroupedRowModel() and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation.
	84	boolean		TanStack Table Pagination Docs
Enables manual pagination. If this option is set to true, the table will not automatically paginate rows using getPaginationRowModel() and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.
	85	boolean		TanStack Table Sorting Docs
Enables manual sorting for the table. If this is true, you will be expected to sort your data before it is passed to the table. This is useful if you are doing server-side sorting.
	86	number		TanStack Table Sorting Docs
Set a maximum number of columns that can be multi-sorted.
	87	'cell' \| 'row' \| 'table-body'		Memoize Components Guide
No Description Provided... Yet...
	88	<T>(defaultOptions: T, options: Partial<T>) => T		TanStack Table Core Docs
This option is used to optionally implement the merging of table options. Some framework like solid-js use proxies to track reactivity and usage, so merging reactive objects needs to be handled carefully. This option inverts control of this process to the adapter.
	89	TableMeta		TanStack Table Core Docs
You can pass any object to options.meta and access it anywhere the table is available via table.options.meta This type is global to all tables.
	90	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props
No Description Provided... Yet...
	91	IconButtonProps \| ({ table }) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	92	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	93	LinearProgressProps \| ({ isTopToolbar, table }) => LinearProgressProps		Material UI LinearProgress Props
No Description Provided... Yet...
	94	TextFieldProps \| ({ table }) => TextFieldProps		Material UI TextField Props
No Description Provided... Yet...
	95	CheckboxProps \| ({ table }) => CheckboxProps		Material UI Checkbox Props
No Description Provided... Yet...
	96	CheckboxProps \| ({ row, table }) => CheckboxProps		Material UI Checkbox Props
No Description Provided... Yet...
	97	ButtonProps \| ({ cell, column, row, table }) => ButtonProps		Material UI Button Props
No Description Provided... Yet...
	98	TextFieldProps \| ({ cell, column, row, table }) => TextFieldProps		Material UI TextField Props
No Description Provided... Yet...
	99	TableCellProps \| ({ cell, column, row, table }) => TableCellProps		Material UI TableCell Props
No Description Provided... Yet...
	100	SkeletonProps \| ({ cell, column, row, table }) => SkeletonProps		Material UI Skeleton Props
No Description Provided... Yet...
	101	TableBodyProps \| ({ table }) => TableBodyProps		Material UI TableBody Props
No Description Provided... Yet...
	102	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	103	TableRowProps \| ({ row, table }) => TableRowProps	{ hover: true }	Material UI TableRow Props
No Description Provided... Yet...
	104	TableContainerProps \| ({ table }) => TableContainerProps		Material UI TableContainer Props
No Description Provided... Yet...
	105	TableRowProps \| ({ row, table }) => TableRowProps		Material UI TableRow Props
No Description Provided... Yet...
	106	TableCellProps\| ({table, column}) => TableCellProps		Material UI TableCell Props
No Description Provided... Yet...
	107	TableFooterProps \| ({ table }) => TableFooterProps);		Material UI TableFooter Props
No Description Provided... Yet...
	108	TableRowProps \| ({table, footerGroup}) => TableRowProps		Material UI TableRow Props
No Description Provided... Yet...
	109	IconButtonProps \| (({table, column}) => IconButtonProps);		Material UI IconButton Props
No Description Provided... Yet...
	110	IconButtonProps \| ({table, column}) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	111	CheckboxProps \| ({ column, table}) => CheckboxProps		Material UI Checkbox Props
No Description Provided... Yet...
	112	TextFieldProps \| ({ table, column, rangeFilterIndex}) => TextFieldProps		Material UI TextField Props
No Description Provided... Yet...
	113	TableCellProps \| ({ table, column}) => TableCellProps		Material UI TableCell Props
No Description Provided... Yet...
	114	TableHeadProps \| ({ table }) => TableHeadProps		Material UI TableHead Props
No Description Provided... Yet...
	115	TableRowProps \| ({ table, headerGroup}) => TableRowProps		Material UI TableRow Props
No Description Provided... Yet...
	116	Partial<TablePaginationProps> \| ({ table }) => Partial<TablePaginationProps>		Material UI TablePagination Props
No Description Provided... Yet...
	117	PaperProps \| ({ table }} => PaperProps		MUI Paper API Docs
No Description Provided... Yet...
	118	TableProps		MUI TableProps API Docs
No Description Provided... Yet...
	119	ChipProps\| ({ table }} => ChipProps		Material UI Chip Props
No Description Provided... Yet...
	120	AlertProps \| ({ table }) => AlertProps		Material UI Alert Props
No Description Provided... Yet...
	121	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props
No Description Provided... Yet...
	122	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs
If provided, this function will be called with an updaterFn when state.columnFilters changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
	123	OnChangeFn<ColumnOrderState>	If provided, this function will be called with an updaterFn when state.columnOrder changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.	TanStack Table Column Ordering Docs
No Description Provided... Yet...
	124	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs
If provided, this function will be called with an updaterFn when state.columnPinning changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
	125	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs
This optional function will be called when the columnSizing state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizing table option.
	126	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs
This optional function will be called when the columnSizingInfo state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizingInfo table option.
	127	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs
If provided, this function will be called with an updaterFn when state.columnVisibility changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
	128	OnChangeFn<DensityState>
No Description Provided... Yet...
	129	OnChangeFn<MRT_Column<TData> \| null>
No Description Provided... Yet...
	130	OnChangeFn<MRT_Row<TData> \| null>
No Description Provided... Yet...
	131	OnChangeFn<MRT_Cell<TData> \| null>
No Description Provided... Yet...
	132	OnChangeFn<MRT_Row<TData> \| null>
No Description Provided... Yet...
	133	({ exitEditingMode, row, table, values}) => Promise<void> \| void
No Description Provided... Yet...
	134	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs
This function is called when the expanded table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the tableOptions.state.expanded option.
	135	OnChangeFn<{ [key: string]: MRT_FilterOption }>
No Description Provided... Yet...
	136	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs
If provided, this function will be called with an updaterFn when state.globalFilter changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
	137	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs
If provided, this function will be called with an updaterFn when state.globalFilter changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
	138	OnChangeFn<GroupingState>		TanStack Table Grouping Docs
If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.grouping option.
	139	OnChangeFn<MRT_Column<TData> \| null>
No Description Provided... Yet...
	140	OnChangeFn<MRT_Row<TData> \| null>
No Description Provided... Yet...
	141	OnChangeFn<boolean>
No Description Provided... Yet...
	142	OnChangeFn<PaginationState>		TanStack Table Pagination Docs
If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.pagination option.
	143	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs
If provided, this function will be called with an updaterFn when state.rowSelection changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
	144	OnChangeFn<boolean>
No Description Provided... Yet...
	145	OnChangeFn<boolean>
No Description Provided... Yet...
	146	OnChangeFn<boolean>
No Description Provided... Yet...
	147	OnChangeFn<SortingState>		TanStack Table Sorting Docs
If provided, this function will be called with an updaterFn when state.sorting changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
	148	number		TanStack Table Pagination Docs
When manually controlling pagination, you should supply a total pageCount value to the table if you know it. If you do not know how many pages there are, you can set this to -1.
	149	boolean		TanStack Table Expanding Docs
If true expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If false expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
	150	'first' \| 'last'
No Description Provided... Yet...
	151	'first' \| 'last'
No Description Provided... Yet...
	152	'left' \| 'right'
No Description Provided... Yet...
	153	'bottom' \| 'top' \| 'both'
No Description Provided... Yet...
	154	'bottom' \| 'top' \| 'none'
No Description Provided... Yet...
	155	'bottom' \| 'top' \| 'both' \| 'none'
No Description Provided... Yet...
	156	ReactNode \| ({ table }) => ReactNode
No Description Provided... Yet...
	157	({ table }) => ReactNode
No Description Provided... Yet...
	158	({ closeMenu, column, table }) => ReactNode[]
No Description Provided... Yet...
	159	({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
No Description Provided... Yet...
	160	({ row, table }) => ReactNode
No Description Provided... Yet...
	161	({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
No Description Provided... Yet...
	162	({ closeMenu, row, table }) => ReactNode[]
No Description Provided... Yet...
	163	({ cell, row, table }) => ReactNode
No Description Provided... Yet...
	164	({ table}) => ReactNode
No Description Provided... Yet...
	165	ReactNode \| ({ table }) => ReactNode
No Description Provided... Yet...
	166	({ table }) => ReactNode
No Description Provided... Yet...
	167	number
No Description Provided... Yet...
	168	'original' \| 'static'	'original'
No Description Provided... Yet...
	169	'all' \| 'page'	page
No Description Provided... Yet...
	170	boolean		TanStack Table Sorting Docs
Set to true for sorting toggles on this column to start in the descending direction.
	171	Record<string, SortingFn>		TanStack Table Sorting Docs
This option allows you to define custom sorting functions that can be referenced in a column's sortingFn option by their key. Example:
	172	Partial<MRT_TableState<TData>>		Table State Management Guide
No Description Provided... Yet...
	173	MutableRefObject<MRT_TableInstance<TData> \| null>
No Description Provided... Yet...
	174	MutableRefObject<Virtualizer \| null>
No Description Provided... Yet...
	175	Partial<VirtualizerOptions<HTMLDivElement>>
No Description Provided... Yet...

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

Source Code

1import React, { FC, useEffect, useMemo, useState } from 'react';
2import Link from 'next/link';
3import MaterialReactTable, {
4  MaterialReactTableProps,
5  MRT_ColumnDef,
6} from 'material-react-table';
7import {
8  Link as MuiLink,
9  Typography,
10  useMediaQuery,
11  useTheme,
12} from '@mui/material';
13import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
14import { PropRow, rootProps } from './rootProps';
15
16interface Props {
17  onlyProps?: Set<keyof MaterialReactTableProps>;
18}
19
20const RootPropTable: FC<Props> = ({ onlyProps }) => {
21  const theme = useTheme();
22  const isDesktop = useMediaQuery('(min-width: 1200px)');
23
24  const columns = useMemo(
25    () =>
26      [
27        {
28          enableClickToCopy: true,
29          header: 'Prop Name',
30          accessorKey: 'propName',
31          muiTableBodyCellCopyButtonProps: ({ cell }) => ({
32            className: 'prop',
33            // component: 'a',
34            id: `${cell.getValue<string>()}-prop`,
35            // href: `#${cell.getValue<string>()}-prop`,
36          }),
37          Cell: ({ cell, row }) =>
38            row.original?.required ? (
39              <strong style={{ color: theme.palette.primary.dark }}>
40                {cell.getValue<string>()}*
41              </strong>
42            ) : (
43              cell.getValue<string>()
44            ),
45        },
46        {
47          header: 'Type',
48          accessorKey: 'type',
49          enableGlobalFilter: false,
50          Cell: ({ cell }) => (
51            <SampleCodeSnippet
52              className="language-js"
53              enableCopyButton={false}
54              style={{
55                backgroundColor: 'transparent',
56                fontSize: '0.9rem',
57                margin: 0,
58                padding: 0,
59                minHeight: 'unset',
60              }}
61            >
62              {cell.getValue<string>()}
63            </SampleCodeSnippet>
64          ),
65        },
66        {
67          header: 'Required',
68          accessorKey: 'required',
69          enableGlobalFilter: false,
70        },
71        {
72          header: 'Default Value',
73          accessorKey: 'defaultValue',
74          enableGlobalFilter: false,
75          Cell: ({ cell }) => (
76            <SampleCodeSnippet
77              className="language-js"
78              enableCopyButton={false}
79              style={{
80                backgroundColor: 'transparent',
81                fontSize: '0.9rem',
82                margin: 0,
83                padding: 0,
84                minHeight: 'unset',
85              }}
86            >
87              {cell.getValue<string>()}
88            </SampleCodeSnippet>
89          ),
90        },
91        {
92          header: 'Description',
93          accessorKey: 'description',
94          enableGlobalFilter: false,
95        },
96        {
97          header: 'More Info Links',
98          accessorKey: 'link',
99          disableFilters: true,
100          enableGlobalFilter: false,
101          Cell: ({ cell, row }) => (
102            <Link href={cell.getValue() as string} passHref>
103              <MuiLink
104                color={
105                  row.original.source === 'MRT'
106                    ? 'text.primary'
107                    : row.original.source === 'Material UI'
108                    ? 'primary.main'
109                    : row.original.source === 'TanStack Table'
110                    ? 'secondary.main'
111                    : undefined
112                }
113                target={
114                  (cell.getValue() as string).startsWith('http')
115                    ? '_blank'
116                    : undefined
117                }
118                rel="noreferrer"
119              >
120                {row.original?.linkText}
121              </MuiLink>
122            </Link>
123          ),
124        },
125      ] as MRT_ColumnDef<PropRow>[],
126    [theme],
127  );
128
129  const [columnPinning, setColumnPinning] = useState({});
130
131  useEffect(() => {
132    if (typeof window !== 'undefined') {
133      if (isDesktop) {
134        setColumnPinning({
135          left: ['mrt-row-expand', 'mrt-row-numbers', 'propName'],
136          right: ['link'],
137        });
138      } else {
139        setColumnPinning({});
140      }
141    }
142  }, [isDesktop]);
143
144  const data = useMemo(() => {
145    if (onlyProps) {
146      return rootProps.filter(({ propName }) => onlyProps.has(propName));
147    }
148    return rootProps;
149  }, [onlyProps]);
150
151  return (
152    <MaterialReactTable
153      columns={columns}
154      data={data}
155      displayColumnDefOptions={{
156        'mrt-row-numbers': {
157          size: 10,
158        },
159        'mrt-row-expand': {
160          size: 10,
161        },
162      }}
163      enableColumnActions={!onlyProps}
164      enableColumnFilterModes
165      enablePagination={false}
166      enablePinning
167      enableRowNumbers
168      enableBottomToolbar={false}
169      enableTopToolbar={!onlyProps}
170      initialState={{
171        columnVisibility: { required: false, description: false },
172        density: 'compact',
173        showGlobalFilter: true,
174        sorting: [
175          { id: 'required', desc: true },
176          { id: 'propName', desc: false },
177        ],
178      }}
179      muiSearchTextFieldProps={{
180        placeholder: 'Search All Props',
181        sx: { minWidth: '18rem' },
182        variant: 'outlined',
183      }}
184      muiTablePaperProps={{
185        sx: { mb: '1.5rem' },
186        id: onlyProps ? 'relevant-props-table' : 'props-table',
187      }}
188      positionGlobalFilter="left"
189      renderDetailPanel={({ row }) => (
190        <Typography
191          color={row.original.description ? 'secondary.main' : 'text.secondary'}
192        >
193          {row.original.description || 'No Description Provided... Yet...'}
194        </Typography>
195      )}
196      rowNumberMode="static"
197      onColumnPinningChange={setColumnPinning}
198      state={{ columnPinning }}
199    />
200  );
201};
202
203export default RootPropTable;
204