SummaryTable

The SummaryTable component is a highly customizable table component designed for displaying summary data with support for grouped headers, custom styling, and tooltips.

React Example

Below is an example of how to use the SummaryTable component in a React application:

---

---

Python Dash Example

Below is an example of how to use the SummaryTable component in a Python Dash application.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      html.H2("Playground Table"),
      dmc.SummaryTable(
        id="playground-table",
        columns=[
          {"name": "", "parent_name": "Key Metric"},
          {"name": "Oct-24", "parent_name": "Months", "description": "October 2024"},
          {"name": "Nov-24", "parent_name": "Months"},
          {"name": "MTD 12/8", "parent_name": "Months", "highlightRows": True},
          {"name": "3Q24", "parent_name": "Quarters", "highlightHeaders": True},
          {"name": "QTD 12/8", "parent_name": "Quarters", "highlightRows": True},
          {"name": "VA Cons. 4Q24", "parent_name": "VA Cons."},
        ],
        rows=[
          ["Nominal", 82.64, 84.61, 83.42, 88.9, 83.59, 88.38],
          ["Y/Y Growth", "20.6%", "21.1%", "15.7%", "26.6%", "20.2%", "23.6%"],
          ["2Y CAGR", "19.2%", "22.2%", "20.9%", "23%", "20.7%", None],
        ],
        nullValuePlaceholder="N/A",
      ),
      html.H2("Week Ending Table"),
      dmc.SummaryTable(
        id="week-ending-table",
        columns=[
          {"name": "", "parent_name": "Week Ending", "cellBackgroundColor": "background.primary"},
          {"name": "11/10", "cellBackgroundColor": "background.primary"},
          {"name": "11/17", "cellBackgroundColor": "background.primary"},
          {"name": "11/24", "cellBackgroundColor": "background.primary"},
          {"name": "12/01", "cellBackgroundColor": "background.primary"},
          {"name": "12/08", "cellBackgroundColor": "background.primary"},
        ],
        rows=[
          ["Nominal", 80.31, 84.01, 82.59, 89.78, 82.09],
          ["Y/Y Growth", "17.7%", "20.9%", "13.6%", "29.0%", "13.6%"],
          ["2Y CAGR", "19.5%", "21.9%", "19.7%", "25.1%", "19.1%"],
        ],
        nullValuePlaceholder="N/A",
      )
    ])
  ]
)

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

---

Props Table

Below are the main props available for the SummaryTable component:

Prop	Type	Default	Description
id	string	None	Unique identifier for the table.
columns	array	[]	Array of column definitions, including group headers.
rows	array	[]	Array of data rows to be displayed.
nullValuePlaceholder	string	'N/A'	Placeholder text for null values.

---

For more advanced features, refer to the documentation of the underlying library or component.