Columns

A column is a plain object. You pass an array of columns to the grid.

The properties you use most

• id — a unique id (required).
• field — the data property to read (required).
• name — the header text.
• width, minWidth, maxWidth — the column size.
• sortable — allow sorting by this column.
• cssClass — a CSS class for the cells.
• formatter — render the cell. See Formatters.
• editor — edit the cell. See Cell editors.
• hidden — hide the column without removing it.

const columns = [
  { id: 'title', name: 'Title', field: 'title', sortable: true, width: 200 },
  { id: 'pct', name: '% Complete', field: 'percentComplete', width: 90 },
];

Change columns later

Use setColumns to replace the columns. The grid rebuilds the headers and re-renders.

grid.setColumns(newColumns);

Read the current columns with getColumns.

Version 6 note

Version 6 changes how hidden columns work. The grid keeps all columns and uses the hidden property to show or hide them. See Frozen & column changes in v6.

See also

• Reference: every column property (50 in total).
• Common options