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

## `ColumnOptions`

[Expanded in Column Options page](https://parkerself.gitbook.io/mui-table/options/column-options)

| Prop                                                                                | Type                                        | Description                                                                                         | Required | Default |
| ----------------------------------------------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | ------- |
| [static](https://parkerself.gitbook.io/mui-table/column-options#columnprop)         | `ColumnProp[]`                              | Column definitions                                                                                  | ✅        | n/a     |
| [generated](https://parkerself.gitbook.io/mui-table/column-options#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](https://parkerself.gitbook.io/mui-table/column-options#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.](https://parkerself.gitbook.io/mui-table/features/custom-components) | ❌                    | `undefined`    |
| customToolbarLeft   | `(context: MUITableContext) => ReactNode`     | [See Custom Components.](https://parkerself.gitbook.io/mui-table/features/custom-components) | ❌                    | `undefined`    |
| customToolbarBottom | `(context: MUITableContext) => ReactNode`     | [See Custom Components.](https://parkerself.gitbook.io/mui-table/features/custom-components) | ❌                    | `undefined`    |
| customToolbarFull   | `(context: MUITableContext) => ReactNode`     | [See Custom Components.](https://parkerself.gitbook.io/mui-table/features/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.](https://parkerself.gitbook.io/mui-table/features/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.](https://parkerself.gitbook.io/mui-table/options/translationoptions)

## `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;
}
```