`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:

• event["target"] value for radio input and checkboxes is always 'on' reactpy#1188

[Archmonger]

Marking as unblocked, as this PR has proved that using the Django-Tables2 interface should be possible.