> For the complete documentation index, see [llms.txt](https://parkerself.gitbook.io/mui-table/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://parkerself.gitbook.io/mui-table/options/column-options.md).

# ColumnOptions

## ColumnOptions

```jsx
const example = <MUITable {...props} columns={ColumnOptions} />
```

| 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` | ❌        | `[]`    |

## ColumnProp

| Prop                    | Type                                     | Description                                                                                                                                 | Required | Default                    |
| ----------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------- |
| name                    | `string`                                 | Key for the column.                                                                                                                         | ✅        | n/a                        |
| calculateCellDefinition | `(item: Object) => Cell`                 | Takes an item from your data array prop and returns a Cell.                                                                                 | ✅        | n/a                        |
| title                   | `string`                                 | Display this as column head text instead of `name`                                                                                          | ❌        | `undefined`                |
| type                    | `"dimension" \| "metric"`                | Metric will treat Cell display values as numbers                                                                                            | ❌        | `"dimension"`              |
| display                 | `'true' \| 'false' \| 'excluded'`        | **true** will show column by default, **false** will hide by default (can toggle with viewColumns), **excluded** will never show the column | ❌        | `"true"`                   |
| isRowId                 | `boolean`                                | Use cell value for this column to create an unique row ID. Defaults to true if type is "dimension", false if "metric"                       | ❌        | `col.type === "dimension"` |
| summary                 | `boolean`                                | Show in summary row                                                                                                                         | ❌        | `false`                    |
| summaryOptions          | `ColSummaryOpts`                         | See below.                                                                                                                                  | ❌        | `undefined`                |
| filter                  | `boolean`                                | Show in filter data tool.                                                                                                                   | ❌        | `true`                     |
| filterOptions           | `ColFilterOpts`                          | See below.                                                                                                                                  | ❌        | `undefined`                |
| viewColumns             | `boolean`                                | Show in toggle columns tool.                                                                                                                | ❌        | `true`                     |
| sort                    | `boolean`                                | Sort data by column?                                                                                                                        | ❌        | `true`                     |
| download                | `boolean`                                | Show column in csv download?                                                                                                                | ❌        | `true`                     |
| customHeadRender        | `(col: StateColumn) => ReactNode`        | Custom head cell render. Learn more in custom components page.                                                                              | ❌        | `undefined`                |
| customBodyRender        | `(cell: Cell, row: Cell[]) => ReactNode` | Custom body cell render. Learn more in custom components page.                                                                              | ❌        | `undefined`                |

### `ColSummaryOpts`

| Prop            | Type                                                                                                              | Description                                | Required                       | Default     |                      |                               |   |           |
| --------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------ | ----------- | -------------------- | ----------------------------- | - | --------- |
| type            | `'AVG' \| 'SUM'`                                                                                                  | How to  calculate summary total            | ✅                              | `'SUM'`     |                      |                               |   |           |
| format          | <p><code>'float'                                                                                                  | 'integer'                                  | </code> </p><p><code>'seconds' | 'hours'     | 'minutes'</code></p> | Format for the summary values | ✅ | `'float'` |
| prefix          | `string`                                                                                                          | Prefix for value in summary                | ❌                              | `undefined` |                      |                               |   |           |
| postfix         | `string`                                                                                                          | Postfix for value in summary               | ❌                              | `undefined` |                      |                               |   |           |
| customCalculate | <p><code>(displayRows: Row\[], allRows: Row\[]) => ({</code></p><p><code>visible: Cell, total: Cell })</code></p> | Custom calculate function for summary cell | ❌                              | `undefined` |                      |                               |   |           |
| customRender    | `({visible: Cell, total: Cell}) => ReactNode`                                                                     | Custom render function for summary cell    | ❌                              | `undefined` |                      |                               |   |           |
| showComparison  | `'true' \| 'whenDifferent' \| 'false'`                                                                            | See below.                                 | ❌                              | `'true'`    |                      |                               |   |           |

![Summary Row Example](https://107195991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYSbLdEGMU-TdvsYVoh%2F-LZM5mfDyJnR1lO0tqvV%2F-LZM6jhAKU3-71eSLWeW%2Fimage.png?alt=media\&token=a455f663-0092-43f8-81f6-318a024a9dfb)

### `ColFilterOpts`

| Prop           | Type                                        | Description                             | Required | Default         |
| -------------- | ------------------------------------------- | --------------------------------------- | -------- | --------------- |
| exact          | `boolean`                                   | Filter using `.includes()` or exact     | ✅        | `true`          |
| type           | `'checkbox' \| 'dropdown' \| 'multiselect'` | How to render filter picker             | ✅        | `'multiselect'` |
| defaultOpts    | `string[]`                                  | Values to include even if not in data   | ❌        | `undefined`     |
| sortFilterList | `boolean`                                   | Alphabetically sort the filter options? | ❌        | `false`         |

## `GeneratedColumn`

| Prop                   | Type                                                          | Description                                          | Required | Default                  |
| ---------------------- | ------------------------------------------------------------- | ---------------------------------------------------- | -------- | ------------------------ |
| path                   | `string[]`                                                    | Path of object keys to follow to get root entry.     | ✅        | n/a                      |
| nameProp               | `string`                                                      | Key of the nested object to use for the column name. | ✅        | n/a                      |
| options                | `ColumnProp`                                                  | Default options to user                              | ❌        | defaults from ColumnProp |
| type                   | `"dimension" \| "metric"`                                     | Metric will treat Cell display values as numbers.    | ❌        | `"dimension"`            |
| modifyProps            | `(col: StateColumn, entry: Object) => StateColumn`            | Take the generated StateColumn and modify any props. | ❌        | `undefined`              |
| generateRelatedColumns | `( col: ColumnProp, entry: Object ) => ColumnProp[] \| null;` | Generate more columns from the initial one generated | ❌        | `undefined`              |