# columns (property)

The columns property tells the datagrid component how to render columns.

Type Description
number Number of columns
string URL - requires options
array Column properties
promise Resolves to number/string/array
function Returns any of the above

The most common way to configure columns is an array of objects -

const columns = [
  { header: "Code", field: "customerID", width: 80, background: "#def", fixed: true },
  { header: "Company Name", field: "companyName", width: 160, fixed: true },
  { header: "Contact", field: "contactName", width: 120 },
  // ...
];

Column attributes -

Property Description
align cell alignment - left/center/right
background background color
border column border(s)
class/className css classes
convert data converter - string (name) or function
field data source - string (key) or accessor function
fixed fixed column - boolean
format text formatting - string (name) or function
header column header - string or object
key column unique id - string
style style - string or object
template template - string (name) or render function
type column type - string
width column width - number