Custom sort indicators

Code

import htmltools
from reactable import options, Reactable, embed_css
from reactable.models import (
    Column,
    ColFormat,
    ColGroup,
)
from reactable.data import cars_93

embed_css()

Sometimes, table state is available in ways that allow for easy styling. For example, sorting uses an aria-sort proprety, that can be targeted with CSS rules.

This page illustrates how to add custom sort indicators by two steps:

hiding sort icons.
targetting headers with the area-sort property.

Hiding sort icon

To hide the default sort indicator, you can hide the default sort icon using reactable(show_sort_icon=False).

This also hides the sort icon when a header is focused, so it needs some visual focus indicator to ensure your table is accessible to keyboard users (to test this, click the first table header then press the Tab key to navigate to other headers).

Example

Here’s an example that changes the sort indicator to a bar on the top or bottom of the header (indicating an ascending or descending sort), and adds a light background to headers when hovered or focused.

This example adds sort indicators using only CSS, and takes advantage of the aria-sort attribute on table headers to style based on whether the column is sorted in ascending or descending order.

Reactable(
    cars_93[:5, ["manufacturer", "model", "type", "min_price", "price"]],
    show_sort_icon=False,
    bordered=True,
    default_sorted=["type"],
    default_col_def=Column(header_class="bar-sort-header"),
)

<style>
.bar-sort-header:hover,
.bar-sort-header:focus {
  background: rgba(0, 0, 0, 0.03);
}

/* Add a top bar on ascending sort */
.bar-sort-header[aria-sort="ascending"] {
  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.6);
}

/* Add a bottom bar on descending sort */
.bar-sort-header[aria-sort="descending"] {
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.6);
}

/* Add an animation when toggling between ascending and descending sort */
.bar-sort-header {
  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
</style>