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" for how to create the native counterpart for your plugin.

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,
});