5f1a0548f5
Summary: Docusaurus 2 is quite a lot more powerful than docu 1 it turns out. This should convert the website fully. * [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2 * [done] Convert landing page html * [done] Convert all images to img tags * [done] Convert all .md files to .mdx * [done] Make sure ui-doc generation and including still works * [done] Scan every page visually for sanity check * [done] Make sure footer still works * [done] Make sure search still works * [done] Change all links/ to links/index * [done] Change all links.md to links * [done] Add some custom css to make the navbar look like the old one and darken the footer. Reviewed By: passy Differential Revision: D21158717 fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568
83 lines
2.1 KiB
Plaintext
83 lines
2.1 KiB
Plaintext
---
|
|
id: create-table-plugin
|
|
title: 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)" 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,
|
|
});
|
|
```
|