io.select.table
Prompts the app user to select any number of values from an array of tabular data.
Usage
const albums = await io.select.table("Select your favorites", {
data: [
{
album: "Exile on Main Street",
artist: "The Rolling Stones",
year: 1972,
},
{
artist: "Michael Jackson",
album: "Thriller",
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 possible values to be selected. Values are objects with arbitrary keys/values. |
helpText | Optional string | Secondary label providing additional context for the selection. |
maxSelections | Optional number | Maximum number of selected values accepted for submission. |
minSelections | Optional number | Minimum number of selected values required for submission, defaults to 0. |
Returns: The selected subset of the provided data objects
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.select.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
and href
properties.
await io.select.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,
}),
},
],
});
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.