Columns from Data

{ key: 'weightKg', prop: 'weightKg', width: 120 }   // name and dataType come from generation

{ key: 'courier.name', name: 'Courier', prop: 'courier.name', filter: {} }

When to use it

Bind a data source, bind no columns, and the grid derives them from the data's shape — one column per scalar key, in the order the keys appear. It is the fastest way to see your data in a grid, and it survives contact with real work: a generated column is an ordinary column definition, so you can keep generation and write the two columns you care about.

How to turn it on

• Bind no [columns] — generation happens on its own.
• autoGenerateColumns: true — generate even though [columns] is bound, filling in the keys those columns do not cover.
• autoGenerateColumns: false — never generate, even with no columns bound. An empty grid on purpose.

What a generated column looks like

• key and prop — the object key.
• name — a humanized label: firstName → First Name, api_url → API URL.
• dataType — read from the data, so sorting, filtering and cell text all match what the column holds.
• sortable and resizable.
• Never editable. Editing is something you ask for, not something a grid decides for your data.
• No width — the sizing modes decide. See Sizing Modes.

What it skips

• Objects, arrays and functions — a nested value has no obvious cell text, so the key is left out rather than printed as [object Object]. Write that column by hand with a dotted prop.
• Keys starting with __ — internal fields.
• Column groups — nesting cannot be read from a flat object, so generation never invents one. Groups you write yourself pass through untouched. See Column Groups.

It reads the data once

Generation runs when the grid first has rows and then holds still. A row arriving later with a field nobody has seen does not grow the table under the reader — the layout they resized stays the layout they resized. When you do want the new field, ask for it:

grid.regenerateColumns();   // on a ViewChild of the grid component

Discovery reads the first 20 rows by default, so the cost is the same on twelve rows as on a hundred thousand. A key that appears only after those rows needs a wider sampleSize — or one hand-written column.

Options

readonly config: GridConfig<Shipment> = {
  autoGenerateColumns: {
    // Read 50 rows instead of 20 when discovering the keys.
    sampleSize: 50,
    // Never build a column for these.
    exclude: ['id'],
    // Your own header text. Return the key itself to leave it raw.
    headerFrom: key => key.replace(/([a-z])([A-Z])/g, '$1 $2'),
  },
};

Generating the definitions yourself

The same function the grid runs is exported, so you can generate once, adjust the result and pass it in as ordinary column definitions — useful when you want to store the layout, or show the user what was derived:

import { generateColumnDefs } from '@gridcraft/angular';

readonly columns = generateColumnDefs(this.rows).map(c =>
  c.key === 'weightKg' ? { ...c, width: 120 } : c);