43157f974e
Summary: We swtiched from using the name of the package as the ID which is used to identify a client plugin. These changes were not reflected correctly in our docs. Reviewed By: jknoxville Differential Revision: D14165439 fbshipit-source-id: 1cbb9c1723911f8fa4b7df19c631e6f260c81bd8
84 lines
2.1 KiB
Markdown
84 lines
2.1 KiB
Markdown
---
|
|
id: create-table-plugin
|
|
title: Create Table Plugin
|
|
sidebar_label: Create Table Plugin
|
|
---
|
|
|
|
A very common kind of Flipper plugin is a plugin which fetches some structured data from the device and presents it in a table.
|
|
|
|
To make building these kinds of plugins as easy as possible we have created an abstraction we call `createTablePlugin`. This is a function which manages the complexities of building a table plugin but still allows you to customize many things to suite your needs.
|
|
|
|
Below is a sample implementation of a desktop plugin based on `createTablePlugin`. It subscribes to updates from a client send using the `newRow` method. A row can have any structure you want as long as it has a unique field `id` of type `string`.
|
|
|
|
See "[Create Plugin](create-plugin.md)" for how to create the native counterpart for your plugin.
|
|
|
|
```javascript
|
|
import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'flipper';
|
|
|
|
type Id = string;
|
|
|
|
type Row = {
|
|
id: Id,
|
|
column1: string,
|
|
column2: string,
|
|
column3: string,
|
|
extras: Object,
|
|
};
|
|
|
|
function buildRow(row: Row) {
|
|
return {
|
|
columns: {
|
|
column1: {
|
|
value: <Text>{row.column1}</Text>,
|
|
filterValue: row.column1,
|
|
},
|
|
column2: {
|
|
value: <Text>{row.column2}</Text>,
|
|
filterValue: row.column2,
|
|
},
|
|
column3: {
|
|
value: <Text>{row.column3}</Text>,
|
|
filterValue: row.column3,
|
|
},
|
|
},
|
|
key: row.id,
|
|
copyText: JSON.stringify(row),
|
|
filterValue: `${row.column1} ${row.column2} ${row.column3}`,
|
|
};
|
|
}
|
|
|
|
function renderSidebar(row: Row) {
|
|
return (
|
|
<Panel floating={false} heading={'Extras'}>
|
|
<ManagedDataInspector data={JSON.parse(row.extras)} expandRoot={true} />
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
const columns = {
|
|
time: {
|
|
value: 'Column1',
|
|
},
|
|
module: {
|
|
value: 'Column2',
|
|
},
|
|
name: {
|
|
value: 'Column3',
|
|
},
|
|
};
|
|
|
|
const columnSizes = {
|
|
time: '15%',
|
|
module: '20%',
|
|
name: 'flex',
|
|
};
|
|
|
|
export default createTablePlugin({
|
|
method: 'newRow', // Method which should be subscribed to to get new rows with share Row (from above),
|
|
columns,
|
|
columnSizes,
|
|
renderSidebar,
|
|
buildRow,
|
|
});
|
|
```
|