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.
We start by defining what our table rows look like as types:
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.
Next, we define which columns to show and how to display them:
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
to distribute the remaining available space.
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
ManagedDataInspector UI component:
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.
In the same way that we create our sidebar from a
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.
url fields correspond to the keys
we have previously set up as part of the
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
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.
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.