# #048 Table HTML Functional Class

Runtime: BoneTable 1.0.16  
Guide/Package baseline: 1.0.32

## Formal class

`bf-table` is the single normal-use HTML Functional Class.

```html
<div class="bf-table"
     data-table-caption="Employees"
     data-table-columns='[{"key":"name","label":"Name"},{"key":"age","label":"Age","align":"right"}]'
     data-table-rows='[{"name":"Aki","age":31},{"name":"Mika","age":28}]'></div>
```

## Attributes

| HTML attribute | Runtime property | Type | Default | Meaning |
|---|---|---|---|---|
| `data-table-caption` | `caption` | string | empty | Caption shown above the table |
| `data-table-columns` | `columns` | JSON array | `[]` | Column definitions, including optional `cellElement` |
| `data-table-rows` | `rows` | JSON array | `[]` | Row objects, including optional `$cells` overrides |
| `data-table-header` | `showHeader` | boolean | true | Show the header row |
| `data-table-striped` | `striped` | boolean | false | Alternate row background |
| `data-table-hover` | `hover` | boolean | false | Highlight hovered row |
| `data-table-bordered` | `bordered` | boolean | false | Draw cell/table borders |
| `data-table-compact` | `compact` | boolean | false | Reduce cell padding |
| `data-table-show-empty-rows` | `showEmptyRows` | boolean | true | Keep value-less rows visible |
| `data-table-display-row-count` | `displayRowCount` | integer >= 0 | 0 | Minimum display row count; 0 = automatic |
| `data-table-empty-text` | `emptyText` | string | データがありません | Empty-state message |
| `data-table-inherit-parent` | `inheritParent` | boolean | true | Match parent content width |
| `data-table-theme` | `theme` | light/dark/neon | dark | Table theme |
| `aria-label` | `ariaLabel` | string | Table | Accessible name |

Plain cell content is written with `textContent`; HTML from row data is not interpreted.

## Cell Renderer JSON

Cell UI is configured inside the JSON supplied to `columns` / `rows`, not by creating one HTML Functional Class per UI property.

```json
{
  "key": "status",
  "cellElement": {
    "renderer": "020",
    "props": { "position": "center" },
    "snapToCell": true
  }
}
```

A row may override it with `$cells.<columnKey>`.

Built-in renderers are `plain / 017 / 018 / 020 / 021 / 029 / 054`; future renderers are registered through `BoneTable.registerCellRenderer()`.

#054 obtains its Property Schema from `BoneDisplayTimeline.getPropertySchema()` and uses post-layout rerendering for geometry-dependent display.


`data-table-show-empty-rows` maps to `showEmptyRows` (default `true`). `data-table-display-row-count` maps to `displayRowCount`, a non-negative integer minimum display-row count (`0` = automatic). When `showEmptyRows` is true, missing rows are padded as value-less rows; real rows are never truncated.

- `data-table-inherit-parent="true|false"` maps to Runtime `inheritParent` (default `true`).

- `data-table-style`: standard / striped / bordered / borderless / hover / compact / striped-hover / striped-bordered / compact-bordered

## #017 Text cell padding in snapped cells

A Table Cell Renderer configured with `renderer:"017"` and `snapToCell:true` retains
10px/12px inset (compact: 6px/9px) between the cell border and Text content.
The special rule is limited to #017; #029 voucher digit dividers and #054 timeline
remain edge-to-edge. The #017 Runtime itself is not modified.

## Version and loading

The test page records Package Version in `<meta name="boneflow:package-version">`.
Runtime and HTML Functional Class scripts are loaded as distinct formal files.
Version query parameters are not appended to JS/CSS URLs.