@inandu-solutions/grid-vue 0.1.0 → 0.2.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 +196 -159
- package/dist/components/InanduGrid.vue.d.ts +7 -1
- package/dist/composables/useInanduGrid.d.ts +24 -0
- package/dist/composables/useInanduGridServer.d.ts +53 -0
- package/dist/inandu-grid-vue.cjs +3 -3
- package/dist/inandu-grid-vue.js +688 -607
- package/dist/index.d.ts +3 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,159 +1,196 @@
|
|
|
1
|
-
# inandu-grid-vue
|
|
2
|
-
|
|
3
|
-
**A lightweight Vue 3 data grid with the essentials other grids gate behind a paid enterprise
|
|
4
|
-
licence — row grouping, aggregates, inline editing and Excel-compatible export — fully MIT.** The
|
|
5
|
-
Vue port of [`@inandu-solutions/grid-angular`](https://github.com/inandusolutions/inandu-grid),
|
|
6
|
-
kept in sync feature-for-feature by hand (and with its React sibling,
|
|
7
|
-
[`@inandu-solutions/grid-react`](https://github.com/inandusolutions/inandu-grid-react)).
|
|
8
|
-
|
|
9
|
-
[](https://www.npmjs.com/package/@inandu-solutions/grid-vue)
|
|
10
|
-
[](https://github.com/inandusolutions/inandu-grid-vue/actions/workflows/ci.yml)
|
|
11
|
-
[](LICENSE)
|
|
12
|
-
|
|
13
|
-
[](https://inandusolutions.github.io/inandu-grid-vue/)
|
|
14
|
-
[](https://stackblitz.com/github/inandusolutions/inandu-grid-vue/tree/main/examples/stackblitz)
|
|
15
|
-
|
|
16
|
-
## Try it in 30 seconds
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npm install @inandu-solutions/grid-vue
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
```vue
|
|
23
|
-
<script setup lang="ts">
|
|
24
|
-
import { InanduGrid, type InanduGridColumn } from '@inandu-solutions/grid-vue';
|
|
25
|
-
import '@inandu-solutions/grid-vue/style.css';
|
|
26
|
-
|
|
27
|
-
const rows = [{ name: 'Ada', age: 36 }, { name: 'Alan', age: 41 }];
|
|
28
|
-
const columns: InanduGridColumn[] = [{ field: 'name', headerText: 'Name' }, { field: 'age', headerText: 'Age', type: 'number' }];
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<template>
|
|
32
|
-
<!-- sorting + filtering are on by default -->
|
|
33
|
-
<InanduGrid :rows="rows" :columns="columns" :page-size="25" />
|
|
34
|
-
</template>
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
- **▶️ [Live demo](https://inandusolutions.github.io/inandu-grid-vue/)** — try every feature in the browser.
|
|
38
|
-
- **⚡ [Edit in StackBlitz](https://stackblitz.com/github/inandusolutions/inandu-grid-vue/tree/main/examples/stackblitz)** —
|
|
39
|
-
installs `@inandu-solutions/grid-vue` from npm; edit `src/App.vue` and it updates live ([source](examples/stackblitz)).
|
|
40
|
-
- **📦 [`@inandu-solutions/grid-vue` on npm](https://www.npmjs.com/package/@inandu-solutions/grid-vue)**
|
|
41
|
-
(MIT) — `0.x` while the API settles; expect breaking changes between minors until `1.0.0`.
|
|
42
|
-
|
|
43
|
-
## Who is this for?
|
|
44
|
-
|
|
45
|
-
- **CRUD / business apps** that need sortable, filterable, editable tables without pulling in a
|
|
46
|
-
full enterprise grid framework.
|
|
47
|
-
- **Admin dashboards** that need grouping, aggregates and CSV/Excel/PDF export out of the box.
|
|
48
|
-
- **Data-heavy Vue apps** that need virtual scroll
|
|
49
|
-
kitchen-sink grid.
|
|
50
|
-
|
|
51
|
-
**When not to use it:** if you need pivot tables or integrated charting built into the grid itself,
|
|
52
|
-
this isn't that — see [Not included](#not-included) below.
|
|
53
|
-
|
|
54
|
-
## Angular and React versions
|
|
55
|
-
|
|
56
|
-
[`inandu-grid`](https://github.com/inandusolutions/inandu-grid) is the original, feature-complete,
|
|
57
|
-
MIT-licensed Angular grid this repo is ported from, and
|
|
58
|
-
[`inandu-grid-react`](https://github.com/inandusolutions/inandu-grid-react) is its React port — same
|
|
59
|
-
feature set, same core logic, adapted for Vue's composition API (`computed`/`shallowRef`, SFCs,
|
|
60
|
-
scoped slots, emitted events) instead of Angular signals or React hooks.
|
|
61
|
-
|
|
62
|
-
## Not included
|
|
63
|
-
|
|
64
|
-
Deliberately *not* a kitchen sink: no pivoting and no integrated charts — those stay out of scope
|
|
65
|
-
so the core stays small and auditable. Everything else on this page (grouping, aggregates, editing,
|
|
66
|
-
export, virtual scroll) is included, free, no enterprise tier.
|
|
67
|
-
|
|
68
|
-
## Commercial add-ons
|
|
69
|
-
|
|
70
|
-
`@inandu-solutions/grid-pro-vue` *(private, paid, not released yet)* — the Vue port of
|
|
71
|
-
`@inandu-solutions/grid-pro`, depends on this package the same way grid-pro depends on grid-angular.
|
|
72
|
-
|
|
73
|
-
## Features
|
|
74
|
-
|
|
75
|
-
**Feature-complete with grid-angular and grid-react.** The framework-agnostic core (sorting,
|
|
76
|
-
filtering, aggregation, export, i18n) is ported from grid-angular's
|
|
77
|
-
[`core/`](https://github.com/inandusolutions/inandu-grid/tree/main/projects/inandu-grid/src/lib/core)
|
|
78
|
-
folder and kept in sync by hand across the three repos. The Vue-specific layer — the
|
|
79
|
-
[`<InanduGrid>`](#api-shape) component and the [`useInanduGrid()`](#api-shape) headless
|
|
80
|
-
composable — covers:
|
|
81
|
-
|
|
82
|
-
- Sorting — single-column, or multi-column via shift-click
|
|
83
|
-
- Free-text search and per-column filtering, plus an `extra-row-filter` escape hatch for your own predicates
|
|
84
|
-
- Pagination, single-column grouping with aggregates, row selection
|
|
85
|
-
- CSV / Excel (`.xls`) / PDF export, and print
|
|
86
|
-
- i18n — 5 built-in languages via a `lang` prop
|
|
87
|
-
- Inline row editing, creation and deletion, with validation (required / min / max / pattern / custom / async)
|
|
88
|
-
- Excel-style Ctrl+C / Ctrl+V clipboard copy/paste
|
|
89
|
-
- Runtime column show/hide, sticky (pinned left/right) columns, drag-reorder
|
|
90
|
-
- Column resize (drag a header's handle) and autosize (double-click it to fit content)
|
|
91
|
-
- Row drag-reorder
|
|
92
|
-
- Tree data (`tree-children-key`) — display and expand only, no inline editing/drag/clipboard on
|
|
93
|
-
tree rows, same restriction as grid-angular
|
|
94
|
-
- Master-detail — a `#detail="{ row }"` slot (or a `renderDetail` render-function prop)
|
|
95
|
-
- Custom cell / header / edit-control rendering per column — `#cell-<field>`, `#header-<field>` and
|
|
96
|
-
`#editor-<field>` scoped slots, or `renderCell` / `renderHeader` / `renderEditor` render functions
|
|
97
|
-
on the column definition — without losing sorting, resizing, or validation
|
|
98
|
-
- Excel-style cell range selection (`cell-range-selection`, `multi-range`) — click-and-drag or
|
|
99
|
-
shift-click across cells to select a rectangular block; `Ctrl+C` copies the whole range as TSV
|
|
100
|
-
when `clipboard` is also on
|
|
101
|
-
- Row virtualization (`virtual-scroll`) for large datasets
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
import '
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
1
|
+
# inandu-grid-vue
|
|
2
|
+
|
|
3
|
+
**A lightweight Vue 3 data grid with the essentials other grids gate behind a paid enterprise
|
|
4
|
+
licence — row grouping, aggregates, inline editing and Excel-compatible export — fully MIT.** The
|
|
5
|
+
Vue port of [`@inandu-solutions/grid-angular`](https://github.com/inandusolutions/inandu-grid),
|
|
6
|
+
kept in sync feature-for-feature by hand (and with its React sibling,
|
|
7
|
+
[`@inandu-solutions/grid-react`](https://github.com/inandusolutions/inandu-grid-react)).
|
|
8
|
+
|
|
9
|
+
[](https://www.npmjs.com/package/@inandu-solutions/grid-vue)
|
|
10
|
+
[](https://github.com/inandusolutions/inandu-grid-vue/actions/workflows/ci.yml)
|
|
11
|
+
[](LICENSE)
|
|
12
|
+
|
|
13
|
+
[](https://inandusolutions.github.io/inandu-grid-vue/)
|
|
14
|
+
[](https://stackblitz.com/github/inandusolutions/inandu-grid-vue/tree/main/examples/stackblitz)
|
|
15
|
+
|
|
16
|
+
## Try it in 30 seconds
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @inandu-solutions/grid-vue
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```vue
|
|
23
|
+
<script setup lang="ts">
|
|
24
|
+
import { InanduGrid, type InanduGridColumn } from '@inandu-solutions/grid-vue';
|
|
25
|
+
import '@inandu-solutions/grid-vue/style.css';
|
|
26
|
+
|
|
27
|
+
const rows = [{ name: 'Ada', age: 36 }, { name: 'Alan', age: 41 }];
|
|
28
|
+
const columns: InanduGridColumn[] = [{ field: 'name', headerText: 'Name' }, { field: 'age', headerText: 'Age', type: 'number' }];
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<template>
|
|
32
|
+
<!-- sorting + filtering are on by default -->
|
|
33
|
+
<InanduGrid :rows="rows" :columns="columns" :page-size="25" />
|
|
34
|
+
</template>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
- **▶️ [Live demo](https://inandusolutions.github.io/inandu-grid-vue/)** — try every feature in the browser.
|
|
38
|
+
- **⚡ [Edit in StackBlitz](https://stackblitz.com/github/inandusolutions/inandu-grid-vue/tree/main/examples/stackblitz)** —
|
|
39
|
+
installs `@inandu-solutions/grid-vue` from npm; edit `src/App.vue` and it updates live ([source](examples/stackblitz)).
|
|
40
|
+
- **📦 [`@inandu-solutions/grid-vue` on npm](https://www.npmjs.com/package/@inandu-solutions/grid-vue)**
|
|
41
|
+
(MIT) — `0.x` while the API settles; expect breaking changes between minors until `1.0.0`.
|
|
42
|
+
|
|
43
|
+
## Who is this for?
|
|
44
|
+
|
|
45
|
+
- **CRUD / business apps** that need sortable, filterable, editable tables without pulling in a
|
|
46
|
+
full enterprise grid framework.
|
|
47
|
+
- **Admin dashboards** that need grouping, aggregates and CSV/Excel/PDF export out of the box.
|
|
48
|
+
- **Data-heavy Vue apps** that need virtual scroll, or server-side sort / filter / paging against a
|
|
49
|
+
backend (see [Server-side data](#server-side-data)), without the bundle size of a kitchen-sink grid.
|
|
50
|
+
|
|
51
|
+
**When not to use it:** if you need pivot tables or integrated charting built into the grid itself,
|
|
52
|
+
this isn't that — see [Not included](#not-included) below.
|
|
53
|
+
|
|
54
|
+
## Angular and React versions
|
|
55
|
+
|
|
56
|
+
[`inandu-grid`](https://github.com/inandusolutions/inandu-grid) is the original, feature-complete,
|
|
57
|
+
MIT-licensed Angular grid this repo is ported from, and
|
|
58
|
+
[`inandu-grid-react`](https://github.com/inandusolutions/inandu-grid-react) is its React port — same
|
|
59
|
+
feature set, same core logic, adapted for Vue's composition API (`computed`/`shallowRef`, SFCs,
|
|
60
|
+
scoped slots, emitted events) instead of Angular signals or React hooks.
|
|
61
|
+
|
|
62
|
+
## Not included
|
|
63
|
+
|
|
64
|
+
Deliberately *not* a kitchen sink: no pivoting and no integrated charts — those stay out of scope
|
|
65
|
+
so the core stays small and auditable. Everything else on this page (grouping, aggregates, editing,
|
|
66
|
+
export, virtual scroll, paged server-side mode) is included, free, no enterprise tier.
|
|
67
|
+
|
|
68
|
+
## Commercial add-ons
|
|
69
|
+
|
|
70
|
+
`@inandu-solutions/grid-pro-vue` *(private, paid, not released yet)* — the Vue port of
|
|
71
|
+
`@inandu-solutions/grid-pro`, depends on this package the same way grid-pro depends on grid-angular.
|
|
72
|
+
|
|
73
|
+
## Features
|
|
74
|
+
|
|
75
|
+
**Feature-complete with grid-angular and grid-react.** The framework-agnostic core (sorting,
|
|
76
|
+
filtering, aggregation, export, i18n) is ported from grid-angular's
|
|
77
|
+
[`core/`](https://github.com/inandusolutions/inandu-grid/tree/main/projects/inandu-grid/src/lib/core)
|
|
78
|
+
folder and kept in sync by hand across the three repos. The Vue-specific layer — the
|
|
79
|
+
[`<InanduGrid>`](#api-shape) component and the [`useInanduGrid()`](#api-shape) headless
|
|
80
|
+
composable — covers:
|
|
81
|
+
|
|
82
|
+
- Sorting — single-column, or multi-column via shift-click
|
|
83
|
+
- Free-text search and per-column filtering, plus an `extra-row-filter` escape hatch for your own predicates
|
|
84
|
+
- Pagination, single-column grouping with aggregates, row selection
|
|
85
|
+
- CSV / Excel (`.xls`) / PDF export, and print
|
|
86
|
+
- i18n — 5 built-in languages via a `lang` prop
|
|
87
|
+
- Inline row editing, creation and deletion, with validation (required / min / max / pattern / custom / async)
|
|
88
|
+
- Excel-style Ctrl+C / Ctrl+V clipboard copy/paste
|
|
89
|
+
- Runtime column show/hide, sticky (pinned left/right) columns, drag-reorder
|
|
90
|
+
- Column resize (drag a header's handle) and autosize (double-click it to fit content)
|
|
91
|
+
- Row drag-reorder
|
|
92
|
+
- Tree data (`tree-children-key`) — display and expand only, no inline editing/drag/clipboard on
|
|
93
|
+
tree rows, same restriction as grid-angular
|
|
94
|
+
- Master-detail — a `#detail="{ row }"` slot (or a `renderDetail` render-function prop)
|
|
95
|
+
- Custom cell / header / edit-control rendering per column — `#cell-<field>`, `#header-<field>` and
|
|
96
|
+
`#editor-<field>` scoped slots, or `renderCell` / `renderHeader` / `renderEditor` render functions
|
|
97
|
+
on the column definition — without losing sorting, resizing, or validation
|
|
98
|
+
- Excel-style cell range selection (`cell-range-selection`, `multi-range`) — click-and-drag or
|
|
99
|
+
shift-click across cells to select a rectangular block; `Ctrl+C` copies the whole range as TSV
|
|
100
|
+
when `clipboard` is also on
|
|
101
|
+
- Row virtualization (`virtual-scroll`) for large datasets
|
|
102
|
+
- Server-side sort / search / filter / paging (`server-side` + `useInanduGridServer`) — paged only;
|
|
103
|
+
grid-angular's server-side infinite scroll isn't ported. See [Server-side data](#server-side-data)
|
|
104
|
+
|
|
105
|
+
Two things work slightly differently from grid-angular because they need a real browser layout
|
|
106
|
+
engine that a unit-test environment can't provide: virtual scroll's row height isn't
|
|
107
|
+
auto-measured — pass `virtual-row-height` explicitly — and autosize's content measurement itself is
|
|
108
|
+
trusted (ported verbatim, same DOM APIs) rather than end-to-end tested; see
|
|
109
|
+
[`measureColumn.ts`](src/utils/measureColumn.ts)'s doc comment for exactly what its test suite does
|
|
110
|
+
and doesn't cover.
|
|
111
|
+
|
|
112
|
+
## API shape
|
|
113
|
+
|
|
114
|
+
```vue
|
|
115
|
+
<script setup lang="ts">
|
|
116
|
+
import { useTemplateRef } from 'vue';
|
|
117
|
+
import { InanduGrid, useInanduGrid, type InanduGridRowSave } from '@inandu-solutions/grid-vue';
|
|
118
|
+
import '@inandu-solutions/grid-vue/style.css'; // optional default styling — skip it and bring your own
|
|
119
|
+
|
|
120
|
+
// Component: batteries-included table. The grid never mutates `rows` — events hand you the change.
|
|
121
|
+
function onRowSave({ row, values }: InanduGridRowSave) {
|
|
122
|
+
rows.value = rows.value.map(r => (r === row ? { ...r, ...values } : r));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Its headless engine is exposed on a template ref, for programmatic control.
|
|
126
|
+
const gridRef = useTemplateRef('grid');
|
|
127
|
+
const sortByName = () => gridRef.value?.grid.toggleSort('name');
|
|
128
|
+
|
|
129
|
+
// Composable: headless — bring your own markup. Pass a getter to follow reactive data; every
|
|
130
|
+
// piece of state is a reactive getter (`headless.visibleRows`, no `.value`).
|
|
131
|
+
const headless = useInanduGrid(() => ({ rows: rows.value, columns, pageSize: 25 }));
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<template>
|
|
135
|
+
<InanduGrid ref="grid" :rows="rows" :columns="columns" selectable @row-save="onRowSave" @selection-change="selected = $event">
|
|
136
|
+
<template #cell-status="{ value }"><StatusBadge :status="value" /></template>
|
|
137
|
+
<template #detail="{ row }"><OrderLines :order="row" /></template>
|
|
138
|
+
</InanduGrid>
|
|
139
|
+
</template>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
Events: `selection-change`, `row-save`, `row-create`, `row-delete`, `rows-delete`, `cells-paste`,
|
|
143
|
+
`row-order-change`, `cell-range-change`, `cell-ranges-change`.
|
|
144
|
+
|
|
145
|
+
## Server-side data
|
|
146
|
+
|
|
147
|
+
For tables too big to load whole, let the backend sort, filter and page, and keep the grid's UI
|
|
148
|
+
unchanged:
|
|
149
|
+
|
|
150
|
+
```vue
|
|
151
|
+
<script setup lang="ts">
|
|
152
|
+
import { InanduGrid, useInanduGridServer } from '@inandu-solutions/grid-vue';
|
|
153
|
+
|
|
154
|
+
const server = useInanduGridServer({ url: '/api/products' });
|
|
155
|
+
</script>
|
|
156
|
+
|
|
157
|
+
<template>
|
|
158
|
+
<InanduGrid
|
|
159
|
+
:rows="server.rows.value"
|
|
160
|
+
:columns="columns"
|
|
161
|
+
:page-size="25"
|
|
162
|
+
:server-side="{ totalItems: server.total.value }"
|
|
163
|
+
@query-change="server.setQuery"
|
|
164
|
+
/>
|
|
165
|
+
</template>
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
`useInanduGridServer` turns the grid's page / sort / search / column filters into a query string
|
|
169
|
+
(`?page=2&pageSize=25&sort=-price&q=cable&price_gte=20`), aborts superseded requests, debounces typing,
|
|
170
|
+
and keeps the previous page on screen while the next loads. It expects `{ data: [...], total: n }`.
|
|
171
|
+
That is exactly what [`Inandu.Grid.Extensions`](https://github.com/inandusolutions/inandu-grid-extensions)
|
|
172
|
+
(.NET / EF Core) returns from one `ToInanduGrid()` call — [request contract](https://github.com/inandusolutions/inandu-grid-extensions/blob/main/docs/request-contract.md) —
|
|
173
|
+
but any backend that speaks the same params works. Runnable example: [`examples/server-side`](examples/server-side).
|
|
174
|
+
|
|
175
|
+
In `serverSide` mode grouping, tree data, virtual scroll, `extraRowFilter` and column aggregate
|
|
176
|
+
totals are off (they would only ever see one page), and a column's Excel-style value checklist lists
|
|
177
|
+
the values on the current page. Use `buildInanduGridQuery(query)` if you'd rather do the fetching
|
|
178
|
+
yourself, and `fetcher` / `init` on the composable for auth headers or a custom client.
|
|
179
|
+
|
|
180
|
+
## Development
|
|
181
|
+
|
|
182
|
+
```bash
|
|
183
|
+
npm install
|
|
184
|
+
npm test # Vitest + Vue Testing Library
|
|
185
|
+
npm run typecheck # vue-tsc --noEmit
|
|
186
|
+
npm run build # library build (dist/)
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Contributing
|
|
190
|
+
|
|
191
|
+
Issues and PRs welcome. Please read [`CONTRIBUTING.md`](CONTRIBUTING.md) first, and note the
|
|
192
|
+
[Code of Conduct](.github/CODE_OF_CONDUCT.md). Security reports: [`.github/SECURITY.md`](.github/SECURITY.md).
|
|
193
|
+
|
|
194
|
+
## License
|
|
195
|
+
|
|
196
|
+
MIT © [Inandu SAS](https://www.inandu.com/)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { VNodeChild } from 'vue';
|
|
2
2
|
import { InanduGridColumnFilterValue, InanduGridRow } from '../core';
|
|
3
|
-
import { InanduCellRenderContext, InanduEditRenderContext, InanduGridCellPaste, InanduGridColumn, InanduGridRowSave, InanduHeaderRenderContext } from '../composables/useInanduGrid';
|
|
3
|
+
import { InanduCellRenderContext, InanduEditRenderContext, InanduGridCellPaste, InanduGridColumn, InanduGridRowSave, InanduGridServerQuery, InanduHeaderRenderContext } from '../composables/useInanduGrid';
|
|
4
4
|
import { InanduGridCellRangeSelection } from './types';
|
|
5
5
|
type __VLS_Props = {
|
|
6
6
|
rows: InanduGridRow[];
|
|
@@ -69,6 +69,10 @@ type __VLS_Props = {
|
|
|
69
69
|
singleDetailExpand?: boolean;
|
|
70
70
|
/** An extra per-row predicate ANDed onto the free-text + column filters — same as grid-angular's `extraRowFilter`. Lets a caller layer its own filtering (e.g. an advanced-filter query) on top of the grid's own. Unset: no extra filtering. */
|
|
71
71
|
extraRowFilter?: (row: InanduGridRow) => boolean;
|
|
72
|
+
/** Server-side mode: `rows` is the current page as sorted/filtered/paged by the server and `totalItems` is the full match count. See `useInanduGridServer`. Needs `pageSize` > 0. */
|
|
73
|
+
serverSide?: {
|
|
74
|
+
totalItems: number;
|
|
75
|
+
};
|
|
72
76
|
/**
|
|
73
77
|
* Opt-in row virtualization for large datasets — only rows scrolled into view (plus a small
|
|
74
78
|
* overscan runway) are actually mounted. Bypasses pagination entirely, same as grouping.
|
|
@@ -187,6 +191,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
|
|
|
187
191
|
pasteAt: (anchorRowIndex: number, anchorField: string, text: string) => void;
|
|
188
192
|
};
|
|
189
193
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
194
|
+
queryChange: (query: InanduGridServerQuery) => any;
|
|
190
195
|
selectionChange: (selectedRows: InanduGridRow[]) => any;
|
|
191
196
|
rowSave: (event: InanduGridRowSave) => any;
|
|
192
197
|
rowCreate: (values: Record<string, unknown>) => any;
|
|
@@ -197,6 +202,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
|
|
|
197
202
|
cellRangesChange: (selections: InanduGridCellRangeSelection[]) => any;
|
|
198
203
|
rowOrderChange: (rows: InanduGridRow[]) => any;
|
|
199
204
|
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
205
|
+
onQueryChange?: ((query: InanduGridServerQuery) => any) | undefined;
|
|
200
206
|
onSelectionChange?: ((selectedRows: InanduGridRow[]) => any) | undefined;
|
|
201
207
|
onRowSave?: ((event: InanduGridRowSave) => any) | undefined;
|
|
202
208
|
onRowCreate?: ((values: Record<string, unknown>) => any) | undefined;
|
|
@@ -77,6 +77,18 @@ export interface InanduGridCellPaste {
|
|
|
77
77
|
field: string;
|
|
78
78
|
value: unknown;
|
|
79
79
|
}
|
|
80
|
+
/**
|
|
81
|
+
* What `onQueryChange` emits in `serverSide` mode: the grid's whole request state, ready for
|
|
82
|
+
* `useInanduGridServer` (or a hand-rolled fetch) to turn into a query string. `page` is 0-based,
|
|
83
|
+
* like the composable's own `page`.
|
|
84
|
+
*/
|
|
85
|
+
export interface InanduGridServerQuery {
|
|
86
|
+
page: number;
|
|
87
|
+
pageSize: number;
|
|
88
|
+
sortCriteria: InanduGridSort[];
|
|
89
|
+
filterValues: Record<string, InanduGridColumnFilterValue>;
|
|
90
|
+
filterQuery: string;
|
|
91
|
+
}
|
|
80
92
|
export interface InanduGridSort {
|
|
81
93
|
field: string;
|
|
82
94
|
direction: 'asc' | 'desc';
|
|
@@ -138,6 +150,18 @@ export interface UseInanduGridOptions {
|
|
|
138
150
|
virtualScroll?: boolean;
|
|
139
151
|
/** An extra per-row predicate ANDed onto the free-text + column filters — same as grid-angular's `extraRowFilter`. Lets a caller layer its own filtering (e.g. an advanced-filter query) on top of the grid's own. Unset: no extra filtering. */
|
|
140
152
|
extraRowFilter?: (row: InanduGridRow) => boolean;
|
|
153
|
+
/**
|
|
154
|
+
* Server-side mode: `rows` is already the current page, as sorted/filtered/paged by the server
|
|
155
|
+
* (see `useInanduGridServer`). The composable keeps owning the sort / filter / search / page
|
|
156
|
+
* *state* so `<InanduGrid>`'s controls work unchanged, but stops applying it to `rows` and reads
|
|
157
|
+
* the page count from `totalItems`. Grouping, tree data, virtual scroll, `extraRowFilter` and
|
|
158
|
+
* column-aggregate totals are not available (they would only see one page). Unset: client-side.
|
|
159
|
+
*/
|
|
160
|
+
serverSide?: {
|
|
161
|
+
totalItems: number;
|
|
162
|
+
};
|
|
163
|
+
/** `serverSide` only: called once on setup and again whenever page, sort, filters or search change. */
|
|
164
|
+
onQueryChange?: (query: InanduGridServerQuery) => void;
|
|
141
165
|
}
|
|
142
166
|
/**
|
|
143
167
|
* Headless engine for the grid: owns sort + per-column filter + pagination state and derives
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { ShallowRef } from 'vue';
|
|
2
|
+
import { InanduGridRow } from '../core';
|
|
3
|
+
import { InanduGridServerQuery } from './useInanduGrid';
|
|
4
|
+
export interface InanduGridQueryOptions {
|
|
5
|
+
/** Extra params appended after the grid's own (a tenant id, a fixed filter, ...). */
|
|
6
|
+
extraParams?: Record<string, string>;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Turns the grid's request state into the query string `Inandu.Grid.Extensions` (the .NET package)
|
|
10
|
+
* parses — the contract is documented at
|
|
11
|
+
* https://github.com/inandusolutions/inandu-grid-extensions/blob/main/docs/request-contract.md.
|
|
12
|
+
*
|
|
13
|
+
* Param order is deterministic (page, pageSize, sort, q, then column filters in field order) so the
|
|
14
|
+
* result can be compared as a plain string.
|
|
15
|
+
*/
|
|
16
|
+
export declare function buildInanduGridQuery(query: InanduGridServerQuery, options?: InanduGridQueryOptions): URLSearchParams;
|
|
17
|
+
export interface InanduGridServerOptions extends InanduGridQueryOptions {
|
|
18
|
+
/** The endpoint, e.g. `/api/products`. The grid's params are appended as a query string. */
|
|
19
|
+
url: string;
|
|
20
|
+
/** Passed to `fetch` (auth headers, `credentials`, ...). */
|
|
21
|
+
init?: RequestInit;
|
|
22
|
+
/** Replaces `fetch` — handy for tests or a typed API client. Must honour `signal`. */
|
|
23
|
+
fetcher?: (url: string, init: RequestInit) => Promise<Response>;
|
|
24
|
+
/** Wait this long after the last change before requesting (typing in the search box). The first request is never delayed. Default: 200. */
|
|
25
|
+
debounceMs?: number;
|
|
26
|
+
}
|
|
27
|
+
export interface InanduGridServerResult {
|
|
28
|
+
/** The current page. The previous page stays here while the next one loads, so the table doesn't flash empty. */
|
|
29
|
+
rows: ShallowRef<InanduGridRow[]>;
|
|
30
|
+
/** Total rows matching the filters, across all pages. Also kept during a reload. */
|
|
31
|
+
total: ShallowRef<number>;
|
|
32
|
+
loading: ShallowRef<boolean>;
|
|
33
|
+
error: ShallowRef<Error | undefined>;
|
|
34
|
+
/** Wire this to `<InanduGrid @query-change>` / `useInanduGrid`'s `onQueryChange`. */
|
|
35
|
+
setQuery: (query: InanduGridServerQuery) => void;
|
|
36
|
+
/** Re-issues the last request (after an edit, say). */
|
|
37
|
+
reload: () => void;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Data layer for `serverSide` mode. Pair it with the grid:
|
|
41
|
+
*
|
|
42
|
+
* ```vue
|
|
43
|
+
* <script setup>
|
|
44
|
+
* const server = useInanduGridServer({ url: '/api/products' });
|
|
45
|
+
* </script>
|
|
46
|
+
* <InanduGrid :rows="server.rows.value" :columns="columns" :page-size="25"
|
|
47
|
+
* :server-side="{ totalItems: server.total.value }" @query-change="server.setQuery" />
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* Expects the `Inandu.Grid.Extensions` response shape, `{ data: [...], total: n }`. A request that
|
|
51
|
+
* is superseded by a newer one is aborted, and a late response from it is ignored.
|
|
52
|
+
*/
|
|
53
|
+
export declare function useInanduGridServer(options: InanduGridServerOptions): InanduGridServerResult;
|