@duskmoon-dev/el-table 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/dist/cjs/index.js +904 -0
- package/dist/cjs/index.js.map +12 -0
- package/dist/cjs/register.js +907 -0
- package/dist/cjs/register.js.map +13 -0
- package/dist/esm/index.js +872 -0
- package/dist/esm/index.js.map +12 -0
- package/dist/esm/register.js +868 -0
- package/dist/esm/register.js.map +13 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/types/el-dm-table-column.d.ts +59 -0
- package/dist/types/el-dm-table-column.d.ts.map +1 -0
- package/dist/types/el-dm-table.d.ts +186 -0
- package/dist/types/el-dm-table.d.ts.map +1 -0
- package/dist/types/index.d.ts +5 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/register.d.ts +2 -0
- package/dist/types/register.d.ts.map +1 -0
- package/dist/types/types.d.ts +63 -0
- package/dist/types/types.d.ts.map +1 -0
- package/package.json +62 -0
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @duskmoon-dev/el-table
|
|
2
|
+
|
|
3
|
+
A full-featured data table web component with sorting, pagination, and row selection.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @duskmoon-dev/el-table
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Data API
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<el-dm-table id="my-table" paginated selection-mode="multiple" striped></el-dm-table>
|
|
17
|
+
|
|
18
|
+
<script type="module">
|
|
19
|
+
import '@duskmoon-dev/el-table/register';
|
|
20
|
+
|
|
21
|
+
const table = document.getElementById('my-table');
|
|
22
|
+
|
|
23
|
+
table.columns = [
|
|
24
|
+
{ key: 'name', label: 'Name', sortable: true },
|
|
25
|
+
{ key: 'email', label: 'Email', sortable: true },
|
|
26
|
+
{ key: 'role', label: 'Role', width: '120px' },
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
table.data = [
|
|
30
|
+
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
|
|
31
|
+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
|
|
32
|
+
];
|
|
33
|
+
</script>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Declarative API
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<el-dm-table paginated page-size="5">
|
|
40
|
+
<el-dm-table-column key="name" label="Name" sortable></el-dm-table-column>
|
|
41
|
+
<el-dm-table-column key="email" label="Email" sortable></el-dm-table-column>
|
|
42
|
+
<el-dm-table-column key="role" label="Role" width="120px"></el-dm-table-column>
|
|
43
|
+
</el-dm-table>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Properties
|
|
47
|
+
|
|
48
|
+
| Property | Type | Default | Description |
|
|
49
|
+
| ---------------- | ---------------------------------- | --------------------- | ----------------------- |
|
|
50
|
+
| `columns` | `TableColumn[]` | `[]` | Column definitions |
|
|
51
|
+
| `data` | `TableRow[]` | `[]` | Row data |
|
|
52
|
+
| `sort-column` | `string` | - | Current sort column key |
|
|
53
|
+
| `sort-direction` | `'asc' \| 'desc'` | `'asc'` | Sort direction |
|
|
54
|
+
| `paginated` | `boolean` | `false` | Enable pagination |
|
|
55
|
+
| `page` | `number` | `1` | Current page |
|
|
56
|
+
| `page-size` | `number` | `10` | Rows per page |
|
|
57
|
+
| `selection-mode` | `'none' \| 'single' \| 'multiple'` | `'none'` | Selection mode |
|
|
58
|
+
| `striped` | `boolean` | `false` | Alternating row colors |
|
|
59
|
+
| `bordered` | `boolean` | `false` | Cell borders |
|
|
60
|
+
| `hoverable` | `boolean` | `true` | Row hover effect |
|
|
61
|
+
| `compact` | `boolean` | `false` | Reduced padding |
|
|
62
|
+
| `sticky-header` | `boolean` | `false` | Fixed header on scroll |
|
|
63
|
+
| `loading` | `boolean` | `false` | Loading state |
|
|
64
|
+
| `empty-message` | `string` | `'No data available'` | Empty state text |
|
|
65
|
+
|
|
66
|
+
## Events
|
|
67
|
+
|
|
68
|
+
| Event | Detail | Description |
|
|
69
|
+
| ------------- | ------------------------------- | ---------------------------- |
|
|
70
|
+
| `sort` | `{ column, direction }` | Fired when sort changes |
|
|
71
|
+
| `select` | `{ selectedIds, selectedRows }` | Fired when selection changes |
|
|
72
|
+
| `page-change` | `{ page, pageSize }` | Fired when page changes |
|
|
73
|
+
| `row-click` | `{ row, rowIndex }` | Fired when row is clicked |
|
|
74
|
+
|
|
75
|
+
## CSS Custom Properties
|
|
76
|
+
|
|
77
|
+
The table uses CSS custom properties from `@duskmoon-dev/el-core` theme:
|
|
78
|
+
|
|
79
|
+
- `--color-surface` - Table background
|
|
80
|
+
- `--color-surface-variant` - Header/stripe background
|
|
81
|
+
- `--color-on-surface` - Text color
|
|
82
|
+
- `--color-outline` - Border color
|
|
83
|
+
- `--color-primary` - Sort indicator, selection highlight
|
|
84
|
+
- `--radius-md` - Border radius
|