Skip to content

Table[source]

A component for displaying a table with various features such as filtering, highlighting rows, and handling cell changes.

Examples

from pret import component, create_store, use_store_snapshot, use_event_callback
from metanno import Table

table_state = create_store([
    {"id": "1", "date": "2023-01-01", "text": "Sample text 1", "type": "ENT", "labels": ["ready"]},
    {"id": "2", "date": "2023-01-03", "text": "Sample text 2", "type": "OTHER", "labels": ["ready", "danger"]},
    {"id": "3", "date": "2023-01-05", "text": "Sample text 3", "type": "ENT", "labels": ["blue"]},
    {"id": "4", "date": "2023-01-07", "text": "Sample text 4", "type": "OTHER", "labels": ["bad"]},
    {"id": "5", "date": "2023-01-09", "text": "Sample text 5", "type": "ENT", "labels": []},
    {"id": "6", "date": "2023-01-11", "text": "Sample text 6", "type": "OTHER", "labels": ["custom"]},
    {"id": "7", "date": "2023-01-13", "text": "Sample text 7", "type": "FOO", "labels": ["ready"]},
    {"id": "8", "date": "2023-01-15", "text": "Sample text 8", "type": "FOO2", "labels": ["danger"]},
    {"id": "9", "date": "2023-01-17", "text": "Sample text 9", "type": "FOO3", "labels": ["blue"]},
    {"id": "10", "date": "2023-01-19", "text": "Sample text 10", "type": "ENT", "labels": ["bad"]},
    {"id": "11", "date": "2023-01-21", "text": "Sample text 11", "type": "OTHER", "labels": ["custom"]},
    {"id": "12", "date": "2023-01-23", "text": "Sample text 12", "type": "ENT", "labels": ["ready"]},
    {"id": "13", "date": "2023-01-25", "text": "Sample text 13", "type": "OTHER", "labels": ["danger"]},
    {"id": "14", "date": "2023-01-27", "text": "Sample text 14", "type": "FOO2", "labels": ["blue"]},
    {"id": "15", "date": "2023-01-29", "text": "Sample text 15", "type": "FOO3", "labels": ["bad"]},
])

columns = [
    {"key": "id", "kind": "text", "name": "id", "filterable": True},
    {"key": "date", "kind": "text", "name": "end", "filterable": True},
    {"key": "text", "kind": "text", "name": "text", "filterable": True, "editable": True},
    {"key": "type", "kind": "text", "name": "label", "filterable": True, "editable": True, "choices": ["ENT", "OTHER", "STUFF", "FOO", "FOO2", "FOO3"]},
    {"key": "labels", "kind": "multi-text", "name": "labels", "filterable": True, "editable": True, "choices": ["ready", "danger", "blue", "bad", "custom"]},
]

@component
def MyTable():
    @use_event_callback
    def on_cell_change(row_id, row_idx, col, new_value):
        table_state[row_idx][col] = new_value

    view_state = use_store_snapshot(table_state)
    return Table(
        primary_key="id",
        rows=view_state,
        columns=columns,
        auto_filter=True,
        on_cell_change=on_cell_change,
    )

MyTable()

Parameters

PARAMETER DESCRIPTION
rows

The data for each row in the table, where each row is a dictionary mapping column keys to their values.

TYPE: List[Dict[str, Any]]

columns

The columns to display in the table:

  • key: Unique identifier for the column.
  • name: Display name of the column.
  • kind: Type of data in the column (e.g., "text", "hyperlink", "multi-text", "boolean", ...).
  • editable: Whether the column is editable.
  • filterable: Whether the column can be filtered.
  • choices: Optional list of choices for the column (if applicable).

TYPE: ColumnData

primary_key

The key used to uniquely identify each row in the table.

TYPE: str

filters

The current filters applied to the table, mapping column keys to filter values.

TYPE: Dict[str, str]

highlighted_rows

List of row indices that should be highlighted.

TYPE: List[int]

handle

Imperative handle for actions that can be performed on the table, such as scrolling:

  • scroll_to_row_idx(row_idx: int): Scrolls the table to the specified row index.
  • scroll_to_row_id(row_id: str): Scrolls the table to the specified row ID.
  • focus(): Sets focus on the currently open cell or full table if no cell is open.

TYPE: Dict[str, Any]

auto_filter

Whether to automatically apply filters as the user types.

TYPE: bool

input_value

The current input value to show in the input field when the user is editing a cell. If undefined, this is automatically handled by the component.

TYPE: Union[str, Hyperlink]

suggestions

List of suggestions to show when the user is typing in the input field.

TYPE: List[Any]

position

The current position of the cursor in the table, including:

  • row_id: Key of the row where the cursor is located.
  • row_idx: Index of the row where the cursor is located.
  • col: Key of the column where the cursor is located.
  • mode: Mode of interaction, either "EDIT" or "SELECT".

TYPE: Position

style

Custom styles for the table component.

TYPE: Dict[str, Any]

key

A unique key for the component instance, used for React's reconciliation.

TYPE: Union[str, int]

on_input_change

Callback triggered when the input value changes in a cell:

  • row_id: Key of the row being edited.
  • row_idx: Index of the row being edited.
  • name: Key of the column being edited.
  • value: New value entered by the user.
  • cause: Reason for the change (e.g., "blur", "enter").

TYPE: Callable

on_scroll_bottom

Callback triggered when the user scrolls to the bottom of the table:

  • event: Scroll event or a dictionary indicating if the user is at the bottom.

TYPE: Callable

on_cell_change

Callback triggered when a cell's value changes:

  • row_id: Key of the row being edited.
  • row_idx: Index of the row being edited.
  • name: Key of the column being edited.
  • value: New value of the cell.

TYPE: Callable

on_click_cell_content

Callback triggered when the content of a cell is clicked (like a hyperlink):

  • row_id: Key of the row containing the clicked cell.
  • row_idx: Index of the row containing the clicked cell.
  • name: Key of the column containing the clicked cell.
  • value: Optional value of the clicked cell.

TYPE: Callable

on_filters_change

Callback triggered when filters are updated:

  • values: Dictionary mapping column keys to filter values.
  • column: Key of the column being filtered.

TYPE: Callable

on_mouse_enter_row

Callback triggered when the mouse enters a row:

  • row_id: Key of the row being hovered.
  • row_idx: Index of the row being hovered.
  • mod_keys: List of modifier keys pressed during the event.

TYPE: Callable

on_mouse_leave_row

Callback triggered when the mouse leaves a row:

  • row_id: Key of the row being hovered.
  • row_idx: Index of the row being hovered.
  • mod_keys: List of modifier keys pressed during the event.

TYPE: Callable

on_mouse_hover_row

Callback triggered when the mouse hovers over a row:

  • row_id: Key of the row being hovered, or None if not applicable.
  • row_idx: Index of the row being hovered, or None if not applicable.
  • mod_keys: List of modifier keys pressed during the event.

TYPE: Callable

on_position_change

Callback triggered when the cursor position changes:

  • row_id: Key of the row where the cursor is located, or None if not applicable.
  • row_idx: Index of the row where the cursor is located, or None if not applicable.
  • name: Key of the column where the cursor is located, or None if not applicable.
  • mode: Interaction mode, either "EDIT" or "SELECT".
  • cause: Reason for the position change (e.g., "key", "blur").

TYPE: Callable

on_subset_change

Callback triggered when the subset of visible rows changes:

  • subset: List of indices representing the new subset of rows.

TYPE: Callable