Data

Data table

Table with filters, search, selection, column sorting and pagination. It generates fake customers: it's a demo.

data-u="datatable"Demo

Example

<article class="u-card u-wall" data-wall="table">
  <div data-u="datatable" data-u-props='{"pageSize": 5, "count": 48}'></div>
</article>

Data table ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses data table:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-table

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

They go in data-u-props, as JSON.

Prop	Type	Default	What it does
`pageSize`	number	5	Rows per page.
`count`	number	48	How many fake rows to generate.
`rows`	array	no default	Rows in the demo's internal format (id, name, c, product, region, status, del, date, price). For real data, build the `u-dt` markup by hand.

Where	Attribute	What it says
table	`role="table"`, `"row"`, `"columnheader"`, `"cell"`, `"rowgroup"`	Table structure in divs.
sorted column	`aria-sort`	ascending or descending.
pagination	`role="navigation"`, `aria-current="page"`	The current page is marked.
checkboxes and filters	`aria-label`	Each with its own name.

Key	Does
Tab	moves through filters, search, headers and pagination
Enter	sorts by the focused column
Spacing	checks the row

Event	detail	When
`u:change`	`{ value, label, index }`	Comes from the inner selects (filters and status) and bubbles up the page. Filter by target if you listen on document.

Every event bubbles up the page. Listen on the element itself: el.addEventListener("u:change", (e) => e.detail).