renderTableCell

You can customise the table cell by using the renderTableCell property. You can replace the contents of a cell with your own custom HTML like a button or .

The renderTableCell feature offers developers a powerful callback mechanism to handle customizing a cell in a table.

Implementation

<Vizzly.Dashboard 
  renderTableCell={data => {
    if (data.viewId === '<< DEFINED_ID >>') {
        return <div style={{ color: 'green', fontSize: '16px' }}>{data.cell.value}</div>;
    }
    return undefined;
  }}
/>

The definition of the renderTableCell function is;

type renderTableCell = (data: Component.RenderTableCell) => React.ReactNode | string | undefined;
 
type Component.RenderTableCell = {
  // A persisted id for the view.
  viewId: string;
  // Avaiable view types.
  type: 'dataTable' | 'basicTable';
  // Returns the information related to cell.
  fields: { [key: string]: string | number }[];
  cell:
    | ReturnedField
    | {
        grouping?: Array<ReturnedField>;
        value?: ReturnedField;
      };
}
 
 export type ReturnedField = {
    fieldId: string;
    function: string;
    value?: string | number;
    aggregate: string;
  };
 

viewId

The viewId has been deliberately designed to be fixed, regardless of any actions taken by you or your users within the view.

Getting the viewId

1. Open the Console in the browser and run the following command:

VizzlyDev.setRuntimeDeveloperTools({viewRawAttributes:true})

This will reload the page and enable the attributes to be found.

2. Click the "Three dots" icon on the View and select JSON Attributes from the dropdown.

3. The attributes, including the viewID, will now be visible