@duskmoon-dev/el-table
A full-featured data table web component with sorting, pagination, and row selection.
Installation
npm install @duskmoon-dev/el-table
Usage
Data API
<el-dm-table id="my-table" paginated selection-mode="multiple" striped></el-dm-table>
<script type="module">
import '@duskmoon-dev/el-table/register';
const table = document.getElementById('my-table');
table.columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'email', label: 'Email', sortable: true },
{ key: 'role', label: 'Role', width: '120px' },
];
table.data = [
{ id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' },
{ id: 2, name: 'Jane Smith', email: '[email protected]', role: 'User' },
];
</script>
Declarative API
<el-dm-table paginated page-size="5">
<el-dm-table-column key="name" label="Name" sortable></el-dm-table-column>
<el-dm-table-column key="email" label="Email" sortable></el-dm-table-column>
<el-dm-table-column key="role" label="Role" width="120px"></el-dm-table-column>
</el-dm-table>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
columns | TableColumn[] | [] | Column definitions |
data | TableRow[] | [] | Row data |
sort-column | string | - | Current sort column key |
sort-direction | 'asc' | 'desc' | 'asc' | Sort direction |
paginated | boolean | false | Enable pagination |
page | number | 1 | Current page |
page-size | number | 10 | Rows per page |
selection-mode | 'none' | 'single' | 'multiple' | 'none' | Selection mode |
striped | boolean | false | Alternating row colors |
bordered | boolean | false | Cell borders |
hoverable | boolean | true | Row hover effect |
compact | boolean | false | Reduced padding |
sticky-header | boolean | false | Fixed header on scroll |
loading | boolean | false | Loading state |
empty-message | string | 'No data available' | Empty state text |
Events
| Event | Detail | Description |
|---|---|---|
sort | { column, direction } | Fired when sort changes |
select | { selectedIds, selectedRows } | Fired when selection changes |
page-change | { page, pageSize } | Fired when page changes |
row-click | { row, rowIndex } | Fired when row is clicked |
CSS Custom Properties
The table uses CSS custom properties from @duskmoon-dev/el-base theme:
--color-surface- Table background--color-surface-variant- Header/stripe background--color-on-surface- Text color--color-outline- Border color--color-primary- Sort indicator, selection highlight--radius-md- Border radius