## Table  
Use the Table component to display tables with Mantine's theme styles. An alternative to html.Table  
Category: Typography  

> Looking for advanced table capabilities? [Dash AG Grid](/dash-ag-grid) pairs well with DMC and supports editing, sorting, filtering, selecting, conditional formatting and much more.

### Simple Example

Use Table component to add Mantine styled tables in your app. use `dmc.Table` and associated components as
drop-in replacements for `html.Table` and associated components respectively.

```python
import dash_mantine_components as dmc

elements = [
    {"position": 6, "mass": 12.011, "symbol": "C", "name": "Carbon"},
    {"position": 7, "mass": 14.007, "symbol": "N", "name": "Nitrogen"},
    {"position": 39, "mass": 88.906, "symbol": "Y", "name": "Yttrium"},
    {"position": 56, "mass": 137.33, "symbol": "Ba", "name": "Barium"},
    {"position": 58, "mass": 140.12, "symbol": "Ce", "name": "Cerium"},
]

rows = [
    dmc.TableTr(
        [
            dmc.TableTd(element["position"]),
            dmc.TableTd(element["name"]),
            dmc.TableTd(element["symbol"]),
            dmc.TableTd(element["mass"]),
        ]
    )
    for element in elements
]

head = dmc.TableThead(
    dmc.TableTr(
        [
            dmc.TableTh("Element Position"),
            dmc.TableTh("Element Name"),
            dmc.TableTh("Symbol"),
            dmc.TableTh("Atomic Mass"),
        ]
    )
)
body = dmc.TableTbody(rows)
caption = dmc.TableCaption("Some elements from periodic table")

component = dmc.Table([head, body, caption])
```
### data prop

You can use `data` prop to automatically generate table rows from raw data. 
`data` prop accepts an object with the following properties: `head`, `foot`, `body`, `caption`:

```python
import dash_mantine_components as dmc

component = dmc.Table(
    data={
        "caption": "Some elements from periodic table",
        "head": ["Element position", "Atomic mass", "Symbol", "Element name"],
        "body": [
            [6, 12.011, "C", "Carbon"],
            [7, 14.007, "N", "Nitrogen"],
            [39, 88.906, "Y", "Yttrium"],
            [56, 137.33, "Ba", "Barium"],
            [58, 140.12, "Ce", "Cerium"],
        ],
    }
)
```
### Spacing

To control spacing use `horizontalSpacing` and `verticalSpacing` props. Both props support spacing from Mantine's theme
and number values to set cell padding in px.


### Striped and Rows Hover


### Scroll container
To prevent viewport overflow wrap `Table` with `TableScrollContainer`. The component accepts `minWidth` prop which sets
minimum width below which table will be scrollable.

By default, `TableScrollContainer` uses `ScrollArea`, you can change it to native scrollbars by setting `type="native"`

You can also set `maxHeight` prop on `TableScrollContainer` to limit table height


```python
import dash_mantine_components as dmc
import random

rows = [
    [
        i + 1,
        f"S-{1000 + i}",
        round(random.uniform(15, 30), 1),   # Temperature °C
        round(random.uniform(30, 70), 1),   # Humidity %
    ]
    for i in range(50)
]

component = dmc.TableScrollContainer(
    dmc.Table(
        data={
            "caption": "Synthetic Sensor Readings",
            "head": ["#", "Sensor ID", "Temperature (°C)", "Humidity (%)"],
            "body": rows,
        },
        striped=True,
        highlightOnHover=True,
        withTableBorder=True,
    ),
    maxHeight=300,
    minWidth=600,
    type="scrollarea",
)
```
### Vertical variant
Set `variant="vertical"` to render table with vertical layout:



```python
import dash_mantine_components as dmc

component = dmc.Table(
    withTableBorder=True,
    layout="fixed",
    variant="vertical",
    children=[
        dmc.TableTbody([
            dmc.TableTr([
                dmc.TableTh("Epic name", w=160),
                dmc.TableTd("7.x migration"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Status"),
                dmc.TableTd("Open"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Total issues"),
                dmc.TableTd("135"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Total story points"),
                dmc.TableTd("874"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Last updated at"),
                dmc.TableTd("September 26, 2024 17:41:26"),
            ]),
        ])
    ]
)
```
### tableProps


Use `tableProps` to pass additional [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) 
to the underlying elements of a dmc.Table, such as `<td>`, `<tr>`, or `<th>`. This is useful when you need to control
layout behavior like `rowSpan`, `colSpan`.

You can pass tableProps to components like:
```python
dmc.TableTd("Monday", tableProps={"rowSpan": 2})
```

This example also shows how to include other dash components in table cells.

```python
import dash_mantine_components as dmc

component = dmc.Table(
    withTableBorder=True,
    withColumnBorders=True,

    children=[
        dmc.TableThead(
            dmc.TableTr([
                dmc.TableTh("Day"),
                dmc.TableTh("Time"),
                dmc.TableTh("Topic"),
                dmc.TableTh("Action"),
            ])
        ),
        dmc.TableTbody([
            dmc.TableTr([
                dmc.TableTd("Monday", tableProps={"rowSpan": 2}),
                dmc.TableTd("9:00 - 10:00"),
                dmc.TableTd("Building Interactive Dashboards with Dash"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
            dmc.TableTr([
                dmc.TableTd("10:15 - 11:00"),
                dmc.TableTd("Advanced Callbacks and App Structure"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
            dmc.TableTr([
                dmc.TableTd("Tuesday", tableProps={"rowSpan": 2}),
                dmc.TableTd("9:00 - 10:00"),
                dmc.TableTd("Data Visualization with Plotly Express"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
            dmc.TableTr([
                dmc.TableTd("10:15 - 11:00"),
                dmc.TableTd("Deploying Dash Apps to the Web"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
        ])
    ]
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Selectors

| Selector  | Static selector             | Description |
|-----------|-----------------------------|-------------|
| `table`   | `.mantine-Table-table`      | Root table element (Table component) |
| `thead`   | `.mantine-Table-thead`      | `<thead>` element (Table.Thead component) |
| `tbody`   | `.mantine-Table-tbody`      | `<tbody>` element (Table.Tbody component) |
| `tfoot`   | `.mantine-Table-tfoot`      | `<tfoot>` element (Table.Tfoot component) |
| `tr`      | `.mantine-Table-tr`         | `<tr>` element (Table.Tr component) |
| `th`      | `.mantine-Table-th`         | `<th>` element (Table.Th component) |
| `td`      | `.mantine-Table-td`         | `<td>` element (Table.Td component) |
| `caption` | `.mantine-Table-caption`    | `<caption>` element (Table.Caption component) |

#### CSS Variables

| Selector | Variable | Description |
|----------|----------|-------------|
| `table`  | `--table-border-color` | Controls border color of all elements inside table |
| `table`  | `--table-layout` | Controls `table-layout` of the table element, `auto` by default |
| `table`  | `--table-caption-side` | Controls `caption-side` of the table element, `bottom` by default |
| `table`  | `--table-horizontal-spacing` | Controls `padding-left` and `padding-right` of Table.Th and Table.Td elements |
| `table`  | `--table-vertical-spacing` | Controls `padding-top` and `padding-bottom` of Table.Td and Table.Th elements |
| `table`  | `--table-striped-color` | Controls `background-color` of even/odd Table.Tr elements |
| `table`  | `--table-highlight-on-hover-color` | Controls `background-color` of Table.Tr elements when hovered |
| `table`  | `--table-sticky-header-offset` | Controls top offset of sticky header |

#### Data Attributes

| Selector | Attribute | Condition | Value |
|----------|-----------|------------|-------|
| `table`  | `data-with-table-border` | `withTableBorder` prop is set on Table component | – |
| `th`, `td` | `data-with-column-border` | `withColumnsBorder` prop is set on Table component | – |
| `tr`      | `data-with-row-border` | `withRowsBorder` prop is set on Table component | – |
| `tr`      | `data-striped` | `striped` prop is set on Table component | `odd` \| `even` |
| `tr`      | `data-hover` | `highlightOnHover` prop is set on Table component | – |
| `tr`      | `data-size` | – | Value of `captionSize` prop on Table component |


### Keyword Arguments
#### Table

- children (a list of or a singular dash component, string or number; optional):
    Headers, rows and footer.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- borderColor (optional):
    Color of table borders, key of `theme.colors` or any valid CSS
    color.

- captionSide (a value equal to: 'top', 'bottom'; optional):
    Determines on which side `Table.Caption` is displayed, `bottom` by
    default.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data (dict; optional):
    Data that should be used to generate table, ignored if `children`
    prop is set.

    `data` is a dict with keys:

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- highlightOnHover (boolean; optional):
    Determines whether table rows background should change to
    `highlightOnHoverColor` when hovered, `False` by default.

- highlightOnHoverColor (optional):
    Background color of table rows when hovered, key of `theme.colors`
    or any valid CSS color.

- horizontalSpacing (number; optional):
    Horizontal cells spacing, key of `theme.spacing` or any valid CSS
    value for padding, numbers are converted to rem, default value is
    `xs`.

- layout (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'fixed'; optional):
    Value of `table-layout` style, `auto` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- stickyHeader (boolean; optional):
    Determines whether `Table.Thead` should be sticky, `False` by
    default.

- stickyHeaderOffset (string | number; optional):
    Offset from top at which `Table.Thead` should become sticky, `0`
    by default.

- striped (boolean; optional):
    Determines whether every odd/even row background should be changed
    to `strippedColor`, if set to `True`, then `odd` value will be
    used, `False` by default.

- stripedColor (optional):
    Background color of striped rows, key of `theme.colors` or any
    valid CSS color.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- tabularNums (boolean; optional):
    Determines whether `font-variant-numeric: tabular-nums` style
    should be set, `False` by default.

- variant (a value equal to: 'default', 'vertical'; optional):
    variant 'default' | 'vertical'.

- verticalSpacing (number; optional):
    Vertical cells spacing, key of `theme.spacing` or any valid CSS
    value for padding, numbers are converted to rem, default value is
    `xs`.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withColumnBorders (boolean; optional):
    Determines whether the table should have borders between columns,
    `False` by default.

- withRowBorders (boolean; optional):
    Determines whether the table should have borders between rows,
    `True` by default.

- withTableBorder (boolean; optional):
    Determines whether the table should have outer border, `False` by
    default.
#### TableScrollContainer

- children (a list of or a singular dash component, string or number; optional):
    Content rendered inside the scroll container.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- className (string; optional):
    Class added to the root element, if applicable.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- maxHeight (string | number; optional):
    `max-height` of the `Table` at which it should become scrollable.

- minWidth (string | number; required):
    `min-width` of the `Table` at which it should become scrollable.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- scrollAreaProps (dict; optional):
    Props passed down to `ScrollArea` component, not applicable with
    `type="native"`.

    `scrollAreaProps` is a dict with keys:

- tabIndex (number; optional):
    tab-index.

- type (a value equal to: 'native', 'scrollarea'; optional):
    Type of the scroll container, `native` to use native scrollbars,
    `scrollarea` to use `ScrollArea` component, `scrollarea` by
    default.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.