Calculated Columns

Enterprise

Introduction

A calculated column computes its value from the rest of the row — a total from revenue + mrr, a ratio, a category — without that value living in your source data. It’s an enterprise feature built with calculatedColumn, which returns a normal column you drop into columns:

import { calculatedColumn } from '@zengrid/enterprise';

const grid = new Zengrid(el, {
  columns: [
    { field: 'revenue', header: 'Revenue' },
    { field: 'mrr', header: 'MRR' },
    calculatedColumn({
      field: 'total',
      header: 'Total',
      renderer: currency,
      value: ({ getValue }) => getValue('revenue') + getValue('mrr'),
    }),
  ],
});

The value function receives getValue(field) to read any other column in the same row, plus the raw data and row index. Anything else you set — renderer, width, align — applies like a normal column.

Ordering

Because the grid maps columns to data positionally, put calculated columns after your data columns so the source columns keep their alignment.

Try it live

Each tab derives a different column. Edit the value function and the grid recomputes as you scroll.

SumRatio → textCategory → chips

CodeDemoSplit

ResetRun ⌘⏎

value: ({ getValue }) => getValue('revenue') + getValue('mrr'). Give it the currency renderer and right align, like any column.

Next

• Custom Cell Components — render the derived value however you like.
• Auto-Generate Columns — infer the base columns, then add calculated ones.
• Getting Values — how the grid reads cell values.