DataView

Table layout

Click a column header to sort. The page re-renders server-side — sort state and page number live in the URL. This demo on the docs page is itself using SSR pagination.

// In your page handler, read state from the URL:
const page  = Number(ctx.url.searchParams.get('page') ?? 1)
const sort  = ctx.url.searchParams.get('sort') ?? undefined
const order = (ctx.url.searchParams.get('order') ?? 'asc') as 'asc' | 'desc'

// Sort and paginate server-side, then pass the slice:
const sorted   = sort ? [...data].sort(...) : data
const pageData = sorted.slice((page - 1) * 20, page * 20)

const columns: DataViewColumn[] = [
  { key: 'name',    label: 'Language',  sortable: true },
  { key: 'year',    label: 'Year',      sortable: true, align: 'right' },
  { key: 'weekly',  label: 'Downloads', sortable: true, align: 'right',
    render: (row) => Number(row.weekly).toLocaleString() },
]

<DataView
  layout="table"
  columns={columns}
  data={pageData}
  page={page}
  pageSize={20}
  totalRows={data.length}
  sort={sort}
  order={order}
  urlParams={Object.fromEntries(ctx.url.searchParams)}
/>

Cards layout

Each row renders as a card. Assign role: 'title' and role: 'subtitle' to promote columns to the card header; remaining columns render as labeled key-value fields. If no column has a title role, the first column is used.

const columns: DataViewColumn[] = [
  { key: 'name',     label: 'Language',  role: 'title' },
  { key: 'paradigm', label: 'Paradigm',  role: 'subtitle' },
  { key: 'typing',   label: 'Type system' },
  { key: 'year',     label: 'First appeared' },
]

<DataView layout="cards" columns={columns} data={data} pageSize={0} />

Grid layout

A compact CSS grid — each item shows the title prominently and remaining fields as small key-value pairs. Columns default to 3; pass cols to override. The grid collapses to 2 columns at 768px and 1 column at 480px automatically.

<DataView layout="grid" columns={columns} data={data} cols={3} pageSize={0} />

Table styling

The table layout accepts the same border and spacing props as Table.

<DataView
  layout="table"
  columns={columns}
  data={data}
  pageSize={0}
  striped
  highlightOnHover
  withTableBorder
/>

Row selection

Add selectable to render a checkbox column. Wrap DataView in a <form> to handle the selected values — each checkbox uses selectName as its field name and the rowKey value as its value. A minimal inline script handles the select-all toggle with no framework overhead.

<form method="post" action="/delete-languages">
  <DataView
    layout="table"
    columns={columns}
    data={data}
    pageSize={0}
    selectable
    rowKey="name"
    selectName="language"
  />
  <button type="submit">Delete selected</button>
</form>

{/* Server reads: ctx.body.getAll('language') → ['TypeScript', 'Rust'] */}

Selection in cards layout

Selection works the same way in cards and grid layouts. Each card shows a checkbox in the top-right corner; a select-all control appears above the list.

<form method="post" action="/action">
  <DataView layout="cards" columns={columns} data={data} selectable rowKey="name" />
  <button type="submit">Submit</button>
</form>

Grid-table layout

A flex-row layout that looks like a table but is built with CSS — columns are responsive. Set span on each column to control proportional widths (same as the Grid component). Use hideBelow to remove a column entirely below a breakpoint, or collapseBelow to move it into an expandable row beneath the main row. Resize your browser window to see the columns adapt — no JavaScript required.

const columns: DataViewColumn[] = [
  { key: 'name',     label: 'Language',        span: 3 },
  { key: 'paradigm', label: 'Paradigm',         span: 2, collapseBelow: 'sm' },
  { key: 'year',     label: 'First appeared',   span: 1, align: 'right', collapseBelow: 'md' },
  { key: 'typing',   label: 'Type system',      span: 2, hideBelow: 'sm' },
  { key: 'weekly',   label: 'Weekly downloads', span: 2, align: 'right', collapseBelow: 'sm',
    render: (row) => Number(row.weekly).toLocaleString() },
]

<DataView layout="grid-table" columns={columns} data={data} pageSize={0} />

The span prop also accepts a breakpoint object for fine-grained control:

// 6-unit column at base, 4 units at sm and above, 2 units at lg and above:
{ key: 'name', label: 'Language', span: { base: 6, sm: 4, lg: 2 } }

Layout switching with belowLayout

Pass belowLayout to render a fallback layout below a breakpoint. Both layouts are included in the HTML and CSS controls which is visible — zero JavaScript required. The default breakpoint is 'sm' (768px); override with belowBreakpoint.

{/* On desktop: grid-table. Below 992px: cards. */}
<DataView
  layout="grid-table"
  belowLayout="cards"
  belowBreakpoint="md"
  columns={columns}
  data={data}
  pageSize={0}
/>

Empty state

Pass emptyState to customise the message shown when data is empty. Accepts any renderable content — a string, JSX, or a full call-to-action block.

<DataView
  layout="table"
  columns={columns}
  data={[]}
  pageSize={0}
  emptyState={<span>No results. <a href="/add">Add one →</a></span>}
/>

SSR pagination pattern

The key to SSR pagination is passing urlParams — the current page's full search params as a plain object. DataView merges them into every link it generates, so the active sort column survives page navigation and the active page survives sort changes.

export default definePage(async (ctx) => {
  const page  = Number(ctx.url.searchParams.get('page') ?? 1)
  const sort  = ctx.url.searchParams.get('sort') ?? undefined
  const order = (ctx.url.searchParams.get('order') ?? 'asc') as 'asc' | 'desc'

  // Your database query uses sort + page directly:
  const { rows, total } = await db.query({
    orderBy: sort,
    direction: order,
    limit: 20,
    offset: (page - 1) * 20,
  })

  return (
    <DataView
      layout="table"
      columns={columns}
      data={rows}
      page={page}
      pageSize={20}
      totalRows={total}
      sort={sort}
      order={order}
      urlParams={Object.fromEntries(ctx.url.searchParams)}
    />
  )
})