@kong-ui-public/table-data-grid 0.6.1-pr.3884.dc6f18af1.0 → 0.7.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 +8 -24
- package/dist/style.css +1 -1
- package/dist/table-data-grid.es.js +385 -423
- package/dist/table-data-grid.umd.js +1 -1
- package/dist/types/components/TableDataGrid.vue.d.ts.map +1 -1
- package/dist/types/components/TableDataGridCellRenderer.vue.d.ts.map +1 -1
- package/dist/types/composables/useFetchInfinite.d.ts +2 -3
- package/dist/types/composables/useFetchInfinite.d.ts.map +1 -1
- package/dist/types/composables/useTableDataGridColumnDefs.d.ts +1 -4
- package/dist/types/composables/useTableDataGridColumnDefs.d.ts.map +1 -1
- package/dist/types/composables/useTableDataGridConfig.d.ts.map +1 -1
- package/dist/types/utils/tableDataGridPresentation.d.ts +3 -16
- package/dist/types/utils/tableDataGridPresentation.d.ts.map +1 -1
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -151,10 +151,10 @@ type TableDataGridFetcher<Row> = (
|
|
|
151
151
|
uses `cursor: undefined`; later requests receive the previous response cursor.
|
|
152
152
|
|
|
153
153
|
`sort` carries the current single-column sort, with `sortColumnKey` and
|
|
154
|
-
`sortColumnOrder` left `undefined` when nothing is sorted. A sort change
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
order is not valid under another.
|
|
154
|
+
`sortColumnOrder` left `undefined` when nothing is sorted. A sort change is a
|
|
155
|
+
request-context change like `refreshKey` or `pageSize`: it rebuilds the
|
|
156
|
+
datasource and restarts the cursor chain from the beginning, because a cursor
|
|
157
|
+
produced under one sort order is not valid under another.
|
|
158
158
|
|
|
159
159
|
AG Grid range details are datasource internals. Consumers should not depend on,
|
|
160
160
|
or return, datasource request positions or AG Grid row-count callback values in
|
|
@@ -255,7 +255,7 @@ should opt out of the default flexible fill behavior.
|
|
|
255
255
|
| `showSortIcon` | `boolean` | No | Shows the unsorted sort icon on this column even when it isn't the active sort, instead of only on hover or once sorted. Only relevant when `sortable` is true. |
|
|
256
256
|
| `valueFormatter` | `(value, row) => string` | No | Formats a raw value for display. A custom cell slot still receives the original `rowValue`. |
|
|
257
257
|
| `showPercentage` | `boolean` | No | In unpaginated mode, shows a numeric row value's percentage of the complete returned column sum. |
|
|
258
|
-
| `percentageFormatter` | `(percentage) => string` | No | Optional formatter for the percentage points (50 means 50%) shown by `showPercentage`. The default uses the grid
|
|
258
|
+
| `percentageFormatter` | `(percentage) => string` | No | Optional formatter for the percentage points (50 means 50%) shown by `showPercentage`. The default uses the grid's i18n number formatting, up to two decimal places, and `< 0.01 %` for small positive values. |
|
|
259
259
|
| `bar` | `'relative' \| 'absolute'` | No | In unpaginated mode, renders a bar for numeric values. `relative` uses `value / sum`; `absolute` uses `value / maximum`, matching the TopN scales. |
|
|
260
260
|
| `thresholds` | `Array<{ value: number, type: 'warning' \| 'error' }>` | No | Compares the raw numeric value with each threshold in either grid mode. Colors the bar when rendered, or the value text otherwise. The highest crossed threshold wins, with `error` winning ties. Works without `bar`. |
|
|
261
261
|
|
|
@@ -296,25 +296,9 @@ The current sort lives in `tableConfig` (`sortColumnKey`, `sortColumnOrder`),
|
|
|
296
296
|
alongside `pageSize`. Pass `tableConfig` to restore a previously-chosen sort
|
|
297
297
|
on mount, or to move the sort after mount without a click; omit it to let the
|
|
298
298
|
component own the sort internally. A sort change emits `sort` (the narrower,
|
|
299
|
-
sort-only payload) and then `update:tableConfig` (the full current config)
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
as `rows`. AG Grid sorts those rows locally with its built-in row animation.
|
|
303
|
-
|
|
304
|
-
```vue
|
|
305
|
-
<TableDataGrid
|
|
306
|
-
mode="unpaginated"
|
|
307
|
-
:rows="rows"
|
|
308
|
-
:headers="[
|
|
309
|
-
{ key: 'name', label: 'Name', sortable: true },
|
|
310
|
-
{ key: 'requests', label: 'Requests', sortable: true },
|
|
311
|
-
]"
|
|
312
|
-
/>
|
|
313
|
-
```
|
|
314
|
-
|
|
315
|
-
In the default infinite mode, sorting reloads AG Grid's blocks while reusing
|
|
316
|
-
the datasource. The cursor chain starts over, and the fetcher receives the new
|
|
317
|
-
sort as rows load again.
|
|
299
|
+
sort-only payload) and then `update:tableConfig` (the full current config),
|
|
300
|
+
and rebuilds the infinite datasource from the beginning — a cursor produced
|
|
301
|
+
under one sort order is not valid under another.
|
|
318
302
|
|
|
319
303
|
## Custom Cell Content
|
|
320
304
|
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content,.table-data-grid-cell-slot-content{display:block;min-width:0;width:100%}.table-data-grid-cell-renderer{align-items:center;display:flex;font-feature-settings:"case";font-variant-numeric:tabular-nums;gap:4px;gap:var(--kui-space-20, 4px)
|
|
1
|
+
.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content,.table-data-grid-cell-slot-content{display:block;min-width:0;width:100%}.table-data-grid-cell-renderer{align-items:center;display:flex;font-feature-settings:"case";font-variant-numeric:tabular-nums;gap:4px;gap:var(--kui-space-20, 4px)}.table-data-grid-cell-label{align-items:center;display:flex;flex:1 1 auto;gap:4px;gap:var(--kui-space-20, 4px);min-width:0}.table-data-grid-cell-label-track{display:grid;flex:1 1 auto;grid-template-columns:minmax(0,1fr);min-width:0}.table-data-grid-cell-label-track>*{grid-area:1/1}.table-data-grid-cell-label-sizer{height:0;visibility:hidden}.table-data-grid-cell-sizer-value:before,.table-data-grid-cell-sizer-relative:before{content:attr(data-text);white-space:nowrap}.table-data-grid-cell-sizer-value{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.table-data-grid-cell-renderer--bar{display:grid;grid-template-columns:minmax(0,max-content) minmax(80px,1fr)}.table-data-grid-cell-content,.table-data-grid-cell-slot-content,.table-data-grid-cell-relative{white-space:nowrap}.table-data-grid-cell-relative,.table-data-grid-cell-sizer-relative{flex-shrink:0;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:400;font-weight:var(--kui-font-weight-regular, 400)}.table-data-grid-cell-renderer--bar .table-data-grid-cell-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--text-warning .table-data-grid-cell-content,.table-data-grid-cell-renderer--text-warning .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--text-error .table-data-grid-cell-content,.table-data-grid-cell-renderer--text-error .table-data-grid-cell-slot-content{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.table-data-grid-cell-renderer--text-warning{color:#995c00;color:var(--kui-color-text-warning, #995c00)}.table-data-grid-cell-renderer--text-error{color:#d60027;color:var(--kui-color-text-danger, #d60027)}.table-data-grid-cell-renderer--bar .table-data-grid-cell-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-tooltip,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-tooltip,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-content{flex:0 1 auto;width:auto}.table-data-grid-cell-bar{background-color:#e0e4ea;background-color:var(--kui-color-background-neutral-weaker, #e0e4ea);border-radius:100px;border-radius:var(--kui-border-radius-round, 100px);display:block;height:8px;min-width:80px;overflow:hidden;width:100%}.table-data-grid-cell-bar-fill{background-color:#6a86d2;border-radius:inherit;display:block;height:100%}.table-data-grid-cell-bar[data-threshold=warning] .table-data-grid-cell-bar-fill{background-color:#995c00;background-color:var(--kui-color-background-warning, #995c00)}.table-data-grid-cell-bar[data-threshold=error] .table-data-grid-cell-bar-fill{background-color:#d60027;background-color:var(--kui-color-background-danger, #d60027)}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-85f88484]{border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.kong-ui-public-table-data-grid.fit-to-content[data-v-85f88484]{height:auto}.table-data-grid-grid[data-v-85f88484]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #0d0e14);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.ag-cell{align-items:center;display:flex;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}
|