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

Javascript state properties