flipper/docs/tutorial/js-table.mdx

---
id: js-table
title: Showing a table
---
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';

<img alt="Android Tutorial App" src={useBaseUrl("img/android-tutorial-desktop.png")} />

<div class="warning">

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 <Link to={useBaseUrl('/docs/tutorial/js-custom')}>Custom Plugin</Link> 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.
</div>

## 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:

```javascript
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:

```javascript
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:

```javascript
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.

```javascript
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`:

```javascript
export default createTablePlugin<Row>({
  method: 'newRow',
  columns,
  columnSizes,
  renderSidebar,
  buildRow,
});
```
*See [index.tsx](https://github.com/facebook/flipper/blob/master/desktop/plugins/seamammals/src/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.