Prompting users for input

In some cases, exposing a single data table limits the usefulness of a provider.

For example, a provider for real estate data might want to offer separate data tables for each location, let users filter properties within certain price ranges, or a combination of the two. To support this behavior, a provider can render a UI that lets users select (and even customize) data tables before sending them to consumers.

This guide explains how to render a UI that displays a list of data tables for the user to choose between. You can adapt the steps to implement a range of user experiences.

Step 1: Render a UI

In the Creating providers guide, the only reason the provider doesn't render a UI is because it immediately calls the selectDataTable method. The alternative is to call this method at a later point in the lifecycle, such as when a user clicks a button. This gives the app a chance to render a UI when it first loads.

The following snippet demonstrates how to render a list of buttons:

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

const App = () => {
  const dataProvider = getDataProvider();

  const handleClick = (event) => {
    const city = event.target.name;
    console.log("You clicked:", city);
  };

  return (
    <div>
      <div>Choose a location</div>
      <div>
        <button name="brisbane" onClick={handleClick}>
          Brisbane
        </button>
        <button name="melbourne" onClick={handleClick}>
          Melbourne
        </button>
        <button name="sydney" onClick={handleClick}>
          Sydney
        </button>
      </div>
    </div>
  );
};

Step 2: Handle the provider's selection

Use the onSelectDataTable method to register a callback that runs when the user selects the provider:

React.useEffect(() => {
  dataProvider.onSelectDataTable(async (opts) => {
    console.log(opts);
  });
}, []);

Then store the contents of the opts parameter in a state object:

const [state, setState] = React.useState<{
  selectDataTable?: (dataTable: DataTable) => void;
}>({});

React.useEffect(() => {
  dataProvider.onSelectDataTable(async (opts) => {
    setState(opts);
  });
}, []);

This is required for the selectDataTable method to be available within the same scope as the UI code.

Step 3: Send a data table to the consumer

When a user selects a data table — in this case, by clicking one of the buttons — call the selectDataTable method and pass a data table into it:

const handleClick = (event) => {
  if (!state.selectDataTable) {
    return;
  }

  const city = event.target.name;

  if (city === "brisbane") {
    state.selectDataTable({
      name: "Brisbane",
      columns: [],
    });
  }

  if (city === "melbourne") {
    state.selectDataTable({
      name: "Melbourne",
      columns: [],
    });
  }

  if (city === "sydney") {
    state.selectDataTable({
      name: "Sydney",
      columns: [],
    });
  }
};

As soon as the selectDataTable method is called, the selected data table will be sent to the consumer.