Skip to main content

render-table

Description​

Fires after the widget configuration has been processed and just before the table is rendered

It allows you to alter the final table configuration on the fly or prevent the rendering of the table altogether.

Usage​

"render-table": ({
    config: {
        columns?: any[],
        data?: any[],
        footer?: boolean,
        sizes?: {
            rowHeight?: number,
            headerHeight?: number,
            columnWidth?: number,
            footerHeight?: number
        },
        split?: {
            left?: number;
            right?: number;
        },
        tree?: boolean,
        cellStyle?: (row: any, col: any) => string,
    }
}) => boolean | void;

Parameters​

The callback of the action takes the config object with the following parameters:

  • columns - (optional) columns array with the next parameters for each object:
    • id (number) - (required) the id of a column
    • cell (any) - (optional) a template with the cell content (please, refer to Adding templates via the template helper)
    • template - (optional) the template that is defined via the tableShape property
    • fields (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels
    • field - (optional) it's a string which is the id of a field
    • method (string) - (optional) a method, if defined for a field in this column
    • methods (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode
    • format (string or object) - (required) date format or number format (refer to Applying formats to fields)
    • isNumeric (boolean) - (optional) defines whether a column contains numeric values
    • isTotal (boolean) - (optional) defines whether it is a total column
    • area (string) - (optional) an area where the column is rendered: "rows", "columns", "values"
    • header- (optional) an array of header cells with the next properties for each cell:
      • text (string) - (optional) cell text, or formatted value, or processed with a predicate template
      • rowspan (number) - (optional) the number of rows a header should span
      • colspan (number) - (optional) the number of columns a header should span
      • value (any) - (required) raw value, if a cell belongs to "columns" area
      • field (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area
      • method (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined
      • format (string or object) - date format or number format (refer to Applying formats to fields)
    • footer - (optional) a header label or an object with footer settings which are the same as the header settings
  • data - (optional) an array of objects with data for the table; each object represents a row:
    • id (number) - (required) row id
    • values (array) - (required) an array with row data
    • open (boolean)- (optional) branch state
    • $level (boolean)- (optional) branch index
  • footer - (optional) if it's set to true, the table footer is displayed at the bottom of the table; it's set to false and invisible by default
  • sizes - (optional) an object with table sizes settings, namely, columnWidth, footerHeight, headerHeight, rowHeight
  • split (object) - (optional) an object with the next properties:
    • left (number) - the number of fixed columns from the left
    • right (number) - the number of fixed columns from the right
  • tree - (optional) defines if the tree mode is enabled (true if enabled)
  • cellStyle - (optional) an object where each key is the field id and the value is a function that returns a string. All columns based on the specified field will have the related template applied.
info

For handling the inner events you can use the Event Bus methods

Returns​

The callback may return boolean or void.
If the event handler returns false, it will block the operation in question. In this case, it will prevent the rendering of the table.

Example​

The next example shows how to output the config object to console and add a footer.

const table = new pivot.Pivot("#root", {
    fields,
    data: dataset,
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

table.api.intercept("render-table", (ev) => {
    console.log(ev.config); //output the config object
    console.log(ev.config.columns); //output the columns array

    ev.config.footer = true;
    ev.config.columns[0].footer = ["Custom footer"];

    // returning "false" here will prevent the table from rendering
});

The next example shows how to make all rows expand/collapse with the button click. The tree mode should be enabled via the tableShape property.

const table = new pivot.Pivot("#root", {
    tableShape: {
        tree: true,
    },
    fields,
    data: dataset,
    config: {
        rows: ["type", "studio"],
        columns: [],
        values: [
            {
                field: "score",
                method: "max"
            },
            {
                field: "rank",
                method: "min"
            },
            {
                field: "members",
                method: "sum"
            },
            {
                field: "episodes",
                method: "count"
            }
        ]
    }
});

const api = table.api;
const table = api.getTable();

//  setting all table branches closed on the table config update
api.intercept("render-table", (ev) => {
    ev.config.data.forEach((r) => (r.open = false));

    // returning "false" here will prevent the table from rendering
    // return false;
});

function openAll() {
    table.exec("open-row", { id: 0, nested: true });
}

function closeAll() {
    table.exec("close-row", { id: 0, nested: true });
}

See also how to configure the split feature using the render-table event: Freezing columns.

Related article: pivot.template helper

Related sample: Pivot 2. Custom frozen (fixed) columns (your number)