`django_table` component

[Archmonger]

Current Situation

There is currently has no support for conveniently rendering tables from Django querysets.

Proposed Actions

Create a table rendering component. The interface can be developed a few ways:

1. Inspired by Material UI Table
2. Inspired by Data Grid
3. Inspired by TanStack Table
4. Inspired by some other ReactJS table library
5. Compatible with Django-Tables2 interface.
   • This option is iffy, since it would be difficult to attach ReactPy event handlers to things.

Draft Interface

# https://mui.com/x/api/data-grid/data-grid-pro/
django_table(
    {"example-prop-value": 123},
    query_set=ExampleQuerySet(),
    columns=[
        {
            "name": "ID",
            "header": "ID",
            "cell": lambda x: None,
        },
        {
            "name": "Name",
            "header": "Name",
            "cell": lambda x: None,
        },
        {
            "name": "Age",
            "header": "Age",
            "cell": lambda x: None,
        },
    ],
    checkbox_selection=True,
    checkbox_selection_visible_only=False,
    classes="example",
    edit_mode="cell" or "row",
    filter_debounce_ms=150,
    # get_cell_class_name=lambda x: None,
    # get_detail_panel_content=lambda x: None,
    # get_row_class_name=lambda x: None,
    # get_row_id=lambda x: None,
    hide_footer=True,
    initial_state=None,
    # is_cell_editable=lambda x: None,
    # is_group_expanded_by_default=lambda x: None,
    # is_row_selectable=lambda x: None,
    loading=True,
    page_size_options=[10, 25, 50, 100],
    row_selection=True,
    slots_props={},
    slots={},
    sorting_order="asc" or "desc",
    # pinned_rows={"left": [], "right": []},
    # pinned_columns={"top": [], "bottom": []},
    # row_reordering=False,
    on_cell_click=lambda x: None,
    on_cell_double_click=lambda x: None,
    on_cell_edit_start=lambda x: None,
    on_cell_edit_stop=lambda x: None,
    on_cell_key_down=lambda x: None,
    on_column_header_click=lambda x: None,
    on_column_header_double_click=lambda x: None,
    on_column_header_enter=lambda x: None,
    on_column_header_leave=lambda x: None,
    on_column_header_out=lambda x: None,
    on_column_header_over=lambda x: None,
    on_column_order_change=lambda x: None,
    on_filter_model_change=lambda x: None,
    on_menu_close=lambda x: None,
    on_menu_open=lambda x: None,
    on_preference_panel_close=lambda x: None,
    on_preference_panel_open=lambda x: None,
    on_process_row_update_error=lambda x: None,
    on_row_click=lambda x: None,
    on_row_double_click=lambda x: None,
    on_row_edit_commit=lambda x: None,
    on_row_edit_start=lambda x: None,
    on_row_edit_stop=lambda x: None,
    on_cell_modes_model_change=lambda x: None,
    on_pagination_model_change=lambda x: None,
    on_row_modes_model_change=lambda x: None,
    on_row_selection_model_change=lambda x: None,
    on_sort_model_change=lambda x: None,
    pagination_model=None,
    row_modes_model=None,
    row_selection_model=None,
    sort_model=None,
    # disable_children_filter=False,
    # disable_children_sorting=False,
    # disable_column_filter=False,
    # disable_column_menu=False,
    # disable_column_pinning=False,
    # disable_column_reorder=False,
    # disable_column_resize=False,
    # disable_column_selector=False,
    # disable_density_selector=False,
    # disable_multiple_columns_filtering=False,
    # disable_multiple_columns_sorting=False,
    # disable_multiple_row_selection=False,
    # disable_row_selection_on_click=False,
)

[Archmonger]

Blocked on:

• https://github.com/reactive-python/reactpy/issues/1188