Custom cell renderer

[jonw09]

Support Question

Is there an API or approach that I can use to extend or override the cells within the datagrid?

Ideally I'd like to make use of the table as is, but have a way to provide the individual cells to display. This would allow me to do custom formatting and styling and make use of bespoke components.

Is this supported?

[timkpaine]

There is a custom styles example on the README:
https://bl.ocks.org/texodus/c42f3189699bd29cf20bbe7dce767b07

[jonw09]

That’s for the link. I’m looking for a way to fully customise cells on an individual basis though. From what I can see in the example, the styling would be table-wide with no ability to target individual cells based on their content.

Is there either:

• a way to override the rendered cell component with something bespoke? E.g. return a new div per cell with custom content
• a way to style specific cells either by applying extra class names or applying styles directly?

An example of what I’d like to do is a flash of green if a number ticks up and red if it ticks down. As far as I can tell from the docs there’s no way to do this in a targeted manner using styles.

[nekw]

I am looking for this feature/api as well.

[timkpaine]

You can, e.g. the Magic example, though i defer to @texodus for the level to which this is public API (if any)

[texodus]

I do not understand what is being asked for by "customize cells on an individual basis" or "target individual cells based on their content". You can choose to update all, some or none of the visible cells at your discretion based on a wide-range of metadata provided by getMeta() per cell, you just iterate through visible cells on each style listener callback and only modify the ones you're interested in, a la any of the style examples @timkpaine linked above. Even @finos/perspective-viewer-datagrid itself uses this API from the underlying regular-table datagrid library to do its own styling.

Perspective does not generate deltas unless you explicitly request them, which means the datagrid does not provide the delta per cell in the metadata object returned from getMeta(). You can however subscribe to these yourself pretty simply, if I have time I will try to add an example of this after we merge the newest plugin API.

[jonw09]

Thanks for all the info, this is exactly what I was after!

[gersongoulart]

Just to expand a little more on this topic: what would be the recommended way to register dynamic formatters in a plugin per-instance of a viewer?

I mean, I am working on a generic component that has a perspective grid viewer and I want to format the table rows and cells. But every time I instantiate that table, I may be passing different column settings that may have different "formatters" required, hence I'd like to make them dynamic, e.g.:

// On initialization
class CustomDatagrid extends customElements.get("perspective-viewer-datagrid") {
  rowStylePlugins = [];
  cellStylePlugins = [];

  get name() {
    return "Custom Datagrid";
  }

  async activate(...args) {
    await super.activate(...args);
    const config = await this.parentElement.save();
    this.rowStylePlugins = config. plugin_config.rowStylePlugins;
    this.cellStylePlugins = config. plugin_config.cellStylePlugins;
    this.datagrid.addStyleListener(this.applyStyles.bind(this));
  }

  applyStyles() {
    const trs = this.querySelectorAll("tbody tr");

    for (const tr of trs) {
      this.rowStylePlugins.forEach((rowPlugin) => rowPlugin.call(this, tr, firstTd));

      for (const td of tr.children) {
        const colName = meta.column_header.at(-1);
        const meta = this._datagrid.getMeta(td);

        this.cellStylePlugins.forEach((cellPlugin) => cellPlugin.call(this, colName, meta, td));
      }
    }
  }
}

customElements.define("custom-datagrid", CustomDatagrid);
customElements.get("perspective-viewer").registerPlugin("custom-datagrid");

Then

// On instantiation of a custom component
const viewer = document.getElementById("viewer");
viewer.load(data);

await viewer.restore({
  // ...
  plugin_config: {
    rowStylePlugins: [
      function zebraStripedRows(tr, firstTd) {
        const meta = this._datagrid.getMeta(firstTd);
        tr.classList.toggle("zebra-striped", meta.y % 2 === 0);
      },
    ],
    cellStylePlugins: [
      function specialCell(colName, meta, td) {
        if (colName === "Special") {
          td.textContent = "my especial formatting";
        }

        td.classList.toggle("special", colName === "Special");
      },
    ],
  },
});

But I have not been able to make this work, as config.plugin_config seems to only return the options accepted by the perspective-viewer-d3fc: {columns: {…}, editable: false, scroll_lock: true}

[texodus]

plugin_config was intended to be the serialized state of what the user can apply in the <perspective-viewer> UI, not really as an API for adding developer configuration. For your case I'd recommend just adding these settings as methods on your plugin itself, rather than passing them through plugin_config. You can then use the .getPlugin("my_plugin_name") method to get the HTMLElement for your plugin per-instance of <perspective-viewer>, and call these configuration methods as you'd like.

If you truly need to override plugin_config, you will need to override/call (or implement if you don't inherit from an existing perspective plugin) the super.restore() and super.save() methods on your plugin to extract/inject these values when they are called by the parent element.