Javascript formatters

import polars as pl
import htmltools as html
from reactable.data import cars_93
from reactable import Reactable, reactable, embed_css
from reactable.models import Column, ColInfo, CellInfo, HeaderCellInfo, RowInfo, JS

embed_css()

data = cars_93[20:25, ["manufacturer", "model", "type", "price"]]

Cell

column = Column(
    cell=JS(
        """
    function(cellInfo, state) {
      // input:
      //  - cellInfo, an object containing cell info
      //  - state, an object containing the table state (optional)
      //
      // output:
      //  - content to render (e.g. an HTML string)
      return `<div><b>${cellInfo.value}</b></div>`
    }
  """
    ),
    html=True,  # to render as HTML
)

Reactable(data, columns={"manufacturer": column})

cellInfo properties

Headers

column = Column(
    header=JS(
        """
    function(column, state) {
      // input:
      //  - column, an object containing column properties
      //  - state, an object containing the table state (optional)
      //
      // output:
      //  - content to render (e.g. an HTML string)
      return `<div><em>${column.name}</em></div>`
    }
  """
    ),
    html=True,  # to render as HTML
)

Reactable(
    data,
    columns={"price": column},
)

column properties

Footers

column = Column(
    footer=JS(
        """
    function(column, state) {
      // input:
      //  - column, an object containing column properties
      //  - state, an object containing the table state (optional)
      //
      // output:
      //  - content to render (e.g. an HTML string)
      return `<div>Rows: ${state.sortedData.length}</div>`
    }
  """
    ),
    html=True,  # to render as HTML
)

Reactable(data, columns={"price": column})

column properties

Expandable row details

Reactable(
    data,
    details=JS(
        """
          function(rowInfo, state) {
            // input:
            //  - rowInfo, an object containing row info
            //  - state, an object containing the table state (optional)
            //
            // output:
            //  - content to render (e.g. an HTML string)
            return `<div>Details for row: ${rowInfo.index}</div>`
          }
        """
    ),
)

rowInfo properties

Aggregate cell calculation

Reactable(
    data,
    group_by="type",
    columns=[
        Column(id="price", aggregate="max"),
        Column(
            id="model",
            aggregate=JS(
                """
            function(values, rows) {
              // input:
              //  - values: an array of all values in the group
              //  - rows: an array of row data values for all rows in the group (optional)
              //
              // output:
              //  - an aggregated value, e.g. a comma-separated list
              return values.join(', ')
            }
          """
            ),
        ),
    ],
)

Aggregated cell

# Render aggregated value as a comma-separated list of unique values
agg_type = JS(
    """
    function(cellInfo) {
            const values = cellInfo.subRows.map(function(row) { return row['Type'] })
            const unique = values.reduce(function(obj, v) { obj[v] = true; return obj }, {})
            return Object.keys(unique).join(', ')
    }"""
)

# Render aggregated cell as currency
agg_price = JS(
    """
    function(cellInfo) {
            return cellInfo.value.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
    }"""
)

Reactable(
    data,
    group_by="manufacturer",
    columns={
        "model": Column(aggregate="unique"),
        "type": Column(aggregated=agg_type),
        "price": Column(aggregate="sum", aggregated=agg_price),
    },
)

Javascript state properties