jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js-table.mdx (Creating Plugins - Desktop Plugin - Table)

Browse Source 
Summary: Restyle of page, including changes to spelling, grammar, links, and structure (where relevant).

Reviewed By: lblasa

Differential Revision: D36414496

fbshipit-source-id: 5fb895deb53f8f322904380d88f76c22e4bbf4d2
This commit is contained in:
Kevin Strider
2022-05-17 04:20:20 -07:00
committed by Facebook GitHub Bot
parent 656b04ed53
commit 2f30c51e14
1 changed files with 29 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/tutorial/js-table.mdx
View File

@@ -6,20 +6,18 @@ sidebar_label: Desktop Plugin - Table
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
<img alt="Android Tutorial App" src={useBaseUrl("img/android-tutorial-desktop.png")} />
## 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.
For the purpose of this tutorial, we will be editing the `index.tsx` file that was generated in the previous scaffolding step, and update it as follows:
One of the best ways to understand how your app works is to get access to its underlying data, which are used to display items on screen. An efficient way of achieving this is by showing the data in a table.
The data for Sea-mammals has been optimized for easy display in a table, which you can sort, filter and select items for more detailed information.
<img alt="Android Tutorial App" src={useBaseUrl("img/android-tutorial-desktop.png")} />
In this section of the tutorial, you'll be editing the `index.tsx` file that was generated in the previous scaffolding step.
### Row Types
We start by defining what our table rows look like as types:
Start off by defining what your table rows look like:
```typescript
type Row = {
@@ -29,13 +27,13 @@ type Row = {
};
```
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.
:::note
It's important that you have some unique identifier for every row so that you know when something new was added to the table; the 'id' field is sufficient
:::
### Columns
Next, we define which columns to show and how to display them:
Define which columns to show and how to display them:
```typescript
import {DataTableColumn} from 'flipper-plugin';
@@ -52,15 +50,14 @@ const columns: DataTableColumn<Row>[] = [
];
```
The keys used here will show up again in the next step when building
your rows, so keep them consistent. The `title` we define for each column will show up as the header at the top of the table, and will be default to the `key` value if omitted.
The keys used here will show up again in the next step when building your rows, so keep them consistent.
The `title` defined for each column will show up as the header at the top of the table and will be default to the `key` value if omitted.
For the `width` you can either choose a fixed number (pixels), a percentage, or leave it out
to distribute the remaining available space.
For the `width`, you can either choose a fixed number (pixels), a percentage, or leave it out to distribute the remaining available space.
### Configuring the table
With a type describing the data we'll be storing, `Row`, and a descriptions of the columns to display, getting up table showing our data, including search / sort and a details view is now trivial!
You now have a Row type that describes the data you'll be storing and a description of the columns to display. With these components it's a trivial task to get a table showing data, including search / sort and a details view, as shown in the following code snippet:
```typescript
import {DataTableColumn, createTablePlugin} from 'flipper-plugin';
@@ -72,29 +69,24 @@ module.exports = createTablePlugin<Row>({
});
```
The `method` refers to the method that should be listened to to fill the table with data.
The string `"newRow"` that is used here refers back to identifier we used with `connection.send` to send our data to the Flipper desktop application in the previous step.
The above code snippet has the following properties:
The `key` property is optional, but by setting it the `'id'` field will be used as identifier. As a result, once a `newRow` message arrives with an existing `id`, it will overwrite the old entry, rather than appending a new one.
* `method` - refers to the method that should be listened to to fill the table with data.
* `'newRow'` - refers back to the identifier used with `connection.send` to send the data to the Flipper desktop application in the previous step.
* `key` - [optional] - but by setting this property, the `'id'` field is used as an identifier. As a result, once a `newRow` message arrives with an existing `id`, it will overwrite the old entry, rather than appending a new one.
The `createTablePlugin` API supports more options, which are documented [here](../extending/flipper-plugin.mdx#createtableplugin).
The `createTablePlugin` API supports more options, which are documented in the [Dektop Plugin API](../extending/flipper-plugin.mdx#createtableplugin) page.
And that's all there is to 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.
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.
The final result of this step can be seen at [index_table.tsx](https://github.com/facebook/flipper/blob/main/desktop/plugins/public/seamammals/src/index_table.tsx).
## What's next?
## What 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.
`createTablePlugin` is a high level abstraction that takes care of both connection management and a standardized UI for the most common scenario.
You now have an interactive table that you can sort, filter and use to get additional information about the data 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.
The `createTablePlugin` is a high-level abstraction that takes care of both connection management and a standardized UI for the most common scenario.
For many cases, this is all you need. However, sometimes you may want to build something a bit more custom, which is covered in the [Desktop Plugin - Custom UI page](js-custom.mdx)