From fac991b538d7770fe26286dfa28b3c570e453a55 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Wed, 9 Jun 2021 07:25:19 -0700 Subject: [PATCH] Document `createTablePlugin` Summary: Per title Reviewed By: priteshrnandgaonkar Differential Revision: D28991859 fbshipit-source-id: 1af38d8922157b1613e43d987871e664d8e6f5ba --- .../src/utils/createTablePlugin.tsx | 19 ++++++++------- docs/extending/flipper-plugin.mdx | 24 ++++++++++++++++++- 2 files changed, 33 insertions(+), 10 deletions(-) diff --git a/desktop/flipper-plugin/src/utils/createTablePlugin.tsx b/desktop/flipper-plugin/src/utils/createTablePlugin.tsx index a1a04c6d5..e116d2d84 100644 --- a/desktop/flipper-plugin/src/utils/createTablePlugin.tsx +++ b/desktop/flipper-plugin/src/utils/createTablePlugin.tsx @@ -25,17 +25,18 @@ type PluginResult = { }; /** - * createTablePlugin creates a Plugin class which handles fetching data from the client and - * displaying in in a table. The table handles selection of items and rendering a sidebar where - * more detailed information can be presented about the selected row. + * `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 the be able to subscribe to the `method` argument and recieve either an array - * of data objects or a single data object. Each data object represents a row in the table which is - * build by calling the `buildRow` function argument. + * The plugin expects the 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. + * 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. */ export function createTablePlugin(props: { method: string; diff --git a/docs/extending/flipper-plugin.mdx b/docs/extending/flipper-plugin.mdx index 82bc2dfc6..a0a6674d4 100644 --- a/docs/extending/flipper-plugin.mdx +++ b/docs/extending/flipper-plugin.mdx @@ -936,7 +936,29 @@ See `View > Flipper Style Guide` inside the Flipper application for more details ### 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