Table styling

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


embed_css()

starwars_small = starwars[:5, :10]

Highlight rows on hover

Reactable(
    starwars_small,
    highlight=True,
)

Bordered

Reactable(
    starwars_small,
    bordered=True,
)

Borderless

Reactable(
    starwars_small,
    borderless=True,
)

Outlined

Reactable(
    starwars_small,
    outlined=True,
)

Striped

Reactable(
    starwars_small,
    striped=True,
)

Bordered + striped + highlighting

Reactable(
    starwars_small,
    bordered=True,
    striped=True,
    highlight=True,
)

Outlined + borderless

Reactable(
    starwars_small,
    outlined=True,
    borderless=True,
)

Compact

Reactable(
    starwars_small,
    compact=True,
)

No text wrapping

import polars as pl
import polars.selectors as cs

Reactable(
    starwars[["name", "species", "films"]],
    wrap=False,
    resizable=True,
    bordered=True,
    default_page_size=5,
)

Fixed height + sticky header/footer

import htmltools

Reactable(
    starwars_small,
    height=270,
    striped=True,
    default_col_def=Column(
        footer=lambda col_info: htmltools.div(col_info.name, style="font-weight: bold")
    ),
)

Column widths

Reactable(
    cars_93[:6, ["make", "type", "weight"]],
    columns=[
        Column(id="make", min_width=200),
        Column(id="type", min_width=100),
        Column(id="weight", min_width=100),
    ],
    bordered=True,
)

No full width

Reactable(
    cars_93[:6, :5],
    full_width=False,
    bordered=True,
    default_col_def=Column(min_width=120),
)

You can also set a maximum or fixed width on the table:

Reactable(
    cars_93[:6, :5],
    full_width=False,
    bordered=True,
    default_col_def=Column(min_width=120),
    # Set a maximum width on the table
    style={"max-width": 650},
    # or a fixed width:
    width=650,
)

Vertical alignment

from htmltools import div
from reactable.models import CellInfo

data = starwars[:6, ["name", "height", "mass", "gender", "homeworld", "species"]]


def render_species(ci: CellInfo):
    species = data[ci.row_index, "species"]
    species_name = species if species else "Unknown"
    return div(
        div(ci.value, style="font-weight: 600"),
        div(species_name, style="font-size: 0.75rem"),
    )


Reactable(
    data,
    columns=[
        Column(
            id="name",
            name="Character / Species",
            cell=render_species,
        ),
        Column(id="species", show=False),
    ],
    default_col_def=Column(v_align="center", header_v_align="bottom"),
    bordered=True,
)

Custom CSS

from IPython.display import display, HTML

display(
    HTML(
        """
<style>
.my-tbl {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.my-header {
  border-width: 1px;
}

.my-col {
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.my-row:hover {
  background-color: #f5f8ff;
}
</style>
"""
    )
)

Reactable(
    starwars_small,
    default_page_size=6,
    borderless=True,
    class_="my-tbl",
    default_col_def=Column(header_class="my-header"),
    columns=[
        Column(id="name", class_="my-col"),
    ],
    row_class="my-row",
)