Table Views

Building tables

• To quickly build a table instance, use the TableBuilder facility exported from Zowe Explorer API.
• The TableBuilder facility has multiple helper functions to facilitate creating tables. To start, create a new instance of a TableBuilder.

const builder = new TableBuilder();

• Properties, sections of the table, and other options can be provided by calling functions directly on the builder:

const builder = new TableBuilder()
  .options({ pagination: true, paginationPageSize: 100 })
  .rows([
    { place: "(Not) the Apple", apple: 5, banana: 15, orange: 10 },
    { place: "Bananapalooza", apple: 20, banana: 30, orange: 0 },
    { place: "Orange of Fruits", apple: 0, banana: 0, orange: 30 }
  ])
  .columns([
    { field: "place", headerName: "Marketplace" },
    { field: "apple", headerName: "Number of apples", filter: true, sort: "asc" },
    { field: "banana", headerName: "Number of bananas", filter: true },
    { field: "orange", headerName: "Number of oranges", filter: true },
  ])
  .title("Fruits for Sale at Various Marketplaces");

• Once you're ready to build the table, you can call either:
  • build: Builds a table instance and returns it to the developer
  • buildAndShare: Builds a table instance, adds its view to the mediator, and returns it to the developer
• Only use the buildAndShare command if you want to expose a table to the public. Sharing the table allows it to be modified by other extenders, but only the creator of the table can delete the instance.
• The tables themselves leverage AG Grid (community edition) for rendering. All supported AG Grid options for the table can be found here: (Link will be available once work is merged)

Table instances vs. views

• Owned tables are represented by the Table.Instance class.
• The "View" for a table is a superclass of Table.Instance, except that its dispose function is protected to prevent other extenders from calling it.
• Generally, we recommend building tables using the TableBuilder class, but functions are also exposed on the table view to make modifications:

const view = new Table.View(extensionContext);
// Each setter function will send an update to the webview.
// To set data before rendering, pass the data into the constructor as the second argument.
await view.setTitle("Fruits for Sale");
await view.setOptions({ pagination: true, paginationPageSize: 100 });
await view.addColumns([
  { field: "place", headerName: "Marketplace" },
  { field: "apple", headerName: "Number of apples", filter: true, sort: "asc" },
  { field: "banana", headerName: "Number of bananas", filter: true },
  { field: "orange", headerName: "Number of oranges", filter: true },
]);
await view.addContent([
    { place: "(Not) the Apple", apple: 5, banana: 15, orange: 10 },
    { place: "Bananapalooza", apple: 20, banana: 30, orange: 0 },
    { place: "Orange of Fruits", apple: 0, banana: 0, orange: 30 }
  ])

// Notice that this logic results in an identical table to the one composed with the TableBuilder.

• To dispose of a table instance, call its dispose function. This function will also remove the table from the mediator if it was previously added.

Table Mediator

• The table mediator is a controller class used for managing shared Zowe Explorer tables. It operates as a singleton and is exposed through the ZoweExplorerExtenderApi.
• Extenders can share a table with the mediator by calling it's addTable function, or the extender can call buildAndShare on a TableBuilder to build and expose a new table.
• At any time, the source extender can remove a table instance by passing it to the mediator's removeTable function. Only developers with access to the Table.Instance will be able to dispose of the table.
• Other extenders can access tables from the mediator by calling its getTable function and providing the ID of the desired table.
  • To access the table ID, you can call the getId function on the table view. You can then share this ID with other extenders so that they can explicitly request it from the mediator.