## DataTable

A standalone table component for displaying tabular data with optional striped, bordered, and compact styles.

Selector: `ccl-datatable`

### Inputs
- `columns: { id: string; label: string; width?: string }[]` – column definitions
- `rows: any[]` – array of row objects (keys must match `columns[i].id`)
- `striped: boolean` – zebra striping on rows
- `bordered: boolean` – add cell borders
- `compact: boolean` – reduced padding

### Basic example
```html
<ccl-datatable
  [columns]="[
    { id: 'name', label: 'Name', width: '40%' },
    { id: 'email', label: 'Email' },
    { id: 'role', label: 'Role', width: '20%' }
  ]"
  [rows]="[
    { name: 'Ada Lovelace', email: 'ada@example.com', role: 'Admin' },
    { name: 'Grace Hopper', email: 'grace@example.com', role: 'User' }
  ]"
>
</ccl-datatable>
```

### Density and styles
```html
<ccl-datatable [columns]="cols" [rows]="rows" [striped]="true"></ccl-datatable>
<ccl-datatable [columns]="cols" [rows]="rows" [bordered]="true"></ccl-datatable>
<ccl-datatable [columns]="cols" [rows]="rows" [compact]="true"></ccl-datatable>
```

### Empty state
When `rows` is empty, an empty state row is shown automatically: "No data available." with `colspan` computed from `columns.length`.

### Accessibility
- Uses `role="table"`, `role="columnheader"`, and `role="row"/"cell"`
- Column headers use `<th scope="col">`

### Theming
Relies on the same CSS variables as the rest of the library for typography, spacing, borders, and colors. Example overrides:
```css
:root, :host {
  --color-background-surface: #fff7ed; /* subtle surface for table */
  --spacing-sm: 0.5rem;               /* adjust cell padding */
}
```