Skip to content
Aback UI

Block · Data Display

Users table

A searchable member directory with role filters, sorting, row actions, empty state, and pagination.

Beta8 componentsRegistry JSON (opens in a new tab)
the Users table preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add users-table

The block lands at components/blocks/users-table.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Pass real members from a server component. The built-in list is clearly example data and should be replaced, not fetched by the block.
  • onInvite and onManage are optional by design. When provided, the toolbar and row menu call your dialogs or routes; when absent, no dead actions are rendered.
  • Filtering, sorting, and paging run locally over the provided array. For a large directory, move the query to the server and keep the same table, empty-state, and pagination contract.
  • Copy email writes to the clipboard and announces the result in a visually hidden status region. Replace it if your workspace does not expose member emails.

Accessibility

  • The table has a caption, column headers with scope=col, and a labelled scroll container, so it is navigable as a table rather than a wall of cells.
  • The search field has an accessible name, and every row action names its row (Actions for Aditi Rao) instead of opening an unlabelled icon button.
  • Status is conveyed by the badge text as well as its colour. Sorting is a real button with an explicit ascending/descending label.
  • Filtering to zero rows replaces the table with an empty state that offers a recovery action, instead of leaving an unexplained blank region.