@svgrid/create 2.2.1 → 2.2.2

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.
Files changed (4) hide show
  1. package/index.mjs +1 -1
  2. package/package.json +2 -2
  3. package/templates/admin-dashboard/_package.json +1 -1
  4. package/templates/minimal/src/App.svelte +54 -61
package/index.mjs CHANGED
@@ -289,7 +289,7 @@ async function main() {
289
289
  if (!template) {
290
290
  if (interactive) {
291
291
  stdout.write(`\n Templates:\n`)
292
- Object.entries(TEMPLATES).forEach(([k, t], i) => {
292
+ Object.entries(TEMPLATES).forEach(([, t], i) => {
293
293
  stdout.write(` ${color('cyan', String(i + 1))}. ${t.label}\n`)
294
294
  })
295
295
  const pick = await ask('\nChoose a template (1-2):', '1')
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "type": "commercial",
5
5
  "url": "https://svgrid.com/pricing"
6
6
  },
7
- "version": "2.2.1",
7
+ "version": "2.2.2",
8
8
  "description": "Scaffold a Svelte app powered by SvGrid in one command: npm create @svgrid@latest",
9
9
  "type": "module",
10
10
  "license": "MIT",
@@ -36,7 +36,7 @@
36
36
  "node": ">=18"
37
37
  },
38
38
  "dependencies": {
39
- "@svgrid/grid": "^2.2.27"
39
+ "@svgrid/grid": "^2.2.33"
40
40
  },
41
41
  "scripts": {
42
42
  "sync-templates": "node sync-templates.mjs"
package/templates/admin-dashboard/_package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
12
12
  },
13
13
  "devDependencies": {
14
- "@sveltejs/adapter-vercel": "^5.5.0",
14
+ "@sveltejs/adapter-vercel": "^6.3.2",
15
15
  "@sveltejs/kit": "^2.15.0",
16
16
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
17
17
  "@tailwindcss/vite": "^4.2.4",
package/templates/minimal/src/App.svelte CHANGED
@@ -1,61 +1,54 @@
1
- <script>
2
- import {
3
- SvGrid,
4
- tableFeatures,
5
- rowSortingFeature,
6
- columnFilteringFeature,
7
- rowSelectionFeature,
8
- } from '@svgrid/grid'
9
-
10
- const features = tableFeatures({
11
- rowSortingFeature,
12
- columnFilteringFeature,
13
- rowSelectionFeature,
14
- })
15
-
16
- // Your data. Swap for a fetch() in onMount, a store, or props.
17
- let rows = $state([
18
- { id: 1, name: 'Ada Lovelace', team: 'Engineering', salary: 145000, active: true },
19
- { id: 2, name: 'Alan Turing', team: 'Research', salary: 160000, active: true },
20
- { id: 3, name: 'Grace Hopper', team: 'Engineering', salary: 152000, active: false },
21
- { id: 4, name: 'Katherine Johnson', team: 'Data', salary: 138000, active: true },
22
- { id: 5, name: 'Edsger Dijkstra', team: 'Research', salary: 149000, active: false },
23
- ])
24
-
25
- const columns = [
26
- { field: 'name', header: 'Name', editorType: 'text', width: 200 },
27
- { field: 'team', header: 'Team', editorType: 'text', width: 150 },
28
- {
29
- field: 'salary',
30
- header: 'Salary',
31
- width: 130,
32
- align: 'right',
33
- format: { type: 'currency', currency: 'USD' },
34
- },
35
- { field: 'active', header: 'Active', editorType: 'checkbox', width: 90 },
36
- ]
37
- </script>
38
-
39
- <main style="max-width: 720px; margin: 3rem auto; font-family: system-ui, sans-serif;">
40
- <h1 style="font-size: 1.4rem;">SvGrid</h1>
41
- <p style="color:#64748b;">
42
- Sort, filter, select, and double-click a cell to edit. Edit
43
- <code>src/App.svelte</code> to make it yours.
44
- </p>
45
-
46
- <div style="height: 320px;">
47
- <SvGrid
48
- data={rows}
49
- {columns}
50
- {features}
51
- filterMode="menu"
52
- selectionMode="row"
53
- showRowSelection={true}
54
- showRowNumbers={true}
55
- enableInlineEditing={true}
56
- rowHeight={38}
57
- containerHeight="100%"
58
- fitColumns={true}
59
- />
60
- </div>
61
- </main>
1
+ <script>
2
+ import { SvGrid } from '@svgrid/grid'
3
+
4
+ // Capabilities are boolean props - `sortable`, `filterable`, `editable`,
5
+ // `groupable`, `pageable` - and each injects the feature it needs. For finer
6
+ // control you can register features explicitly with `tableFeatures({ ... })`
7
+ // and pass them as `features`; see docs/getting-started/4-features.md.
8
+
9
+ // Your data. Swap for a fetch() in onMount, a store, or props.
10
+ let rows = $state([
11
+ { id: 1, name: 'Ada Lovelace', team: 'Engineering', salary: 145000, active: true },
12
+ { id: 2, name: 'Alan Turing', team: 'Research', salary: 160000, active: true },
13
+ { id: 3, name: 'Grace Hopper', team: 'Engineering', salary: 152000, active: false },
14
+ { id: 4, name: 'Katherine Johnson', team: 'Data', salary: 138000, active: true },
15
+ { id: 5, name: 'Edsger Dijkstra', team: 'Research', salary: 149000, active: false },
16
+ ])
17
+
18
+ const columns = [
19
+ { field: 'name', header: 'Name', editorType: 'text', width: 200 },
20
+ { field: 'team', header: 'Team', editorType: 'text', width: 150 },
21
+ {
22
+ field: 'salary',
23
+ header: 'Salary',
24
+ width: 130,
25
+ align: 'right',
26
+ format: { type: 'currency', currency: 'USD' },
27
+ },
28
+ { field: 'active', header: 'Active', editorType: 'checkbox', width: 90 },
29
+ ]
30
+ </script>
31
+
32
+ <main style="max-width: 720px; margin: 3rem auto; font-family: system-ui, sans-serif;">
33
+ <h1 style="font-size: 1.4rem;">SvGrid</h1>
34
+ <p style="color:#64748b;">
35
+ Sort, filter, select, and double-click a cell to edit. Edit
36
+ <code>src/App.svelte</code> to make it yours.
37
+ </p>
38
+
39
+ <div style="height: 320px;">
40
+ <SvGrid
41
+ data={rows}
42
+ {columns}
43
+ sortable
44
+ filterable
45
+ editable
46
+ selectionMode="row"
47
+ showRowSelection={true}
48
+ showRowNumbers={true}
49
+ rowHeight={38}
50
+ containerHeight="100%"
51
+ fitColumns={true}
52
+ />
53
+ </div>
54
+ </main>