Code basics

This page covers the basics of making a simple reactable table:

Code 
from reactable import embed_css
from reactable.models import Reactable, ColGroup, Column, ColFormat, Theme, Language
from reactable.data import cars_93

embed_css()

cars = cars_93[:3, ["manufacturer", "model", "type", "price", "min_price", "max_price"]]

fmt = ColFormat(prefix="$", digits=2)

Reactable(
    cars,
    columns={
        "manufacturer": Column(name="Manufacturer"),
        "model": Column(name="Model"),
        "type": Column(name="Type"),
        "max_price": Column(name="Max", format=fmt),
        "min_price": Column(name="Min", format=fmt),
        "price": Column(name="Amount", format=fmt),
    },
    column_groups=[
        ColGroup(
            name="Price",
            columns=["price", "min_price", "max_price"],
        ),
    ],
    bordered=True,
    theme=Theme(
        cell_padding="8px 12px",
    ),
    language=Language(
        page_next="SLAM THE NEXT PAGE",
        page_previous="GO BACK",
    ),
    filterable=True,
    default_page_size=2,
)

Setup and data

In order to create the table, we’ll import classes from reactable, along with an example dataset.

from reactable import embed_css
from reactable.models import Reactable, ColGroup, Column, ColFormat, Theme, Language
from reactable.data import cars_93

# embed_css()

cars = cars_93[:3, ["manufacturer", "model", "type", "price", "min_price", "max_price"]]

Note two important pieces:

  • embed_css() is currently required once, in order to add the necessary CSS.
  • cars_93 is a tiny built-in DataFrame implementation called SimpleFrame.

In this walkthrough, we’ll turn the cars data directly into a reactable table. If you want to explore the data, use methods like .to_polars() or .to_pandas() to convert it to a Polars or Pandas DataFrame, respectively.

cars.to_polars()
shape: (3, 6)
manufacturer model type price min_price max_price
str str str f64 f64 f64
"Acura" "Integra" "Small" 15.9 12.9 18.8
"Acura" "Legend" "Midsize" 33.9 29.2 38.7
"Audi" "90" "Compact" 29.1 25.9 32.3

Reactable

The Reactable() class is responsible for building the table:

Reactable(
    cars,
    filterable=True,
    default_page_size=2,
)

The code above used filterable=True argument added filters to the top of each column, and default_page_size=2 to limit each page to 2 rows. Reactable() has many optional parameters, designed for quick customization of pieces like sorting, filtering, searching, and pagination.

It also has four parameters which combine with other classes for configuration:

name description
columns= use Column() to customize column names, format, and more.
column_groups= use ColGroup() to group columns together, with a label.
theme= use Theme() to customize table styling.
language= use Language() to customize prompts like “Next page”.

The following sections walk through these four parameters in depth.

Column definitions

The columns= argument uses the Column() class to customize pieces like column name and value formatting (e.g. as a date or currency).

Below, we configure the name and format of the "max_price" column:

Reactable(
    cars,
    columns={
        "max_price": Column(
            name="Max Price",
            format=ColFormat(prefix="$", digits=2),
        ),
    },
)

Notice these three pieces above:

  • columns= maps columns of data to Column() configurations.
  • Column(name=...) cleans up the name displayed to “Max Price”
  • Column(format=...) uses ColFormat() to specify how to format column values.

The code above handled a single price column, but there are three related to price that need formatting. To avoid too much duplication, we can assign ColFormat() to a variable, and re-use that for each column definition.

fmt = ColFormat(prefix="$", digits=2)

Reactable(
    cars,
    columns={
        "max_price": Column(name="Max Price", format=fmt),
        "min_price": Column(name="Min Price", format=fmt),
        "price": Column(name="Price", format=fmt),
    },
)
Column arguments take priority

Note that Reactable and Column share some arguments, like filterable=. When both specify one of these arguments, Column() takes priority:

Reactable(
    cars,
    filterable=True,
    columns={
        "max_price": Column(filterable=False),
    },
)

Notice that the "max_price" column is not filterable.

Column groups (ColGroup)

The column_groups= argument uses the ColGroup() class to create groupings of columns. This allows you to put a custom label over related columns.

Reactable(
    cars,
    column_groups=[
        ColGroup(
            name="Price",
            columns=["price", "min_price", "max_price"],
        ),
    ],
)

Theme

The theme= argument uses the Theme() class to customize the overall style of the table.

Reactable(
    cars,
    bordered=True,
    theme=Theme(
        cell_padding="8px 12px",
    ),
)

Language

The language= argument uses the Language() class to customize text prompts on the table like “Next Page”.

Reactable(
    cars,
    language=Language(
        page_next="TAKE ME TO THE NEXT PAGE",
        page_previous="GO BACK",
    ),
    default_page_size=2,
)

Putting it all together

In the sections above, we customized the columns, column groupings, theme, and language individually. Now we’ll put it all together to make the complete table.

fmt = ColFormat(prefix="$", digits=2)

Reactable(
    cars,
    columns={
        "manufacturer": Column(name="Manufacturer"),
        "model": Column(name="Model"),
        "type": Column(name="Type"),
        "max_price": Column(name="Max", format=fmt),
        "min_price": Column(name="Min", format=fmt),
        "price": Column(name="Amount", format=fmt),
    },
    column_groups=[
        ColGroup(
            name="Price",
            columns=["price", "min_price", "max_price"],
        ),
    ],
    bordered=True,
    theme=Theme(
        cell_padding="8px 12px",
    ),
    language=Language(
        page_next="SLAM THE NEXT PAGE",
        page_previous="GO BACK",
    ),
    filterable=True,
    default_page_size=2,
)