Table

Implemented Data

Server-driven table: sort, filter, select and paginate the full dataset.

Kumo reference: kumo-ui.com/components/table/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Basic

Recent messages
Subject	From	Date
wdj v0.1 released	Project team	5 seconds ago
New job offer	Example company	10 minutes ago
Daily email digest	Example company	1 hour ago

Show template

{% load wdj %}
<div class="w-160 max-w-full">
  {% include "wdj/components/table.html" with rows=audit_email_basic_rows columns=audit_email_columns caption="Recent messages" only %}
</div>

Sticky column

The actions column stays pinned to the right during horizontal scrolling. Its opaque background follows each row, with a gradient along the inner edge.

Messages with pinned actions
Subject	From	Date	Tags
wdj v0.1 released	Project team	5 seconds ago	—
New job offer	Example company	10 minutes ago	—
Daily email digest	Example company	1 hour ago	—
New comment	Rob Knecht	1 day ago	—
Out of office	Johnnie Lappen	3 days ago	—

Show template

{% load wdj %}
<div class="w-[450px] max-w-full">
  {% include "wdj/components/table.html" with rows=audit_email_rows columns=audit_email_sticky_columns caption="Messages with pinned actions" only %}
</div>

Sticky columns on both sides

Messages with pinned subject and actions
Subject	From	Date	Tags
wdj v0.1 released	Project team	5 seconds ago	—
New job offer	Example company	10 minutes ago	—
Daily email digest	Example company	1 hour ago	—
New comment	Rob Knecht	1 day ago	—
Out of office	Johnnie Lappen	3 days ago	—

Show template

{% load wdj %}
<div class="w-[450px] max-w-full">
  {% include "wdj/components/table.html" with rows=audit_email_rows columns=audit_email_both_sticky_columns caption="Messages with pinned subject and actions" only %}
</div>

Selection

Project	Status	Region	Requests
marketing-site	Active	us-east-1	1,204,388
docs	Active	eu-west-1	88,412
staging-api	Paused	us-east-1	12,004
legacy-app	Error	ap-southeast-1	340

Show template

{% load wdj %}
{% include "wdj/components/table.html" with rows=rows columns=columns selectable=True only %}

Empty

Project	Status	Region	Requests
No results Try adjusting your filters.

Project

Status

Region

Requests

No results

Try adjusting your filters.

Show template

{% load wdj %}
{% include "wdj/components/table.html" with columns=columns rows=empty_rows only %}

Sortable

Project	Status	Region	Requests
marketing-site	Active	us-east-1	1,204,388
docs	Active	eu-west-1	88,412
staging-api	Paused	us-east-1	12,004
legacy-app	Error	ap-southeast-1	340

Show template

{% load wdj %}
{% include "wdj/components/table.html" with rows=rows columns=columns base_url="/resources/" sort="name" only %}

Responsive

Scroll horizontally on small screens.
Project	Status	Region	Requests
marketing-site	Active	us-east-1	1,204,388
docs	Active	eu-west-1	88,412
staging-api	Paused	us-east-1	12,004
legacy-app	Error	ap-southeast-1	340

Show template

{% load wdj %}
{% include "wdj/components/table.html" with rows=rows columns=columns caption="Scroll horizontally on small screens." only %}

Loading

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/skeleton.html" with height="2rem" only %}
{% include "wdj/components/skeleton.html" with height="2rem" only %}
{% include "wdj/components/skeleton.html" with height="2rem" only %}
{% include "wdj/components/skeleton.html" with height="2rem" only %}
</div>

Live server table

Loading resource table…

Show template

{% load wdj %}
<div id="showcase-live-table" class="w-full" hx-get="/resources/table/" hx-trigger="load" hx-swap="innerHTML"><p class="text-base text-kumo-subtle">Loading resource table…</p></div>

Column alignment

Request counts aligned to the right
Project	Status	Region	Requests
marketing-site	Active	us-east-1	1,204,388
docs	Active	eu-west-1	88,412
staging-api	Paused	us-east-1	12,004
legacy-app	Error	ap-southeast-1	340

Show template

{% load wdj %}
{% include "wdj/components/table.html" with rows=rows columns=columns caption="Request counts aligned to the right" only %}

Compact header

Compact project table
Project	Status	Region	Requests
marketing-site	Active	us-east-1	1,204,388
docs	Active	eu-west-1	88,412
staging-api	Paused	us-east-1	12,004
legacy-app	Error	ap-southeast-1	340

Show template

{% load wdj %}
{% include "wdj/components/table.html" with columns=columns rows=rows compact_header=True caption="Compact project table" only %}

Fixed column widths

Fixed-width table
Project	Region	Requests
marketing-site	us-east-1	1,204,388
docs	eu-west-1	88,412
staging-api	us-east-1	12,004
legacy-app	ap-southeast-1	340

Show template

{% load wdj %}
{% include "wdj/components/table.html" with columns=audit_table_columns rows=rows fixed=True caption="Fixed-width table" only %}

Sticky first column

Sticky project column
Project	Region	Requests
marketing-site	us-east-1	1,204,388
docs	eu-west-1	88,412
staging-api	us-east-1	12,004
legacy-app	ap-southeast-1	340

Show template

{% load wdj %}
{% include "wdj/components/table.html" with columns=audit_table_columns rows=rows sticky_column=True caption="Sticky project column" only %}

Initially selected row

Selection state
	Project	Status	Region	Requests
	Selected project		eu-west	120
	Other project		us-east	80

Show template

{% load wdj %}
{% include "wdj/components/table.html" with columns=columns rows=audit_selected_rows selectable=True row_key="key" caption="Selection state" only %}

Compact and sticky

Compact sticky table
Subject	From	Date
wdj v0.1 released	Project team	5 seconds ago
New job offer	Example company	10 minutes ago
Daily email digest	Example company	1 hour ago
New comment	Rob Knecht	1 day ago
Out of office	Johnnie Lappen	3 days ago

Show template

{% load wdj %}
<div class="w-[450px] max-w-full">
  {% include "wdj/components/table.html" with columns=audit_email_columns rows=audit_email_rows sticky_column=True sticky_header=True compact_header=True caption="Compact sticky table" class="max-h-48" only %}
</div>

Resizable columns

Resize columns using the keyboard or pointer
Project	Region	Requests
Selected project	eu-west	120
Other project	us-east	80

Show template

{% load wdj %}
{% include "wdj/components/table.html" with columns=audit_table_columns rows=audit_selected_rows resizable=True fixed=True caption="Resize columns using the keyboard or pointer" only %}

API Reference

Prop	Type	Default	Description
columns	list[dict]	unset	Flow: list of {nodes: [...]}; Table: key/label/width/align/sortable/mono/nowrap/hidden_label, optional sticky='left' or 'right'.
rows	list[dict]	unset	Cell values are escaped scalars or dictionaries: text/badge/sub/href/mono, or actions plus an accessible label for the row menu.
row_key	string	key	Table row identity field, default key. Missing values use the row number; supply stable identifiers for application selection across sorting/pagination. Zero is retained.
selectable	bool	False	Selectable; pass the documented value shown in the examples.
caption	string	unset	Caption; pass the documented value shown in the examples.
sort	string	unset	Sort; pass the documented value shown in the examples.
dir	string	unset	Dir; pass the documented value shown in the examples.
sort_param	string	unset	Sort param; pass the documented value shown in the examples.
dir_param	string	unset	Dir param; pass the documented value shown in the examples.
base_url	string	unset	Base url; pass the documented value shown in the examples.
base_query	string	unset	Base query; pass the documented value shown in the examples.
hx_target	string	unset	Hx target; pass the documented value shown in the examples.
hx_swap	string	unset	Hx swap; pass the documented value shown in the examples.
fixed	bool	False	Fixed; pass the documented value shown in the examples.
sticky_column	bool	False	Legacy Table shortcut: pin the first column to the left. Prefer explicit column.sticky for left/right edges.
sticky_header	bool	False	Pin Table headers to the top of a constrained scroll container; pass a height class such as max-h-64.
compact_header	bool	False	Compact header; pass the documented value shown in the examples.
resizable	bool	False	Resizable; pass the documented value shown in the examples.
empty_title	string	unset	Empty title; pass the documented value shown in the examples.
empty_description	string	unset	Empty description; pass the documented value shown in the examples.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract