# Top Level Props

## MUITable Props

The [**configurable example**](https://s3.amazonaws.com/mui-table)  is a great way to see all of the options in action.

```jsx
<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](/mui-table/options/options.md#columnoptions)        | `ColumnOptions`      | ✅        | n/a                         |
| [display](/mui-table/options/options.md#displayoptions)       | `DisplayOptions`     | ❌        | `DisplayOptionsDefault`     |
| [toolbar](/mui-table/options/options.md#toolbaroptions)       | `ToolbarOptions`     | ❌        | `ToolbarOptionsDefault`     |
| [rows](/mui-table/options/options.md#rowoptions)              | `RowOptions`         | ❌        | `RowOptionsDefault`         |
| [pagination](/mui-table/options/options.md#paginationoptions) | `PaginationOptions`  | ❌        | `PaginationOptionsDefault`  |
| [translations](/mui-table/options/translationoptions.md)      | `TranslationOptions` | ❌        | `TranslationOptionsDefault` |
| [hooks](/mui-table/options/options.md#hookoptions)            | `HookOptions`        | ❌        | `HookOptionsDefault`        |

## `ColumnOptions`

[Expanded in Column Options page](/mui-table/options/column-options.md)

| Prop                                                              | Type                                        | Description                                                                                         | Required | Default |
| ----------------------------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | ------- |
| [static](/mui-table/options/column-options.md#columnprop)         | `ColumnProp[]`                              | Column definitions                                                                                  | ✅        | n/a     |
| [generated](/mui-table/options/column-options.md#generatedcolumn) | `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                            |            |
| ------------------------------------------------------- | ------------------ | ----------------------------------------------- | ---------------------------------- | ---------- |
| [s](/mui-table/options/column-options.md#columnprop)ort | `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                                              | <p><code>"stacked" | </code></p><p><code>"scroll"</code></p>         | 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.](/mui-table/features/custom-components.md) | ❌                    | `undefined`    |
| customToolbarLeft   | `(context: MUITableContext) => ReactNode`     | [See Custom Components.](/mui-table/features/custom-components.md) | ❌                    | `undefined`    |
| customToolbarBottom | `(context: MUITableContext) => ReactNode`     | [See Custom Components.](/mui-table/features/custom-components.md) | ❌                    | `undefined`    |
| customToolbarFull   | `(context: MUITableContext) => ReactNode`     | [See Custom Components.](/mui-table/features/custom-components.md) | ❌                    | `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.](/mui-table/features/custom-components.md) | `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.](/mui-table/options/translationoptions.md)

## `HookOptions`

None of these are required.

```typescript
{
    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;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://parkerself.gitbook.io/mui-table/options/options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.