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

interval.com

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.

Was this section useful?