io.display.table
Displays tabular data.
Usage
await io.display.table("Albums", {
helpText: "Includes the artist and its year of release.",
data: [
{
album: "Exile on Main Street",
artist: "The Rolling Stones",
year: 1972,
},
{
album: "Thriller",
artist: "Michael Jackson",
year: 1982,
},
{
album: "Enter the Wu-Tang (36 Chambers)",
artist: "Wu-Tang Clan",
year: 1993,
},
],
});
Props
columns | Required array of strings or objects | Optional array of column definitions. If not provided, the object keys will be used. |
data | Required array of objects | Array of table data. Values are objects with arbitrary keys/values. |
helpText | Optional string | Secondary label providing an additional description of the data. |
orientation | Optional enum | Whether to render the table with records displayed as rows ("horizontal") or columns ("vertical"). Defaults to "horizontal". |
Returns: Null
Examples
Customizing output
The default behavior shown above is to display all of the fields in each
record. To customize the display of records, a columns
property can be
provided. The columns
property can contain an array of data
property
names, and only those columns will be displayed in the table.
await io.display.table("Users", {
data: [
{
email: "carsta.rocha@example.com",
phone_number: "(60) 1416-4953",
birthdate: "1993-08-04",
first_name: "Carsta",
last_name: "Rocha",
photo: "photos/21351234.jpg",
website_url: "https://example.com",
},
{
email: "irene.morales@example.org",
phone_number: "625-790-958",
birthdate: "1982-04-28",
first_name: "Irene",
last_name: "Morales",
picture: "photos/8321527.jpg",
website_url: "https://example.org",
},
],
columns: ["first_name", "last_name", "email"],
});
The columns
array can also contain definition objects, with a label
property and a renderCell
callback that returns an object with at least a
label
property, and optional value
, href
, action
, and params
properties.
await io.display.table("Users", {
data: [
{
email: "carsta.rocha@example.com",
phone_number: "(60) 1416-4953",
birthdate: "1993-08-04",
first_name: "Carsta",
last_name: "Rocha",
photo: "photos/21351234.jpg",
website_url: "https://example.com",
},
{
email: "irene.morales@example.org",
phone_number: "625-790-958",
birthdate: "1982-04-28",
first_name: "Irene",
last_name: "Morales",
picture: "photos/8321527.jpg",
website_url: "https://example.org",
},
],
columns: [
{
label: "Name",
renderCell: row => `${row.first_name} ${row.last_name}`,
},
{
label: "Birth date",
renderCell: row => {
const [y, m, d] = row.birthdate.split("-").map(s => Number(s));
const birthDate = new Date(y, m - 1, d);
return {
label: birthDate.toLocaleDateString(),
value: birthDate,
};
},
},
{
label: "Website",
renderCell: row => ({
label: row.website_url,
href: row.website_url,
}),
},
{
label: "Edit action",
renderCell: row => ({
label: "Edit user",
action: "edit_user",
params: {
email: row.email,
},
}),
},
],
orientation: "horizontal",
});
If the renderCell
callback returns an action
property, a link will be
generated to the action with that slug. A params
object can also be defined,
this object will be passed to the action's ctx.params
context value.
tip
The two forms shown above can be combined within a single columns
definition.