syidaxgrid
Home Pricing Settings

GRID FEATURE

Separate calculation and display

valueGetter produces a calculated value, while valueFormatter produces readable display text. Return numbers from getters when totals, sorting, or comparisons require numeric values.

Markdown source Features

How it works and when to use it

Distinguish display-only formatters from valueParser and valueSetter, which change actual data. Reusing formatted text as calculation input can produce unexpected results because of units or separators.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Calculate totals from quantity and unit price

Add a calculated column even when the source data has no total field.

javascript
grid.columnDefs = [...grid.columnDefs, {
  field: 'amount', colId: 'amount', headerName: 'Total', editable: false,
  valueGetter: ({ data }) => Number(data.quantity) * Number(data.price)
}];

Verify the result: 10 × 120 produces numeric 1200. Editing quantity to 20 changes the result to 2400.

Example 2. Add currency formatting

Preserve the actual number while formatting amounts for the user's language.

javascript
grid.columnDefs = [{ field: 'price', headerName: 'Unit price',
  valueFormatter: ({ value }) => new Intl.NumberFormat('en-US', {
    style: 'currency', currency: 'KRW'
  }).format(Number(value))
}];

Verify the result: Users see currency symbols and separators, while the source price remains numeric. Formatting does not convert the source currency.

Example 3. Distinguish empty values from zero

Choose a separate empty-value display so a missing price is not incorrectly shown as zero.

javascript
grid.columnDefs = [{ field: 'price', headerName: 'Unit price',
  valueFormatter: ({ value }) => value == null ? 'Not entered' : Number(value).toLocaleString('en-US')
}];

Verify the result: null and undefined display as Not entered; numeric zero displays as 0. Handle invalid numbers during validation.

Combining features and troubleshooting

Do not make network requests or mutate rowData inside a getter. Repeated calls during scrolling, sorting, and recalculation must return the same result for the same input.

If users need to enter formulas themselves, consider the formula feature instead of valueGetter. The two approaches differ in how results are stored and edited.

Related reading