Document createTablePlugin

Summary: Per title

Reviewed By: priteshrnandgaonkar

Differential Revision: D28991859

fbshipit-source-id: 1af38d8922157b1613e43d987871e664d8e6f5ba
This commit is contained in:
Michel Weststrate
2021-06-09 07:25:19 -07:00
committed by Facebook GitHub Bot
parent d2095d5937
commit fac991b538
2 changed files with 33 additions and 10 deletions

View File

@@ -25,17 +25,18 @@ type PluginResult<Raw, Row> = {
}; };
/** /**
* createTablePlugin creates a Plugin class which handles fetching data from the client and * `createTablePlugin` creates a plugin that handles receiving data from the client and
* displaying in in a table. The table handles selection of items and rendering a sidebar where * displaying it in a table. The table handles selection of items, sorting, filtering and
* more detailed information can be presented about the selected row. * rendering a sidebar where more detailed information can be presented about the selected row.
* *
* The plugin expects the be able to subscribe to the `method` argument and recieve either an array * The plugin expects the be able to subscribe to the `method` argument and receive either single data objects.
* of data objects or a single data object. Each data object represents a row in the table which is * Each data object represents a row in the table.
* build by calling the `buildRow` function argument.
* *
* An optional resetMethod argument can be provided which will replace the current rows with the * An optional `resetMethod` argument can be provided which will replace the current rows with the data provided.
* data provided. This is useful when connecting to Flipper for this first time, or reconnecting to * This is useful when connecting to Flipper for this first time, or reconnecting to the client in an unknown state.
* the client in an unknown state. *
* Since the `createTablePlugin` defines both the `plugin` and `Component` for the plugin in one go,
* making the result is most easily done by using `module.exports = createTablePlugin(....)` so that both are exported from the plugin package.
*/ */
export function createTablePlugin<Row extends object>(props: { export function createTablePlugin<Row extends object>(props: {
method: string; method: string;

View File

@@ -936,7 +936,29 @@ See `View > Flipper Style Guide` inside the Flipper application for more details
### createTablePlugin ### createTablePlugin
Utility to create a plugin that consists of a master table and details json view with minimal effort. See [../tutorial/js-table.mdx](Showing a table) for more details. Utility to create a plugin that consists of a master table and details JSON view with minimal effort. See the [Showing a table](../tutorial/js-table.mdx) tutorial for an example.
`createTablePlugin` creates a plugin that handles receiving data from the client and
displaying it in a table. The table handles selection of items, sorting, filtering and rendering a sidebar where more detailed information can be presented about the selected row.
The plugin expects to be able to subscribe to the `method` argument and receive either single data objects.
Each data object represents a row in the table.
An optional `resetMethod` argument can be provided which will replace the current rows with the data provided.
This is useful when connecting to Flipper for this first time, or reconnecting to
the client in an unknown state.
Since the `createTablePlugin` defines both the `plugin` and `Component` for the plugin in one go, making the result is most easily done by using `module.exports = createTablePlugin(....)` so that both are exported from the plugin package.
Valid options are:
* `method: string`: The event that is sent from the corresponding client plugin, and should be collected.
* `resetMethod?: string`: An event name, that, when sent from the client, should clear the current table.
* `columns: DataTableColumn`: A description of the columns to display. See the [DataTable columns](#datatable).
* `key?: string`: If set, the specified field of the incoming data will be treated as unique identifier. Receiving new data for existing rows will replace the existing rows. Without this property the table will only be appended.
* `onCopyRows?: (rows) => string`: A function that can be used to customize how records are copied to the clipboard. By default they will be `JSON.stringify`-ed.
* `buildRow?: (rawData) => row`: A function that can be used to preprocess the incoming data before it is handed of to the table.
* `renderSidebar?: (row) => React.Element`: A function that can be used to customize how the sidebar is rendered.
### batch ### batch