svelte-tably 1.0.0-next.0 → 1.0.0-next.1
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 +56 -2
- package/dist/Table/Table.svelte +4 -1
- package/package.json +6 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# svelte-tably
|
|
2
2
|
|
|
3
|
-
Work in progress. I needed a break from my primary project, so here's a little side-project exploring
|
|
3
|
+
Work in progress. I needed a break from my primary project, so here's a little side-project exploring the amazing capabilities of Svelte 5 with a Dynamic table!
|
|
4
|
+
|
|
5
|
+
Example on [Svelte 5 Playground](https://svelte.dev/playground/a16d71c97445455e80a55b77ec1cf915?version=5)
|
|
4
6
|
|
|
5
7
|
A high performant dynamic table
|
|
6
8
|
|
|
@@ -16,4 +18,56 @@ A high performant dynamic table
|
|
|
16
18
|
- [ ] filtering
|
|
17
19
|
- [ ] orderable table
|
|
18
20
|
- [ ] row context-menu
|
|
19
|
-
- [ ] dropout section
|
|
21
|
+
- [ ] dropout section
|
|
22
|
+
|
|
23
|
+
### Usage Notes
|
|
24
|
+
|
|
25
|
+
Simple example.
|
|
26
|
+
|
|
27
|
+
Create a state for your data and a state for your active panel:
|
|
28
|
+
|
|
29
|
+
```markdown
|
|
30
|
+
<script lang='ts'>
|
|
31
|
+
import { Table } from '$lib/index.js'
|
|
32
|
+
|
|
33
|
+
const data = $state([
|
|
34
|
+
{ name: 'John Doe', age: 30, email: 'johndoe@example.com' },
|
|
35
|
+
{ name: 'Jane Doe', age: 25, email: 'janedoe@example.com' },
|
|
36
|
+
])
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<Table {data}>
|
|
40
|
+
<Table.Name>
|
|
41
|
+
{#snippet header()}
|
|
42
|
+
Name
|
|
43
|
+
{/snippet}
|
|
44
|
+
{#snippet row(item)}
|
|
45
|
+
{item.name}
|
|
46
|
+
{/snippet}
|
|
47
|
+
</Table.Name>
|
|
48
|
+
<Table.Age>
|
|
49
|
+
{#snippet header()}
|
|
50
|
+
Age
|
|
51
|
+
{/snippet}
|
|
52
|
+
{#snippet row(item)}
|
|
53
|
+
{item.age}
|
|
54
|
+
{/snippet}
|
|
55
|
+
</Table.Age>
|
|
56
|
+
<Table.Email>
|
|
57
|
+
{#snippet header()}
|
|
58
|
+
Email
|
|
59
|
+
{/snippet}
|
|
60
|
+
{#snippet row(item)}
|
|
61
|
+
{item.email}
|
|
62
|
+
{/snippet}
|
|
63
|
+
</Table.Email>
|
|
64
|
+
</Table>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
To create a column, simply add a new `<Table.ColumnName>` component inside the `<Table>` component. Replace `ColumnName` with the actual name of the column you want to create.
|
|
68
|
+
|
|
69
|
+
Inside the column component, you need to define three snippets:
|
|
70
|
+
|
|
71
|
+
* `header`: the content of the column header
|
|
72
|
+
* `row`: the content of each row in the column
|
|
73
|
+
* `statusbar`: (optional) the content of the status bar for the column
|
package/dist/Table/Table.svelte
CHANGED
|
@@ -49,10 +49,12 @@
|
|
|
49
49
|
let {
|
|
50
50
|
children,
|
|
51
51
|
panel,
|
|
52
|
-
data = [],
|
|
52
|
+
data: _data = [],
|
|
53
53
|
id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
|
|
54
54
|
}: Props = $props()
|
|
55
55
|
|
|
56
|
+
const data = $derived(_data.toSorted())
|
|
57
|
+
|
|
56
58
|
const table: TableState<T> = $state({
|
|
57
59
|
columns: {},
|
|
58
60
|
panels: {},
|
|
@@ -281,6 +283,7 @@
|
|
|
281
283
|
display: grid;
|
|
282
284
|
overflow: auto;
|
|
283
285
|
scrollbar-width: thin;
|
|
286
|
+
background-color: hsla(0, 0%, 100%);
|
|
284
287
|
}
|
|
285
288
|
|
|
286
289
|
.statusbar {
|
package/package.json
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-tably",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.1",
|
|
4
|
+
"repository": "github:refzlund/svelte-tably",
|
|
5
|
+
"homepage": "https://github.com/Refzlund/svelte-tably",
|
|
6
|
+
"bugs": {
|
|
7
|
+
"url": "https://github.com/Refzlund/svelte-tably/issues"
|
|
8
|
+
},
|
|
4
9
|
"devDependencies": {
|
|
5
10
|
"@sveltejs/adapter-auto": "^3.0.0",
|
|
6
11
|
"@sveltejs/kit": "^2.9.0",
|