# Columns

Columns property defines how the datagrid renders cells and column headers.

# Configuration

Assign an array of column descriptor objects to the columns property:

const columns = [
  {header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
  {header: 'Company Name', field: 'companyName', width: 160},
  {header: 'Title', field: 'contactTitle', width: 120},
  {header: 'Address', field: 'address', width: 120},
  {header: 'Phone', field: 'phone'},
  {header: 'Fax', field: 'fax'},
  {header: 'Country', field: 'country'}
];

You may also modify/extend each column via 'onColumn` event:


function onColumn(column){
    if (column.key == 'address'){
        column.format = (value) => (/* custom formatting code */);
    }
}

# Using column types

If you have many columns with the same parameters you can define a 'column type' and use it instead of copying the same parameters into each column config.

import { type } from "@activewidgets/options";

const options = [
    type('money', {format: 'money', width: 100, align: 'right'}),
    type('date', {format: 'date', width: 150, align: 'right'})
];

const columns = [
    // ...
    { header: 'Last Order', type: 'money', field: 'amount' },
    { header: 'Order Date', type: 'date', field: 'date' }
];

# Global defaults

It is possible to set the default params for all column with column option:

import { column } from "@activewidgets/options";

const options = [
    column({width: 200})
];

← Values →