Skip to content
Material Svelte Table

Table Options

Options for createMaterialSvelteTable and <MaterialSvelteTable options={…} />. Only columns and data are required.

Anything reactive (data, state, …) must be passed as a getter. …Props options take an object, or a function of their context. Options named after a former render… option are snippets.

This lists the options MRT adds or changes. The table also accepts the TanStack Table v9 options of the enabled features, such as enableSorting, manualPagination, getRowId or filterFromLeafRows.

OptionTypeDefaultDescription
aggregationFns?Record<string, any>Custom aggregation functions, merged into the built-in ones. In TanStack Table v9 these are registered once when the table is created and cannot change afterwards.
bottomToolbar?Snippet<[TableContext<TData>]>
bottomToolbarCustomActions?Snippet<[TableContext<TData>]>
bottomToolbarProps?PropsOrFn<ElementProps<'div'>, TableContext<TData>>
caption?Snippet<[TableContext<TData>]>
cellActionMenuItems?Snippet< [ MRT_CellContext<TData> & { closeMenu: () => void; internalMenuItems: Snippet[]; }, ] >
circularProgressProps?PropsOrFn<SmuiProps, TableContext<TData>>
columnActionsButtonProps?PropsOrFn<SmuiProps, MRT_ColumnContext<TData>>
columnActionsMenuItems?Snippet< [ MRT_ColumnContext<TData> & { closeMenu: () => void; internalColumnMenuItems: Snippet[]; }, ] >
columnDragHandleProps?PropsOrFn<SmuiProps, MRT_ColumnContext<TData>>
columnFilterDisplayMode?'custom' | 'popover' | 'subheader''subheader'
columnFilterModeMenuItems?Snippet< [ MRT_ColumnContext<TData> & { internalFilterOptions: MRT_InternalFilterOption[]; onSelectFilterMode: (filterMode: MRT_FilterOption) => void; }, ] >
columnFilterModeOptions?Array< LiteralUnion<string & MRT_FilterOption> > | null
columnsMRT_ColumnDef<TData, any>[]The columns to display in the table. accessorKeys or accessorFns must match keys in data.
columnVirtualizerInstanceRef?MRT_Ref<MRT_ColumnVirtualizer>
columnVirtualizerOptions?PropsOrFn< Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>, TableContext<TData> >
copyButtonProps?PropsOrFn<SmuiProps, MRT_CellContext<TData>>
createDisplayMode?'custom' | 'modal' | 'row''modal'
createRowDialogContent?Snippet< [RowContext<TData> & { internalEditCells: MRT_Cell<TData>[] }] >
createRowDialogProps?PropsOrFn<SmuiProps, RowContext<TData>>
dataTData[]Your data as an array of objects. Keep the shape consistent.
defaultColumn?Partial<MRT_ColumnDef<TData>>Change an option for all columns at once.
defaultDisplayColumn?Partial<MRT_DisplayColumnDef<TData>>Change the default options for display columns.
detailPanel?Snippet<[RowContext<TData>]>
detailPanelProps?PropsOrFn<ElementProps<'td'>, RowContext<TData>>
displayColumnDefOptions?Partial<{ [key in MRT_DisplayColumnIds]: Partial<MRT_DisplayColumnDef<TData>>; }>
editDisplayMode?'cell' | 'custom' | 'modal' | 'row' | 'table''modal'
editRowDialogContent?Snippet< [RowContext<TData> & { internalEditCells: MRT_Cell<TData>[] }] >
editRowDialogProps?PropsOrFn<SmuiProps, RowContext<TData>>
editTextFieldProps?PropsOrFn<SmuiProps, MRT_CellContext<TData>>
emptyRowsFallback?Snippet<[TableContext<TData>]>
enableBatchRowSelection?booleantrue
enableBottomToolbar?booleantrue
enableCellActions?((cell: MRT_Cell<TData>) => boolean) | boolean
enableClickToCopy?| 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean) | boolean
enableColumnActions?booleantrue
enableColumnDragging?boolean
enableColumnFilterModes?boolean
enableColumnOrdering?booleanfalse
enableColumnVirtualization?boolean
enableDensityToggle?booleantrue
enableEditing?((row: MRT_Row<TData>) => boolean) | boolean
enableExpandAll?booleantrue
enableFacetedValues?booleanfalse
enableFilterMatchHighlighting?booleantrue
enableFullScreenToggle?booleantrue
enableGlobalFilterModes?boolean
enableGlobalFilterRankedResults?booleantrue
enableKeyboardShortcuts?booleantrue
enablePagination?booleantrue
enableRowActions?boolean
enableRowDragging?boolean
enableRowNumbers?boolean
enableRowOrdering?boolean
enableRowSelection?((row: MRT_Row<TData>) => boolean) | booleanfalse
enableRowVirtualization?boolean
enableSelectAll?booleantrue
enableStickyFooter?boolean
enableStickyHeader?booleanfalse
enableTableFooter?booleantrue
enableTableHead?booleantrue
enableToolbarInternalActions?booleantrue
enableTopToolbar?booleantrue
expandAllButtonProps?PropsOrFn<SmuiProps, TableContext<TData>>
expandButtonProps?PropsOrFn< SmuiProps, RowContext<TData> & { staticRowIndex?: number } >
filterAutocompleteProps?PropsOrFn<SmuiProps, MRT_ColumnContext<TData>>
filterCheckboxProps?PropsOrFn<SmuiProps, MRT_ColumnContext<TData>>
filterDateInputProps?PropsOrFn< SmuiProps, MRT_ColumnContext<TData> & { rangeFilterIndex?: number } >
filterFns?Record<string, any>Custom filter functions, merged into the built-in ones. Registered once when the table is created.
filterSliderProps?PropsOrFn<SmuiProps, MRT_ColumnContext<TData>>
filterTextFieldProps?PropsOrFn< SmuiProps, MRT_ColumnContext<TData> & { rangeFilterIndex?: number } >
getRowId?( originalRow: TData, index: number, parentRow?: MRT_Row<TData>, ) => string
globalFilterFn?MRT_FilterOption
globalFilterModeMenuItems?Snippet< [ TableContext<TData> & { internalFilterOptions: MRT_InternalFilterOption[]; onSelectFilterMode: (filterMode: MRT_FilterOption) => void; }, ] >
globalFilterModeOptions?MRT_FilterOption[] | null
icons?Partial<MRT_Icons>
id?string
initialState?Partial<MRT_TableState<TData>>
layoutMode?'grid' | 'grid-no-grow' | 'semantic'Changes which kind of CSS layout is used to render the table. semantic uses default semantic HTML elements, while grid adds CSS grid and flexbox styles
linearProgressProps?PropsOrFn< SmuiProps, TableContext<TData> & { isTopToolbar: boolean } >
localization?Partial<MRT_Localization>A locale imported from material-svelte-tanstack-table/locales/* or a custom locale object.
mrtTheme?Partial<MRT_Theme>Override MRT’s theme colors. Defaults are derived from SMUI/Material CSS variables.
onActionCellChange?OnChangeFn<MRT_Cell<TData> | null>
onColumnFilterFnsChange?OnChangeFn<{ [key: string]: MRT_FilterOption }>
onCreatingRowCancel?(props: RowContext<TData>) => void
onCreatingRowChange?OnChangeFn<MRT_Row<TData> | null>
onCreatingRowSave?( props: RowContext<TData> & { exitCreatingMode: () => void; values: Record<LiteralUnion<string & DeepKeys<TData>>, any>; }, ) => Promise<void> | void
onDensityChange?OnChangeFn<MRT_DensityState>
onDraggingColumnChange?OnChangeFn<MRT_Column<TData> | null>
onDraggingRowChange?OnChangeFn<MRT_Row<TData> | null>
onEditingCellChange?OnChangeFn<MRT_Cell<TData> | null>
onEditingRowCancel?(props: RowContext<TData>) => void
onEditingRowChange?OnChangeFn<MRT_Row<TData> | null>
onEditingRowSave?( props: RowContext<TData> & { exitEditingMode: () => void; values: Record<LiteralUnion<string & DeepKeys<TData>>, any>; }, ) => Promise<void> | void
onGlobalFilterFnChange?OnChangeFn<MRT_FilterOption>
onHoveredColumnChange?OnChangeFn<Partial<MRT_Column<TData>> | null>
onHoveredRowChange?OnChangeFn<Partial<MRT_Row<TData>> | null>
onIsFullScreenChange?OnChangeFn<boolean>
onShowAlertBannerChange?OnChangeFn<boolean>
onShowColumnFiltersChange?OnChangeFn<boolean>
onShowGlobalFilterChange?OnChangeFn<boolean>
onShowToolbarDropZoneChange?OnChangeFn<boolean>
paginationDisplayMode?'custom' | 'default' | 'pages''default'
paginationProps?PropsOrFn< SmuiProps & { disabled?: boolean; rowsPerPageOptions?: { label: string; value: number }[] | number[]; showRowsPerPage?: boolean; }, TableContext<T…
positionActionsColumn?'first' | 'last''first'
positionCreatingRow?'bottom' | 'top' | number'top'
positionExpandColumn?'first' | 'last''first'
positionGlobalFilter?'left' | 'none' | 'right''right'
positionPagination?'both' | 'bottom' | 'none' | 'top''bottom'
positionToolbarAlertBanner?'bottom' | 'head-overlay' | 'none' | 'top''top'
positionToolbarDropZone?'both' | 'bottom' | 'none' | 'top''top'
rowActionMenuItems?Snippet< [RowContext<TData> & { closeMenu: () => void; staticRowIndex?: number }] >
rowActions?Snippet< [ RowContext<TData> & { cell: MRT_Cell<TData>; staticRowIndex?: number; }, ] >
rowDragHandleProps?PropsOrFn<SmuiProps, RowContext<TData>>
rowNumberDisplayMode?'original' | 'static''static'
rowPinningDisplayMode?| 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom''sticky'
rowVirtualizerInstanceRef?MRT_Ref<MRT_RowVirtualizer>
rowVirtualizerOptions?PropsOrFn< Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>, TableContext<TData> >
searchTextFieldProps?PropsOrFn<SmuiProps, TableContext<TData>>
selectAllCheckboxProps?PropsOrFn<SmuiProps, TableContext<TData>>
selectAllMode?'all' | 'page''page'
selectCheckboxProps?PropsOrFn< SmuiProps, RowContext<TData> & { staticRowIndex?: number } >
skeletonProps?PropsOrFn<SmuiProps, MRT_CellContext<TData>>
sortFns?Record<string, any>Custom sort functions (formerly sortingFns), merged into the built-in ones. Registered once when the table is created.
state?Partial<MRT_TableState<TData>>Manage state externally any way you want, then pass it back into MRT.
tableBodyCellProps?PropsOrFn<ElementProps<'td'>, MRT_CellContext<TData>>
tableBodyProps?PropsOrFn<ElementProps<'tbody'>, TableContext<TData>>
tableBodyRowProps?PropsOrFn< ElementProps<'tr'>, RowContext<TData> & { isDetailPanel?: boolean; staticRowIndex: number } >
tableContainerProps?PropsOrFn<ElementProps<'div'>, TableContext<TData>>
tableFooterCellProps?PropsOrFn< ElementProps<'td'>, MRT_ColumnContext<TData> >
tableFooterProps?PropsOrFn<ElementProps<'tfoot'>, TableContext<TData>>
tableFooterRowProps?PropsOrFn< ElementProps<'tr'>, TableContext<TData> & { footerGroup: MRT_HeaderGroup<TData> } >
tableHeadCellProps?PropsOrFn<ElementProps<'th'>, MRT_ColumnContext<TData>>
tableHeadProps?PropsOrFn<ElementProps<'thead'>, TableContext<TData>>
tableHeadRowProps?PropsOrFn< ElementProps<'tr'>, TableContext<TData> & { headerGroup: MRT_HeaderGroup<TData> } >
tablePaperProps?PropsOrFn<ElementProps<'div'>, TableContext<TData>>
tableProps?PropsOrFn<ElementProps<'table'>, TableContext<TData>>
toolbarAlertBannerChipProps?PropsOrFn<SmuiProps, TableContext<TData>>
toolbarAlertBannerContent?Snippet< [ TableContext<TData> & { groupedAlert: Snippet | null; selectedAlert: Snippet | null; }, ] >
toolbarAlertBannerProps?PropsOrFn<SmuiProps, TableContext<TData>>
toolbarInternalActions?Snippet<[TableContext<TData>]>
topToolbar?Snippet<[TableContext<TData>]>
topToolbarCustomActions?Snippet<[TableContext<TData>]>
topToolbarProps?PropsOrFn<ElementProps<'div'>, TableContext<TData>>