Data Tables

A data table is the data structure that providers must use to expose data to consumers. By conforming to this structure, all providers are automatically compatible with all consumers (and vice versa).

Understanding tables

You can think of a data table as comparable to a spreadsheet, in that:

• They have columns.
• Each column has a name and a list of values.
• Each value is like an individual cell.

This is an example of a data table that contains a list of Pokémon:

In code, a data table is represented a plain JavaScript object with the following properties:

• name - A human readable label for the data table.
• columns - An array of objects, with each object describing an individual column.

For example:

{
  name: "Pokémon",
  columns: []
}

Understanding columns

A column is a plain JavaScript object with the following properties:

• type - The data type of the column's values.
• name - A human readable label for the column.
• values- An array of values that exist within the column.

For example:

{
  type: "string",
  name: "Name",
  values: ["Bulbasaur", "Charmander", "Squirtle"]
}

Supported data types

The type property of a column can be set to any of the following values:

The data type of each value must match the data type specified in thetype property.

Omitting values

You can include a value of undefined in the values array. This creates an empty "cell" and is the only instance where the data type of the value doesn't have to match the type property.

Single vs. multiple data tables

Providers can expose one or more data tables.

If a provider exposes a single data table, it doesn't need to render a UI. When a user selects the provider, it can immediately send the data table to the consumer. To learn more, see Creating providers.

If a provider exposes more than one data table, it can render a UI for selecting a data table. This UI is rendered when the user selects the provider. To learn more, see Prompting users for input.

Example

{
  name: "Pokemon",
  columns: [
    {
      type: "string",
      name: "Name",
      values: ["Pikachu", "Squirtle", "Bulbasaur", "Charmander"],
    },
    {
      type: "string",
      name: "Type",
      values: ["Electric", "Water", "Grass", "Fire"],
    },
    {
      type: "number",
      name: "Level",
      values: [42, 29, 32, 9],
    },
    {
      type: "boolean",
      name: "isCaptured",
      values: [true, true, false, true],
    },
    {
      type: "date",
      name: "capturedAt",
      values: [new Date(), new Date(), undefined, new Date()],
    },
  ],
};