Showing a table

The APIs described on this page are currently being revised, if you are looking for a plugin that does more than displaying a table, we recommend to skip to the Custom Plugin page right away. If you want to follow the steps on this page, remove flipper-plugin from the (peer)dependencies in the package.json of your scaffolded plugin.

Building a Table#

We have found that one of the most useful things you can do to understand how your app works is to give you easy access to the underlying data used to display items on screen. A very easy way of doing this is by showing the data in a table. We have optimized for this particular use case that makes it dead-simple to expose your data in a table that you can sort, filter and select items for more detailed information.

Row Types#

We start by defining what our table rows look like as types:

type Id = number;

type Row = {
  id: Id,
  title: string,
  url: string,
};

It is important that you have some unique identifier for every row so that we know when something new was added to the table. We will use the id field here for this purpose.

Columns#

Next, we define which columns to show and how to display them:

const columns = {
  title: {
    value: 'Title',
  },
  url: {
    value: 'URL',
  },
};

const columnSizes = {
  title: '15%',
  url: 'flex',
};

The keys used here will show up again in the next step when building your rows, so keep them consistent. The value we define for each column will show up as the header at the top of the table.

For the size you can either choose a fixed proportion or choose flex to distribute the remaining available space.

Sidebar#

When clicking on an element in your table, you can display a sidebar which gives more detail about an object than what is shown inline in the table. You could, for instance, show images that you referenced. For this tutorial, however, we will just show the full object by using our ManagedDataInspector UI component:

import {Panel, ManagedDataInspector} from 'flipper';

function renderSidebar(row: Row) {
  return (
    <Panel floating={false} heading={'Info'}>
      <ManagedDataInspector data={row} expandRoot={true} />
    </Panel>
  );
}

You'll notice how the function takes the Row type we have defined before and returns a React component. What you render in this sidebar is entirely up to you.

Building Rows#

In the same way that we create our sidebar from a Row, we also render individual rows in our table but instead of a React component, we provide a description of the data based on the column keys we have set up before.

function buildRow(row: Row): TableBodyRow {
  return {
    columns: {
      title: {
        value: <Text>{row.title}</Text>,
        filterValue: row.title,
      },
      url: {
        value: <Text>{row.url}</Text>,
        filterValue: row.url,
      },
    },
    key: row.id,
    copyText: JSON.stringify(row),
    filterValue: `${row.title} ${row.url}`,
  };
}

The title and url fields correspond to the keys we have previously set up as part of the columns object.

filterValue is used to power the search bar at the top of the table. Defining copyText allows you to come up with a serialization scheme so users can right-click on any row and copy the content to their clipboard.

Putting it all to work#

Now that we've build all the individual pieces, we just need to hook it all up using createTablePlugin:

export default createTablePlugin<Row>({
  method: 'newRow',
  columns,
  columnSizes,
  renderSidebar,
  buildRow,
});

See index.tsx

The method we define here corresponds to the name of the function we call on the native side to inform the desktop about new data we want to display.

And that's it! Starting Flipper will now compile your plugin and connect to the native side. It's a good idea to start Flipper from the command line to see any potential errors. The console in the DevTools is a great source of information if something doesn't work as expected, too.

What's next?#

You now have an interactive table that you can sort, filter and use to get additional information about the stuff you see on screen.

For many cases, this is already all you need. However, sometimes you want to go the extra mile and want to build something a bit more custom. That's what we're going to do in the next part of our tutorial.