Skip to main content

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,
},
],
});
interval.com

Props

columnsRequired array of strings or objectsOptional array of column definitions. If not provided, the object keys will be used.
dataRequired array of objectsArray of possible values to be selected. Values are objects with arbitrary keys/values.
helpTextOptional stringSecondary label providing additional context for the selection.
maxSelectionsOptional numberMaximum number of selected values accepted for submission.
minSelectionsOptional numberMinimum 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.

Did this section clearly explain what you wanted to learn?