# Source: `components/velin-data-table.js` ## Minimal working example Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed): ```html Filter

Team

Name	Score
Ada	98
Grace	95

``` ## Accessibility WCAG contract status: **pass** (framework target: AAA). - **Roles:** `button` - **Keyboard:** Sort buttons; editable cells: Enter/F2 edit, Escape cancel; pagination - **Live region:** `polite` - **Reduced motion:** honored - **Notes:** Enhances a light-DOM table. Optional editable attribute or data-editable cells for inline edit (velin-data-table-edit). No virtualization in v1. ## Attributes | Attribute | Notes | | --- | --- | | `page-size` | Observed — triggers `attributeChangedCallback` when changed | | `filter-input` | Observed — triggers `attributeChangedCallback` when changed | | `empty-text` | Observed — triggers `attributeChangedCallback` when changed | | `label` | Observed — triggers `attributeChangedCallback` when changed | | `editable` | Observed — triggers `attributeChangedCallback` when changed | ## Events - `velin-data-table-edit` (bubbles) - `velin-data-table-filter` (bubbles) - `velin-data-table-page` (bubbles) - `velin-data-table-sort` (bubbles) ## CSS parts _None._ ## Slots _None._ ## Public API | Kind | Name | | --- | --- | | Method | `filter()` | | Method | `goToPage()` | | Method | `sort()` | | Property | `matchingRows` | | Property | `page` | | Property | `pageCount` | | Property | `pageSize` | | Property | `rows` | | Property | `visibleRows` |