io.display.table
Rows from your database, as a table.
io.display.table shows records as a table, on a page or in a step of an action. Pass the rows as they come from the database and say which columns to show. A name can link to the action that handles it. Every row can have a menu of its own.
The simplest one
The whole action file, and roughly what your team sees when it runs.
List users
What you can set
The settings you will reach for most, each with the line of code that turns it on.
Straight from the database. Pass the records as your query returns them. Relations and dates included, nothing to map first.
Columns by key. Name the fields to show. A typo in a key is a type error, not an empty column.
Cells you build. renderCell gets the whole record and returns what the cell shows, such as the name of a related account.
Colored badges. Put a label in a badge of one of eight colors: online in green, failed in red.
Links. A cell can open another action with its parameters filled in, or a page outside the app in a new tab.
A menu on every row. The … at the end of a row lists the actions for that record. Each row can get a different set.
Filter and paging. A filter above the table and a pager under it, both in the browser. Twenty rows a page unless you say otherwise.
Values people can read. Dates, numbers and yes or no come out formatted. An empty value reads N/A.
Your own empty text. When there are no rows, the table says so in your words instead of a blank box.
More in the docs
This page shows the idea. The docs have every prop, the checks on the server and more examples.
Next components
Three more calls on io. Each one shows a control and hands your code a typed value.
Write your first tool today.
An async function, a few await calls, and the form is in the browser.