Top Level Props

MUITable Props

The configurable example is a great way to see all of the options in action.

<MUITable 
    title="Test"
    data={[]}
    loading={false}
    columns={ColumnOptions}
    toolbar={ToolbarOptions}
    rows={RowOptions}
    pagination={PaginationOptions}
    translations={TranslationOptions}
    hooks={HookOptions}
    display={DisplayOptions}
/>    
    

Prop	Type	Required	Default
title	ReactNode	✅	n/a
data	Object[]	✅	n/a
loading	boolean	❌	false
columns	ColumnOptions	✅	n/a
display	DisplayOptions	❌	DisplayOptionsDefault
toolbar	ToolbarOptions	❌	ToolbarOptionsDefault
rows	RowOptions	❌	RowOptionsDefault
pagination	PaginationOptions	❌	PaginationOptionsDefault
translations	TranslationOptions	❌	TranslationOptionsDefault
hooks	HookOptions	❌	HookOptionsDefault

ColumnOptions

Expanded in Column Options page

Prop	Type	Description	Required	Default
static	ColumnProp[]	Column definitions	✅	n/a
generated	GeneratedColumn[]	Define columns generated from the data set	❌	[]
sortColumns	(columns: StateColumn[]) => StateColumn[]	Function to sort the order of the columns once generated. Especially useful with GeneratedColumns	❌	[]

DisplayOptions

None of these are required. These are all of the highest level functionality options

Prop	Type	Description	Default
sort	boolean	Allow sorting	true
paginate	boolean	Pagination footer	true
filter	boolean	Filter toolbar	true
fixedSearch	boolean	Fixed search bar under title	false
search	boolean	Button to toggle search bar	true
download	boolean	Download button	false
fixedHeader	boolean	Fixed column headers	true
viewColumns	boolean	Ability to toggle column visibility	true
elevation	number	Paper elevation for entire table	4
responsive	"stacked" | "scroll"	Wrap or horizontal scroll overflow	'scroll'
filterValues	boolean	Show current filters as chips under top toolbar	true

ToolbarOptions

Prop	Type	Description	Required	Default
showDates	boolean	Show the date toolbar?	✅	false
startDate	Date	If showDates and not provided, start date picker won't render	❌	undefined
endDate	Date	If showDates and not provided, end date picker won't render	❌	undefined
handleDateChange	(isStart: boolean) => (value: Date) => void	Called first with isStart, and should return change handler.	showDates === true	n/a
startLabel	string	Label for start date picker	❌	"Start Date"
endLabel	string	Label for end date picker	❌	"End Date"
customToolbarRight	(context: MUITableContext) => ReactNode	See Custom Components.	❌	undefined
customToolbarLeft	(context: MUITableContext) => ReactNode	See Custom Components.	❌	undefined
customToolbarBottom	(context: MUITableContext) => ReactNode	See Custom Components.	❌	undefined
customToolbarFull	(context: MUITableContext) => ReactNode	See Custom Components.	❌	undefined

RowOptions

None of these are required.

Prop	Type	Description	Default
rowHover	boolean	Shade rows on hover	false
showSummaryRow	boolean	Show summary row	false
selectable	boolean	Selectable rows?	false
summaryTop	boolean	Show summary at top?	true
setRowProps	(row: Row, rowIndex: number) => Object	Set props on the standard MUI TableRow component	undefined
customToolbarSelect	(selectedRows: Row[], context: MUITableContext) => ReactNode	Render a custom toolbar when rows selected	"End Date"
selectBarTop	boolean	Show the selected rows toolbar in top of table	true
selectBarActions	(context: MUITableContext) => ReactNode	See Custom Components.	undefined
hideSelectDelete	boolean	Hide the default delete button in selected toolbar	false
skipDuplicates	boolean	See Row Merging / Duplication	false
mergeDuplicates	boolean	See Row Merging / Duplication	false
mergeFunction	(rows: Row[]) => Row	See Row Merging / Duplication	undefined
hiddenColumnMerge	boolean	See Row Merging / Duplication	false

PaginationOptions

None of these are required.

Prop	Type	Description	Default
page	number	Initial page. Will not affect subsequent renders if changed.	0
rowsPerPage	boolean	Initial rowsPerPage. Will not affect subsequent renders if changed.	5
rowsPerPageOptions	number[]	Choices for rowsPerPage	[5,25,50]
customFooter	(context: MUITableContext) => ReactNode	Render a custom footer instead of pagination.	undefined

TranslationOptions

See the TranslationOptions page for all the text labels.

HookOptions

None of these are required.

{
    onSearchChange?: (searchText: string) => void;
    onRowsSelect?: (
        newSelections: Row[],
        removedSelections: Row[],
        currentSelections: Row[]
    ) => void;
    onRowsDelete?: (rowsDeleted: Row[]) => void;
    onFilterChange?: (change: string | string[], filterList: string[][]) => void;
    onRowClick?: (row: Row, rowIndex: number) => void;
    onCellClick?: (cell: Cell, row: Row, rowIndex: number) => void;
    onColumnSortChange?: (changedColumn: StateColumn, direction: 'asc' | 'desc' | null) => void;
    onColumnViewChange?: (changedColumn: StateColumn, visible: boolean) => void;
    onChangePage?: (currentPage: number) => void;
    onChangeRowsPerPage?: (numberOfRows: number) => void;
}