Filtering

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

import polars as pl

embed_css()

pl_penguins = penguins.to_polars()

cars = cars_93[:20, ["manufacturer", "model", "type", "air_bags", "price"]]

You can make columns filterable by setting filterable=True:

Reactable(
    cars,
    filterable=True,
    min_rows=10,
)

To make specific columns filterable (or not), set filterable in Column():

Reactable(
    cars,
    filterable=True,
    columns=[Column(id="price", filterable=False)],
    default_page_size=5,
)

Custom filtering

Column filtering can be customized using the filter_method and filter_input arguments in Column(). See the Custom Filtering guide for more details and examples. (TODO)

This example shows basic usage of a custom filter method, changing filtering on the "manufacturer" column to be case-sensitive rather than case-insensitive. (Try filtering for “bmw” and then “BMW”).

titled = pl_penguins.with_columns(pl.col("species").str.to_titlecase())

js_filter = JS(
    """
function(rows, columnId, filterValue) {
  return rows.filter(function(row) {
    return row.values[columnId].indexOf(filterValue) !== -1
  })
}"""
)

Reactable(
    data=titled.head(2),
    filterable=True,
    columns={
        "manufacturer": Column(filter_method=js_filter),
    },
    default_page_size=5,
)