flipper/docs/create-table-plugin.md

---
id: create-table-plugin
title: Create Table Plugin
sidebar_label: Create Table Plugin
---

A very common kind of Sonar 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 plugin with id `myplugin` sending rows to with 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 'sonar';

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({
  title: 'My Plugin', // Title of plugin
  id: 'myplugin', // ID of plugin
  method: 'newRow', // Method which should be subscribed to to get new rows with share Row (from above),
  icon: 'washing-machine',
  columns,
  columnSizes,
  renderSidebar,
  buildRow,
});
```