Display Table

io.display.table() shows records as a table in a folder’s page or in a step of an action. It only displays and returns nothing. Provided by the @awaitio/display-table package.

An All users table with linked names, emails, roles, dates and a … menu at the end of every row

Install

npm install @awaitio/display-table

Setup

app.ts

import { displayTable } from '@awaitio/display-table';

export const app = new AwaitIO({
  // name, actionsDirectory, theme, secret, users…
  components: { display: { table: displayTable } },
});

Usage

io.display.table('All users', {
  rows: await prisma.user.findMany(),
  columns: [
    { key: 'name', label: 'Name', route: sendWelcomeEmail.route({ params: { name: '{name}' } }) },
    { key: 'email', label: 'Email' },
    { key: 'createdAt', label: 'Created at' },
  ],
  rowMenu: [changeRole.route({ params: { id: '{id}' } })],
});

The label is the heading above the table; pass null for none.

Props

Prop	Type	Required	Description
`rows`	`Record<string, unknown>[]`	Required	The records, e.g. straight from the database.
`columns`	`(string \| { key, label, route? })[]`	Optional	Which keys to show and their headings. Defaults to every key.
`rowMenu`	`ActionRoute[] \| (row) => ActionRoute[]`	Optional	Links in the … menu at the end of every row, or a function that builds each row’s own, see A menu per row.
`pageSize`	`number`	Optional	Rows per page. Defaults to 20; the pager shows only when there are more.
`filterable`	`boolean`	Optional	Shows the filter above the table. Defaults to `true`.
`emptyText`	`string`	Optional	Shown when there are no rows. Defaults to Nothing to show.

Filtering and paging happen in the browser, on the rows the page sent: send the rows people need, not the whole table.

Links to actions

A column with route turns its cells into links, and every rowMenu item is one. Get them from the action they open with action.route(), the same routes ctx.redirect() takes; a menu item shows the route’s label, the action’s name unless you pass one. {key} in a param is replaced by that key of the row, so a link can carry an id that is not shown as a column:

io.display.table('Accounts', {
  rows: accounts,
  columns: [{ key: 'name', label: 'Name', route: accountDetail.route({ params: { id: '{id}' } }) }, 'createdAt'],
  rowMenu: [updateAccount.route({ params: { id: '{id}' }, label: 'Edit' }), deleteAccount.route({ params: { id: '{id}' }, label: 'Delete' })],
});

Templates are text, so route() takes '{id}' even where the action’s schema wants a number, z.coerce.number(): the link carries text either way, and the action’s schema turns it into a number when the link is opened. When the menu depends on the row, pass a function instead of the array. It gets each row and returns that row’s links; an empty array leaves the row without the … menu:

io.display.table('Versions', {
  rows: versions,
  rowMenu: (row) => {
    return row.isActive && module.frozenAt
      ? [unfreezeModule.route({ params: { id: module.id }, label: 'Unfreeze' })]
      : [freezeToVersion.route({ params: { id: module.id, versionId: String(row.id) }, label: 'Freeze to this version' })];
  },
});

The function runs on the server, once per row, and the browser gets only the finished menus.
It takes the values straight from row, so {key} templates in the links it returns are not replaced.
row is a Record<string, unknown>: turn a value into text with String(row.id) for a param.
A function that throws, or returns something that is not a link, fails like any other props that do not fit: the page shows an error, and an action fails at that step.

How values look

Dates read like Oct 16, 2026, 9:30 AM (a Date from the database arrives as an ISO string and is formatted too), numbers get thousands separators, true and false read Yes and No, an empty value N/A and an object its JSON.

Getting started

SDK

Components

Display components

Layout components

Context

Install

Setup

Usage

Props

Links to actions

A menu per row

How values look

​Install

​Setup

​Usage

​Props

​Links to actions

​A menu per row

​How values look

Install

Setup

Usage

Props

Links to actions

A menu per row

How values look