Data display

DataTable

A small, composable data view built on the semantic Table primitives. Search, sort and paginate the records already loaded by your page.

See Table primitives

Available in Axonyx UI 0.0.87. Compose native Table primitives with optional search, sorting and pagination.

Five sample posts. Search covers these loaded records only.
Title	Status
Alpha	Published
Echo	Draft
Bravo	Published
Delta	Draft
Charlie	Published

View code

import { DataTable } from "@axonyx/ui/foundry/DataTable"
import { Table } from "@axonyx/ui/foundry/Table"
import { TableHead } from "@axonyx/ui/foundry/TableHead"
import { TableBody } from "@axonyx/ui/foundry/TableBody"
import { TableRow } from "@axonyx/ui/foundry/TableRow"
import { TableHeaderCell } from "@axonyx/ui/foundry/TableHeaderCell"
import { TableCell } from "@axonyx/ui/foundry/TableCell"

component ContentInventory() {
  return ASX {
    <DataTable
      label="Content inventory"
      pageSize="2"
      searchLabel="Search posts"
    >
      <Table>
        <caption class="ax-table__caption">
          Five sample posts. Search covers these loaded records only.
        </caption>
        <TableHead>
          <TableRow>
            <TableHeaderCell sort="text">Title</TableHeaderCell>
            <TableHeaderCell sort="text">Status</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>
              <a href="#alpha">Alpha</a>
            </TableCell>
            <TableCell>Published</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Echo</TableCell>
            <TableCell>Draft</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Bravo</TableCell>
            <TableCell>Published</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Delta</TableCell>
            <TableCell>Draft</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Charlie</TableCell>
            <TableCell>Published</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </DataTable>
  }
}

One semantic table, optional behavior

Compose one Table with one header row and one body. Keep captions, links, badges and row actions in normal table cells. Existing row elements are preserved when sorting.

Use sort="text" on a plain-text TableHeaderCell to enable natural-text sorting. The sort controls work with Enter and Space, expose aria-sort and reset pagination to the first page.

Props

label: accessible table-region name; defaults to Records.
pageSize: positive integer; defaults to 10, including invalid values.
searchLabel: visible input label; defaults to Search records.
emptyLabel: no-match message; defaults to No matching records.

Without JavaScript

Every server-rendered record remains visible. Search and pagination controls are hidden rather than pretending to work. Table overflow stays inside its scrollable wrapper on mobile.

Large datasets belong on the server

This preview is not a remote database search engine. Pass the complete bounded dataset; do not pass one server-paginated slice and imply that filtering searches the whole database. For larger datasets use loader-backed search, ordering and pagination with the base Table.

Hidden records are still in the HTML. Authorization and sensitive-data filtering must happen on the server. Selection, editable cells, column visibility and virtualization are not included in V0.

Installation

Add the published Cargo package, then enable its assets in your layout. The npm package is published separately for JavaScript consumers; this example uses native Axonyx components.

[dependencies]
axonyx-ui = "0.0.87"

use "@axonyx/ui"