dt-vue 0.1.0 → 0.3.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 +249 -42
- package/dist/index.js +1036 -681
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/types/index.d.ts +383 -302
package/README.md
CHANGED
|
@@ -14,7 +14,8 @@ utilities. Columns are written as components, not config objects:
|
|
|
14
14
|
Sorting, debounced global search, pagination, grouping with aggregates, a totals row, nested rows,
|
|
15
15
|
shift/drag range selection and Excel export are built in.
|
|
16
16
|
|
|
17
|
-
> **Status: 0.x, pre-release.** The API is still moving.
|
|
17
|
+
> **Status: 0.x, pre-release.** The API is still moving. Coming from 0.2? Read
|
|
18
|
+
> [Upgrading from 0.2](#upgrading-from-02) first: 0.3 changes colours, defaults and labels.
|
|
18
19
|
|
|
19
20
|
## Install
|
|
20
21
|
|
|
@@ -22,7 +23,7 @@ shift/drag range selection and Excel export are built in.
|
|
|
22
23
|
npm i dt-vue @tanstack/vue-table @heroicons/vue
|
|
23
24
|
```
|
|
24
25
|
|
|
25
|
-
`xlsx` is an **optional** peer — install it only if you want Excel export. It is loaded with a dynamic
|
|
26
|
+
`@heroicons/vue` must be 2.1 or later (the table uses the 16px icon set). `xlsx` is an **optional** peer — install it only if you want Excel export. It is loaded with a dynamic
|
|
26
27
|
import, so apps that never export do not pay for it in their bundle.
|
|
27
28
|
|
|
28
29
|
```bash
|
|
@@ -52,6 +53,8 @@ export default {
|
|
|
52
53
|
@source "../node_modules/dt-vue/dist";
|
|
53
54
|
```
|
|
54
55
|
|
|
56
|
+
The classes the table uses need **Tailwind 3.4 or later** in your app (`size-7`, `min-w-7`).
|
|
57
|
+
|
|
55
58
|
**3. Import the components** where you need them, or register globally:
|
|
56
59
|
|
|
57
60
|
```js
|
|
@@ -62,22 +65,49 @@ app.use(DtVue)
|
|
|
62
65
|
|
|
63
66
|
## Theming
|
|
64
67
|
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
The table is coloured by eleven tokens with neutral grey defaults, so it looks finished before any theming. The
|
|
69
|
+
card, header band, row washes and group rows all read them. Neutrals that are not part of a theme (body text,
|
|
70
|
+
control borders) use stock Tailwind greys. Override any token on `:root`, or on an ancestor element to scope a
|
|
71
|
+
theme to part of the page:
|
|
67
72
|
|
|
68
73
|
```css
|
|
69
74
|
:root {
|
|
70
|
-
--dt-accent: #
|
|
71
|
-
--dt-accent-strong: #
|
|
72
|
-
--dt-
|
|
73
|
-
--dt-
|
|
74
|
-
--dt-focus-border: #
|
|
75
|
-
--dt-focus-ring: rgb(
|
|
76
|
-
--dt-action: #4f46e5;
|
|
77
|
-
--dt-action-fg: #ffffff;
|
|
75
|
+
--dt-accent: #4786eb;
|
|
76
|
+
--dt-accent-strong: #2d60b3;
|
|
77
|
+
--dt-selected: #f0f6ff;
|
|
78
|
+
--dt-hover: #f0f6ff;
|
|
79
|
+
--dt-focus-border: #629dfc;
|
|
80
|
+
--dt-focus-ring: rgb(71 134 235 / 0.2);
|
|
78
81
|
}
|
|
79
82
|
```
|
|
80
83
|
|
|
84
|
+
| Token | Default | Used for |
|
|
85
|
+
| -------------------- | ------------------------------- | --------------------------------------------------------------------- |
|
|
86
|
+
| `--dt-accent` | `#374151` (gray-700) | Sorted column arrow, checkboxes, pressed group-by border, loading line |
|
|
87
|
+
| `--dt-accent-strong` | `#111827` (gray-900) | Text on a wash: the pressed group-by label and the current page |
|
|
88
|
+
| `--dt-focus-border` | `#9ca3af` (gray-400) | Search box and Rows select border while focused |
|
|
89
|
+
| `--dt-focus-ring` | `rgb(156 163 175 / 0.25)` | Focus rings on inputs, buttons and headers |
|
|
90
|
+
| `--dt-selected` | `#f3f4f6` (gray-100) | Selected rows, the pressed group-by toggle, the current page |
|
|
91
|
+
| `--dt-hover` | `#f9fafb` (gray-50) | Row hover |
|
|
92
|
+
| `--dt-header-bg` | `#f9fafb` (gray-50) | The header band |
|
|
93
|
+
| `--dt-border` | `#e5e7eb` (gray-200) | Card edge, header rule, row hairlines, pager rule |
|
|
94
|
+
| `--dt-radius` | `0.5rem` | Card corner radius |
|
|
95
|
+
| `--dt-shadow` | `0 1px 2px 0 rgb(16 24 40 / 0.05)` | Card shadow, a full `box-shadow` value |
|
|
96
|
+
| `--dt-group-bg` | `#f9fafb` (gray-50) | Group heading rows and grouped rows |
|
|
97
|
+
|
|
98
|
+
Old to new, if you themed 0.2:
|
|
99
|
+
|
|
100
|
+
| 0.2 token | 0.3 |
|
|
101
|
+
| -------------------- | ----------------------------------------------------------------------------- |
|
|
102
|
+
| `--dt-accent` | kept, now a neutral grey by default |
|
|
103
|
+
| `--dt-accent-strong` | kept (no longer the current page's fill: that is `--dt-selected`) |
|
|
104
|
+
| `--dt-accent-fg` | removed: the current page is a wash with `--dt-accent-strong` text, not a fill |
|
|
105
|
+
| `--dt-accent-wash` | removed: split into `--dt-selected`, `--dt-hover` and `--dt-group-bg` |
|
|
106
|
+
| `--dt-action` | removed: Export is a ghost icon button, not a filled one |
|
|
107
|
+
| `--dt-action-fg` | removed with `--dt-action` |
|
|
108
|
+
| `--dt-focus-border` | kept |
|
|
109
|
+
| `--dt-focus-ring` | kept |
|
|
110
|
+
|
|
81
111
|
## Column types
|
|
82
112
|
|
|
83
113
|
`type` drives alignment, formatting, sorting, group aggregation and what gets written to the export.
|
|
@@ -108,6 +138,7 @@ All formatting goes through `Intl`; there is no date library. Control it with `l
|
|
|
108
138
|
| `width` | `String` | `null` | Tailwind width class, e.g. `w-1/3`, `w-[180px]`. |
|
|
109
139
|
| `decimals` | `Number` | `2` | Fraction digits for `percent`. |
|
|
110
140
|
| `cellStyle` | `Function` | `null` | `(value, rowData) => styleObject`. |
|
|
141
|
+
| `cellTitle` | `Function` | `null` | `(value, rowData) => string`, the cell's `title`. |
|
|
111
142
|
| `exportable` | `Boolean` | `true` | Include this column in the export. |
|
|
112
143
|
|
|
113
144
|
### Custom cells
|
|
@@ -140,35 +171,172 @@ const rate = heatmap({ min: 0, max: 100 })
|
|
|
140
171
|
`heatmap({ colors, min, max, property })` returns a `cellStyle` function. The default ten-step scale runs red
|
|
141
172
|
through amber to green; pass your own `colors` array for anything else.
|
|
142
173
|
|
|
174
|
+
For graded bands with readable text, use `bands()`:
|
|
175
|
+
|
|
176
|
+
```vue
|
|
177
|
+
<script setup>
|
|
178
|
+
import { bands } from 'dt-vue'
|
|
179
|
+
|
|
180
|
+
const rate = bands({
|
|
181
|
+
cuts: [50, 80, 95],
|
|
182
|
+
shades: [
|
|
183
|
+
['#9B272C', '#D03E45'],
|
|
184
|
+
['#F6B321', '#FED78B'],
|
|
185
|
+
['#C3F6C5', '#77D585'],
|
|
186
|
+
['#26873F', '#054A1F'],
|
|
187
|
+
],
|
|
188
|
+
labels: ['Far behind', 'Behind', 'Near target', 'Met'],
|
|
189
|
+
})
|
|
190
|
+
</script>
|
|
191
|
+
|
|
192
|
+
<template>
|
|
193
|
+
<DtColumn
|
|
194
|
+
field="rate"
|
|
195
|
+
header="Suppression"
|
|
196
|
+
type="percent"
|
|
197
|
+
:cell-style="rate"
|
|
198
|
+
:cell-title="(value) => rate.band(value)?.label" />
|
|
199
|
+
</template>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
`bands({ cuts, shades, labels, min = 0, max = 100, ink, light })` returns a `cellStyle` that gives `{ backgroundColor,
|
|
203
|
+
color }`. `n` cuts make `n + 1` bands with two shades each: band `i` covers `[cuts[i - 1] ?? min, cuts[i] ?? max)`,
|
|
204
|
+
its lower half takes the first shade and its upper half (the exact midpoint included) the second. Values below `min`
|
|
205
|
+
take the very first shade and values at or above `max` the very last. `color` is `light` (white) or `ink` (near-black),
|
|
206
|
+
whichever has the higher WCAG contrast on the shade. Blank and non-numeric values are left unstyled. A cut may lie
|
|
207
|
+
outside `min`..`max`; clamping wins.
|
|
208
|
+
|
|
209
|
+
`rate.band(value)` returns `{ index, label, background, color }`, or `null` for a blank value, which is what feeds
|
|
210
|
+
`cellTitle`. `bands()` throws a `TypeError` when `shades` is not one longer than `cuts`, a band does not have exactly
|
|
211
|
+
two shades, `cuts` do not strictly ascend, or a shade is not a hex colour (three or six digits) or `rgb(r, g, b)`.
|
|
212
|
+
|
|
143
213
|
## Table props
|
|
144
214
|
|
|
145
|
-
| Prop
|
|
146
|
-
|
|
|
147
|
-
| `data`
|
|
148
|
-
| `title`
|
|
149
|
-
| `locale`
|
|
150
|
-
| `dateFormat`
|
|
151
|
-
| `numberFormat`
|
|
152
|
-
| `labels`
|
|
153
|
-
| `totals`
|
|
154
|
-
| `bordered`
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
169
|
-
| `
|
|
170
|
-
| `
|
|
171
|
-
| `
|
|
215
|
+
| Prop | Type | Default | Description |
|
|
216
|
+
| ----------------- | -------------------- | ----------------------- | ---------------------------------------------------------------- |
|
|
217
|
+
| `data` | `Array` | `[]` | Row objects. |
|
|
218
|
+
| `title` | `String` | `''` | Heading, and the default export filename. |
|
|
219
|
+
| `locale` | `String` | runtime locale | Applied to every number and date. |
|
|
220
|
+
| `dateFormat` | `Object\|Function` | medium date | `Intl.DateTimeFormatOptions`, or `(date) => string`. |
|
|
221
|
+
| `numberFormat` | `Object` | `{}` | `Intl.NumberFormatOptions` for `number` columns. |
|
|
222
|
+
| `labels` | `Object` | English | Override any UI string. |
|
|
223
|
+
| `totals` | `Boolean` | `false` | Totals row for numeric and min/max date columns; `labels.total` names it. |
|
|
224
|
+
| `bordered` | `Boolean` | `true` | Hairline under every row. `:bordered="false"` removes it. |
|
|
225
|
+
| `density` | `String` | `'compact'` | `'compact'` (12px) or `'comfortable'` (13px, roomier rows). |
|
|
226
|
+
| `pagination` | `String` | `'step'` | `'step'` (range, previous, next) or `'numbers'` (adds pages). |
|
|
227
|
+
| `mono` | `Boolean` | `false` | Monospace table text. |
|
|
228
|
+
| `overflowVisible` | `Boolean` | `false` | No overflow clipping or scroll wrapper. See below. |
|
|
229
|
+
| `loading` | `Boolean` | `false` | Skeleton rows and a progress line. See below. |
|
|
230
|
+
| `rows` | `Number` | `10` | Page size. Reactive. |
|
|
231
|
+
| `pageSizes` | `Array` | `[10,25,50,75,100]` | Page-size options. |
|
|
232
|
+
| `searchable` | `Boolean` | `true` | Show the global search box in the header bar. |
|
|
233
|
+
| `searchDebounce` | `Number` | `200` | Milliseconds before filtering. |
|
|
234
|
+
| `sortField` | `String` | `null` | Externally controlled sort column. |
|
|
235
|
+
| `sortOrder` | `Number` | `1` | `1` ascending, `-1` descending. |
|
|
236
|
+
| `groupBy` | `Object` | `null` | `{ Label: ['col'] }` — renders a "Group by Label" button. |
|
|
237
|
+
| `groupRowsBy` | `String` | `null` | Visual-only heading row whenever this field changes. |
|
|
238
|
+
| `subRows` | `String\|Function` | `'children'` | Where nested rows live. |
|
|
239
|
+
| `expandable` | `Boolean` | `true` | Expander column when the data nests. Set `false` to hide it. |
|
|
240
|
+
| `rowId` | `String` | `null` | Row identity; also what `v-model` holds. |
|
|
241
|
+
| `selectable` | `Boolean` | `false` | Checkbox column, click, shift-click and drag selection. |
|
|
242
|
+
| `exportable` | `Boolean` | `false` | Show the built-in Export icon button. |
|
|
243
|
+
| `exportFilename` | `String` | `title` | Export filename, without extension. |
|
|
244
|
+
| `sheetName` | `String` | `'Data'` | Worksheet name. |
|
|
245
|
+
|
|
246
|
+
### Toolbar
|
|
247
|
+
|
|
248
|
+
The header bar is one row that wraps: the title on the left, and on the right the search box, the group-by toggles,
|
|
249
|
+
the verbs, then your `#toolbar` slot. It shows whenever there is a `title`, search, `groupBy`, `exportable`, a
|
|
250
|
+
`#title` slot or a `#toolbar` slot, so a table with `searchable` on (the default) always has one. On a phone the
|
|
251
|
+
search takes the full width and the rest wraps under it.
|
|
252
|
+
|
|
253
|
+
- **Search** has a leading magnifier icon; its placeholder and accessible name are `labels.search`.
|
|
254
|
+
- **Group by** toggles keep their words (`labels.groupBy`) and carry `aria-pressed`. Pressing one that is already on
|
|
255
|
+
clears the grouping.
|
|
256
|
+
- **Clear grouping** (an X icon) shows only while grouped. Using it hands focus to the first group-by toggle.
|
|
257
|
+
- **Export** (a download icon) shows when `exportable`. Both icon buttons are named by an `aria-label` and show the same
|
|
258
|
+
text in a tooltip after a 300ms hover or at once on keyboard focus.
|
|
259
|
+
|
|
260
|
+
Anything of your own goes in `#toolbar`; dt-vue's tooltip is internal, so bring your own for those.
|
|
261
|
+
|
|
262
|
+
### Sorting from the keyboard
|
|
263
|
+
|
|
264
|
+
A sortable column's heading is a real `<button>`: Tab reaches it and Enter or Space sorts. `aria-sort` stays on the
|
|
265
|
+
header cell.
|
|
266
|
+
|
|
267
|
+
### Pagination
|
|
268
|
+
|
|
269
|
+
`pagination="step"` (the default) shows a **Rows** select on the left and the range with previous and next buttons on
|
|
270
|
+
the right. `pagination="numbers"` keeps the Rows select and puts the range on the left, then shows previous, a window
|
|
271
|
+
of page numbers and next. Seven pages or fewer show every number; otherwise the window keeps the first and last page
|
|
272
|
+
and the current page plus one either side, widened so the first three or last three pages show when you are among
|
|
273
|
+
them (`1 2 3 … 25`, `1 … 9 10 11 … 25`, `1 … 23 24 25`). There are no first and last buttons. The pager is hidden
|
|
274
|
+
while `loading` and when there are no rows.
|
|
275
|
+
|
|
276
|
+
### Loading and empty states
|
|
277
|
+
|
|
278
|
+
`loading` replaces the rows with still skeleton rows (up to five, or the page size if smaller), draws a 2px accent
|
|
279
|
+
line along the card's top edge that sweeps while it loads (it holds still, faint and full width, under
|
|
280
|
+
`prefers-reduced-motion`), sets `aria-busy` on the table, and announces `labels.loading` through a visually hidden
|
|
281
|
+
status region. A refetch replaces existing rows with skeletons. The `#loading` slot, when given, replaces the skeleton
|
|
282
|
+
rows with its content in one full-width cell. The totals row is hidden while loading.
|
|
283
|
+
|
|
284
|
+
An empty table shows a tile, a title (`labels.empty`, or `labels.emptySearch` while a search is active, with
|
|
285
|
+
`{query}`) and, when `labels.emptyHint` is set, a hint. The `#empty` slot renders under them as an action area and
|
|
286
|
+
receives `{ query, clearSearch }`:
|
|
287
|
+
|
|
288
|
+
```vue
|
|
289
|
+
<DtTable :data="rows" :labels="{ emptyHint: 'Check the spelling, or search by region.' }">
|
|
290
|
+
<template #empty="{ query, clearSearch }">
|
|
291
|
+
<button v-if="query" type="button" @click="clearSearch()">Clear search</button>
|
|
292
|
+
</template>
|
|
293
|
+
</DtTable>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
### Density
|
|
297
|
+
|
|
298
|
+
`density="compact"` (the default) is 12px text with `px-3 py-2` cells; `"comfortable"` is 13px with `px-3 py-2.5`. Header
|
|
299
|
+
cells and group headings keep their padding in both. Numbers and dates use tabular figures.
|
|
300
|
+
|
|
301
|
+
### Labels
|
|
302
|
+
|
|
303
|
+
Pass a partial `labels` object to reword anything. Placeholders in braces are filled in.
|
|
304
|
+
|
|
305
|
+
| Key | Default | Placeholders |
|
|
306
|
+
| --------------- | -------------------------------- | --------------------------- |
|
|
307
|
+
| `search` | `Search` | |
|
|
308
|
+
| `empty` | `No entries found` | |
|
|
309
|
+
| `emptyHint` | `''` (no hint) | |
|
|
310
|
+
| `emptySearch` | `No entries match "{query}"` | `{query}` |
|
|
311
|
+
| `loading` | `Loading...` | |
|
|
312
|
+
| `export` | `Export to Excel` | |
|
|
313
|
+
| `groupBy` | `Group by {label}` | `{label}` |
|
|
314
|
+
| `groupCount` | `{count}` | `{count}` |
|
|
315
|
+
| `clearGrouping` | `Clear grouping` | |
|
|
316
|
+
| `total` | `Total` | |
|
|
317
|
+
| `rowsPerPage` | `Rows` | |
|
|
318
|
+
| `range` | `{from}–{to} of {total}` | `{from}`, `{to}`, `{total}` |
|
|
319
|
+
| `previousPage` | `Previous page` | |
|
|
320
|
+
| `nextPage` | `Next page` | |
|
|
321
|
+
| `pagination` | `Pagination` | |
|
|
322
|
+
| `expandRow` | `Expand row` | |
|
|
323
|
+
| `collapseRow` | `Collapse row` | |
|
|
324
|
+
| `selectAll` | `Select all rows on this page` | |
|
|
325
|
+
| `selectRow` | `Select row` | |
|
|
326
|
+
|
|
327
|
+
`groupCount` follows each group heading and each `groupBy` row, e.g. `'{count} facilities'`. Counts go through the
|
|
328
|
+
table's number formatting (`1,234`).
|
|
329
|
+
|
|
330
|
+
### Dropdowns in cells
|
|
331
|
+
|
|
332
|
+
By default the card clips its contents and the table scrolls horizontally inside it, which cuts off any
|
|
333
|
+
absolutely positioned menu or popover rendered in a cell. Set `overflow-visible` to remove both, so the
|
|
334
|
+
menu can extend past the table. The trade-off: a table wider than its container widens the page rather
|
|
335
|
+
than scrolling inside the card. Menus that teleport to `body` (or use `position: fixed`) do not need this.
|
|
336
|
+
|
|
337
|
+
```vue
|
|
338
|
+
<DtTable :data="rows" overflow-visible>
|
|
339
|
+
```
|
|
172
340
|
|
|
173
341
|
### Selection
|
|
174
342
|
|
|
@@ -186,9 +354,9 @@ Only top-level rows are selectable; nested rows are not.
|
|
|
186
354
|
| Slot | Props | Purpose |
|
|
187
355
|
| --------- | ------------------------------------------------------------ | ---------------------------- |
|
|
188
356
|
| `title` | — | Replace the heading. |
|
|
189
|
-
| `toolbar` | `table`, `exportXlsx`, `grouping`, `setGrouping`, `clearGrouping` |
|
|
190
|
-
| `empty` |
|
|
191
|
-
| `loading` | — |
|
|
357
|
+
| `toolbar` | `table`, `exportXlsx`, `grouping`, `setGrouping`, `clearGrouping` | After the built-in verbs. |
|
|
358
|
+
| `empty` | `query`, `clearSearch` | Action area under the empty state's title and hint. |
|
|
359
|
+
| `loading` | — | Replaces the skeleton rows. |
|
|
192
360
|
|
|
193
361
|
### Events
|
|
194
362
|
|
|
@@ -212,6 +380,45 @@ visibility all apply, and columns marked `:exportable="false"` are left out. Pag
|
|
|
212
380
|
state do not apply, so the file always holds the full result set including nested rows. Numbers and dates are
|
|
213
381
|
written as real numbers and dates so Excel can total and reformat them.
|
|
214
382
|
|
|
383
|
+
## Upgrading from 0.2
|
|
384
|
+
|
|
385
|
+
0.3.0 changes the look and a few defaults. In order of how likely they are to bite:
|
|
386
|
+
|
|
387
|
+
- **Tokens.** `--dt-action`, `--dt-action-fg`, `--dt-accent-fg` and `--dt-accent-wash` are removed, with no aliases.
|
|
388
|
+
The defaults are neutral greys, not teal, so a table you never themed changes colour. New tokens: `--dt-selected`,
|
|
389
|
+
`--dt-hover`, `--dt-header-bg`, `--dt-border`, `--dt-radius`, `--dt-shadow`, `--dt-group-bg`. See [Theming](#theming)
|
|
390
|
+
for the old to new map.
|
|
391
|
+
- **`bordered` defaults to `true`.** Pass `:bordered="false"` to keep rows without hairlines.
|
|
392
|
+
- **Export and Clear grouping are icon-only.** `labels.export` now defaults to `'Export to Excel'` and is the button's
|
|
393
|
+
name and tooltip, not visible text. Find the button by its `aria-label`, not its text.
|
|
394
|
+
- **Search moves into the header bar**, so a table with no title now shows a header bar while `searchable`. The
|
|
395
|
+
`labels.search` default is `'Search'`.
|
|
396
|
+
- **The pager.** The default is `pagination="step"`. First and last buttons are gone in both modes, and the pager hides
|
|
397
|
+
while loading or empty.
|
|
398
|
+
- **Labels.** Removed: `firstPage`, `lastPage`, `results`, `unitRows`, `unitResults`, `noResults`, `pageSize`. Added:
|
|
399
|
+
`rowsPerPage`, `range`, `groupCount`, `emptyHint`, `emptySearch`, `total`. Page-size options show just the number
|
|
400
|
+
(`'25'`), not `'Show 25'`.
|
|
401
|
+
- **`loading` replaces the rows with skeleton rows** instead of adding a message row under them.
|
|
402
|
+
- **`#empty` is the action area** under the title and hint, not the whole message. Use `labels.empty` and
|
|
403
|
+
`labels.emptyHint` for the words.
|
|
404
|
+
- **The empty state is a `div[data-dt-empty]` after the `<table>`**, no longer a `<tbody>` row, so selectors aimed at
|
|
405
|
+
the empty cell break. The header row stays and `<tbody>` is empty.
|
|
406
|
+
- **Grouped rows show a `category` value only when every leaf shares it.** 0.2 repeated the first leaf's value; now a
|
|
407
|
+
column whose leaves differ is blank on the group row. Date-typed columns compare by time value.
|
|
408
|
+
- **The group count is `labels.groupCount`** (default `'{count}'`, the number with thousands separators), no longer
|
|
409
|
+
`(n)`. Reword it, for example `'({count})'` or `'{count} facilities'`.
|
|
410
|
+
- **Header labels, and number, percent and date cells, no longer wrap** (`whitespace-nowrap`).
|
|
411
|
+
- **The totals row labels itself** with `labels.total` (default `'Total'`) in the first non-numeric column that has no
|
|
412
|
+
total of its own.
|
|
413
|
+
- **Clicking a pressed group-by toggle clears grouping.**
|
|
414
|
+
- **Sortable headings are buttons.** Selectors that clicked the `<th>` should click the `<button>` inside it.
|
|
415
|
+
- **Totals cells are `<td>`**, not `<th>`.
|
|
416
|
+
- **Peers.** `@heroicons/vue` must be 2.1 or later, and the classes used need Tailwind 3.4 or later in your app
|
|
417
|
+
(`size-7`, `min-w-7`).
|
|
418
|
+
|
|
419
|
+
New in 0.3.0: `density`, `pagination`, `bands()`, `cellTitle`, the `#empty` slot props, tabular figures and keyboard
|
|
420
|
+
sorting.
|
|
421
|
+
|
|
215
422
|
## TypeScript
|
|
216
423
|
|
|
217
424
|
Declarations ship with the package — no `@types` install needed. Both components are generic over the row
|