# XWUIListRecordMaster

The records-list CRUD master: it renders a tabular list of records against a form definition across the five canonical CRUD states. Extending `XWUIListMaster`, it derives the table columns from the form definition itself - `getListColumnsFromDef()` walks the sections/rows/columns and uses each field element's `id`/`label` (skipping display-only title/subtitle/paragraph elements), capped by `maxColumns` (default 5) and always prefixed with `id` - then maps each record into a row whose `cells` are the record object. The generic action hooks are wired to record-specific callbacks (`onViewRecord`, `onEditRecord`, `onDeleteRecord`, `onAddRecord`, `onClearRecords`). State semantics: `read` = view-only table (eye), `update` = view/edit/delete per row + Add, `create` = add-record panel, `delete` = bulk-delete confirmation, `json` = JSON editor of the `records[]` array. Driven externally via `setState()`, typically by the umbrella `XWUIEntityMaster` as its Record List sub-master.

## Usage

```ts
import { XWUIListRecordMaster } from './XWUIListRecordMaster';

const contactDef = {
  config: { uid: 'f-contact', version: '1.0.0', name: 'Contact' },
  schema: {},
  data: { sections: [{ id: 's1', title: 'Main', rows: [
    { id: 'r1', columns: [{ id: 'c1', width: 'full', element: { id: 'name',  type: 'text',  label: 'Name'  } }] },
    { id: 'r2', columns: [{ id: 'c2', width: 'full', element: { id: 'email', type: 'email', label: 'Email' } }] },
  ] }] },
};

const master = new XWUIListRecordMaster(
  document.getElementById('app')!,
  {
    formDefinition: contactDef,
    records: [
      { id: 1, name: 'Ada Lovelace', email: 'ada@example.com' },
      { id: 2, name: 'Alan Turing',  email: 'alan@example.com' },
    ],
    state: 'update',
  },
  {
    onViewRecord: (rec) => console.log('view', rec.id),
    onEditRecord: (rec) => console.log('edit', rec.id),
    onDeleteRecord: (id) => console.log('delete', id),
    onAddRecord: () => console.log('add'),
  }
);

master.setState('read');
```

## Basic Usage

A read-only table of contact records driven by a form definition.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A read-only table of contact records driven by a form definition.
```

## With row actions

A records table exposing per-row view / edit / delete plus an Add button.

```example
file: examples/WithRowActions.ts
html: examples/WithRowActions.html
title: With row actions
description: A records table exposing per-row view / edit / delete plus an Add button.
```

## Selected columns

Limit which fields become table columns via the cols visibility map.

```example
file: examples/SelectedColumns.ts
html: examples/SelectedColumns.html
title: Selected columns
description: Limit which fields become table columns via the cols visibility map.
```

```api
```