Footers

from reactable import Reactable, Column, JS, embed_css
from reactable.data import cars_93

embed_css()

You can add column footers using the footer argument in Column().

footer can either be custom content to render (e.g., a character string or HTML tag), or a custom render function. See Custom rendering to learn more about using custom render functions.

Render function in Python

data = cars_93[17:47, ["manufacturer", "model", "type", "price"]]

Reactable(
    data,
    default_page_size=5,
    columns=[
        Column(id="manufacturer", footer="Total"),
        Column(id="price", footer=lambda col_info: f"{sum(col_info.values):.2f}"),
    ],
    default_col_def=Column(footer_style={"font-weight": "bold"}),
)

Render function in JS

js_sum_column = JS(
    """function(column, state) {
   let total = 0
   state.sortedData.forEach(function(row) {
       total += row[column.id]
   })
   return total.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
} """
)

Reactable(
    data,
    default_page_size=5,
    columns=[
        Column(id="manufacturer", footer="Total"),
        Column(id="price", footer=js_sum_column),
    ],
    default_col_def=Column(footer_style={"font-weight": "bold"}),
)

Embedding widgets

import polars as pl
import plotly.express as px
import htmltools as h

cars = cars_93[["manufacturer", "type", "price"]]
p = px.box(cars.to_pandas(), x="price")

import plotly.graph_objects as go

data = pl.DataFrame({"x": [1]})

Reactable(
    cars,
    columns={"price": Column(footer=go.FigureWidget(p))},
    # details=lambda indx: go.FigureWidget(p),
)