Sorting

from reactable import Reactable, Column, embed_css
from reactable.data import penguins

import polars as pl


embed_css()

pl_penguins = penguins.to_polars()

Tables are sortable by default. You can sort a column by clicking on its header, or sort multiple columns by holding the shift key while sorting.

Sorting toggles between ascending and descending order by default. To clear the sort, hold the shift key while sorting, and the sorting will additionally toggle between ascending, descending, and unsorted order.

Note

Ascending order means the lowest, first, or earliest values will appear first. Descending order means the largest, last, or latest values will appear first.

Default sorted columns

Use the defaultSorted= argument to sort columns by default:

Reactable(
    pl_penguins,
    default_sorted=["species", "island"],
)

Notice that above column names are passed as a list. You can specify the order to sort, by passing a dictionary mapping column names to sort order (either “asc” for ascending, or “desc” for descending):

Reactable(
    pl_penguins,
    columns=[Column(id="species", default_sort_order="desc")],
    default_sorted=["species", "island"],
)

Default sort order

Columns are sorted in ascending order first by default. To change the default sort order for all columns in the table, set default_sort_order= to “asc” for ascending order, or “desc” for descending order.

To change the sort order of an individual column, set default_sort_order= in its Column() to “asc” or “desc”. The default sort order of the column takes precedence over the table.

Reactable(
    pl_penguins,
    default_sort_order="desc",
    columns=[Column(id="species", default_sort_order="asc")],
    default_sorted=["species", "island"],
)

Sort missing values last

You can ignore missing values when sorting by setting sort_na_last= on a column:

import math

df = pl.DataFrame(
    {
        "n": [1.0, 2.0, 3.0, -math.inf, math.inf],
        "x": [2.0, 3.0, 1.0, None, math.nan],
        "y": ["aa", "cc", "bb", None, None],
    },
    strict=False,
)

Reactable(
    df,
    default_col_def=Column(sort_na_last=True),
    default_sorted=["x"],
)

/opt/hostedtoolcache/Python/3.10.15/x64/lib/python3.10/site-packages/jupyter_client/session.py:721: UserWarning:

Message serialization failed with:
Out of range float values are not JSON compliant
Supporting this message is deprecated in jupyter-client 7, please make sure your message is JSON-compliant

No sorting

You can disable sorting by setting sortable to False on the table or column. When only some columns are sortable, it can help to indicate sortable columns using show_sortable:

Reactable(
    pl_penguins.head(),
    sortable=False,
    show_sortable=True,
    columns=[
        Column(id="bill_length_mm", sortable=True),
        Column(id="bill_depth_mm", sortable=True),
    ],
)

Hide sort icons

You can hide sort icons by setting show_sort_icon to False. This is only recommended when you want to use a custom sort indicator.

Reactable(
    pl_penguins.head(),
    show_sort_icon=False,
)