Tables

The Table component in MUI is used to create responsive, interactive tables. Below are examples using mock data.

Marketplace GOV (USD)
	Months		MTD	Quarters		QTD	VA Cons.
	Aug-22	Sep-22	10/18	2Q22	3Q22	10/18	3Q22	4Q22
Nominal	$6,816	$6,512	$4,026	$19,974	$19,974	$4,026	$20,893	$20,893
Y/Y	-6.5%	-6.5%	-14.0%	9.0%	9.0%	-4.4%	8.1%	8.1%
2Y CAGR	-2.7%	-2.7%	-12.5%	18.3%	18.3%	-1.0%	11.9%	11.9%
3Y CAGR	-2.7%	-2.7%	-12.5%	18.3%	18.3%	-1.0%	11.9%	11.9%
4Y CAGR	-2.7%	-2.7%	-12.5%	18.3%	18.3%	-1.0%	11.9%	11.9%

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')


table_rows = [
    ["Nominal", "$6,816", "$6,512", "$4,026", "$19,974", "$19,974", "$4,026", "$20,893", "$20,893"],
    ["Y/Y", "-6.5%", "-6.5%", "-14.0%", "9.0%", "9.0%", "-4.4%", "8.1%", "8.1%"],
    ["2Y CAGR", "-2.7%", "-2.7%", "-12.5%", "18.3%", "18.3%", "-1.0%", "11.9%", "11.9%"],
    ["3Y CAGR", "-2.7%", "-2.7%", "-12.5%", "18.3%", "18.3%", "-1.0%", "11.9%", "11.9%"],
    ["4Y CAGR", "-2.7%", "-2.7%", "-12.5%", "18.3%", "18.3%", "-1.0%", "11.9%", "11.9%"],
]

table_style = {"borderCollapse": "collapse", "width": "100%"}
header_style = {"backgroundColor": "#666", "color": "#fff", "padding": "10px", "textAlign": "center", "border": "0"}
group_style = {"backgroundColor": "#bbb", "color": "#fff", "padding": "8px", "textAlign": "center", "borderBottom": "3px solid #fff"}
cell_style = {"padding": "6px", "textAlign": "center", "border": "0"}

# App Dash
app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.TableContainer(
            dmc.Paper(
                dmc.Table(
                    [
                        dmc.TableHead(
                            [
                                dmc.TableRow(
                                    dmc.TableCell(
                                        "Marketplace GOV (USD)",
                                        colSpan=9,
                                        sx=header_style,
                                    )
                                ),
                            ]
                        ),
                        dmc.TableHead(
                            [
                                dmc.TableRow(
                                    [
                                        dmc.TableCell("", sx={**group_style, "border": "0"}),
                                        dmc.TableCell("Months", colSpan=2, sx=group_style),
                                        dmc.TableCell("MTD", colSpan=1, sx=group_style),
                                        dmc.TableCell("Quarters", colSpan=2, sx={**group_style, "borderLeft": "10px solid #bbb"}),
                                        dmc.TableCell("QTD", colSpan=1, sx=group_style),
                                        dmc.TableCell("VA Cons.", colSpan=2, sx={**group_style, "borderLeft": "10px solid #bbb"}),
                                    ]
                                )
                            ]
                        ),
                        dmc.TableHead(
                            [
                                dmc.TableRow(
                                    [
                                        dmc.TableCell("", sx=group_style),
                                        dmc.TableCell("Aug-22", sx=group_style),
                                        dmc.TableCell("Sep-22", sx=group_style),
                                        dmc.TableCell("10/18", sx=group_style),
                                        dmc.TableCell("2Q22", sx=group_style),
                                        dmc.TableCell("3Q22", sx=group_style),
                                        dmc.TableCell("10/18", sx=group_style),
                                        dmc.TableCell("3Q22", sx=group_style),
                                        dmc.TableCell("4Q22", sx=group_style),
                                    ]
                                )
                            ]
                        ),
                        dmc.TableBody(
                            [
                                dmc.TableRow(
                                    [dmc.TableCell(cell, sx=cell_style) for cell in row]
                                )
                                for row in table_rows
                            ]
                        ),
                    ],
                    sx=table_style,
                ),
                elevation=2,
                sx={"padding": "10px"},
            )
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the Table component.

Prop	Type	Default	Description
columns	Array	[]	Configuration for the table's columns.
data	Array	[]	The data displayed in the table.
onRowClick	function	null	Callback triggered when a row is clicked.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Table Documentation

Props Table​

Props Table