Canva Developers logo
Data Provider
Getting started
Data Provider

selectDataTable

API reference for the selectDataTable method.

Sends a data table to a data consumer.

Usage

import { getDataProvider } from "@canva/data-provider";


const dataProvider = getDataProvider();


dataProvider.onSelectDataTable((options) => {
  options.selectDataTable({
    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()],
      },
    ],
  });
});

Parameters

#dataTableobject
Required

The data table to send to the data consumer.

#dataTable.namestring
Required

A human readable name for the data table.

#dataTable.columnsarray
Required

The columns of data to include in the data table.

#dataTables.columns[0].typestring
Required

The type of data that the column contains.

The available options include:

  • "boolean"
  • "date"
  • "number"
  • "string"
#dataTables.columns[0].namestring
Required

A human readable name for the column.

#dataTables.columns[0].valuesarray
Required

The values that the column contains. The data type of the values must match the data type specified in the type property. To create an empty cell, set the column to undefined.

Returns

void