# Values

There are several ways to define which values are going to display in the datagrid cell -

  • set field attribute (data field name or accessor function)
  • assign calculated / dynamic data for each row using onRow event
  • make a custom template bound directly to the data record

# Field / Accessor function

To get a property of a data record put property name into field attribute:

const rows = [
    { message: 'Hello, World!' }
];

const columns = [
    { field: 'message' }
];

For something more complicated you can use accessor function:

const rows = [
    { items: 'ABCDEF' }
];

const columns = [
    { field: data => data.items.slice(0, 1) }
];

# Parse / Convert

Sometimes the data that comes from the server is of wrong type or needs additional processing, for example, you most likely send dates as a string and it has to be converted to the Date type at some point. You can make this with parse attribute -

const rows = [
    { date: '2020-04-01T00:00' }
];

const columns = [
    { field: 'date', parse: source => Date.parse(source) }
];

Usually it is more convenient to put parse field into column type definition rather than adding it directly into each column.

# Calculated data

If you have to add/modify some values on the client-side you can do it with onRow event and cells property of the row context -

const columns = [
    { key: 'num1' }
];

function onRow(row){
    row.cells.num1 = Math.random();
}

← Formatting →