Grid Columns Are Row-Object Keys Projected into Augmentable Descriptors

An HTML data grid's columns are the keys of its row object. Each backend entry is mapped to a JS/TS object whose attribute names are exactly the columns the grid will render; an array of such objects is the row data.

The column config is then generated from that shape, in two steps:

1. Project — acquire the row/object shape and emit one column descriptor per attribute (descriptor keyed by, or bound to, the attribute name).
2. Augment — decorate each descriptor with library-specific view properties: visibility, column order, filterable, sortable, grouping, caption/format.

row object        column descriptors (after augment)
{                 [
  id,        →      { dataField: 'id',     visible, order, allowFiltering, allowSorting },
  name,      →      { dataField: 'name',   ... },
  amount,    →      { dataField: 'amount', ... },
}                 ]

DevExtreme is the concrete case (dxDataGrid columns bound by dataField), but the pattern generalizes to any column-config grid library: the data shape is the source of truth for the column set, and the descriptor layer is a per-attribute augmentation over it. The view-state these descriptors carry lives in a structure separate from the data — see A Grid Separates Row-Data Array from a View-State Config Object.