@kong-ui-public/table-data-grid 0.5.5-pr.3867.f67b35310.0 → 0.6.0

package/README.md

@@ -120,7 +120,7 @@ const handleState = (payload: TableDataGridStatePayload) => {
 | `error` | `boolean` | No | `false` | Host-controlled visible error state. Internal fetch failures emit state but do not render error UI unless this prop is true. |
 | `pageSize` | `number` | No | `25` | Infinite mode only. AG Grid cache block size and fetcher request size. `tableConfig.pageSize` wins when present. |
 | `refreshKey` | `string \| number \| boolean` | No | - | Infinite mode only. Parent invalidation signal that rebuilds the datasource from the beginning. |
-| `tableConfig` | `TableDataGridConfig` | No | - | Host-controlled current sort, page size, and optional content-height sizing. Restores a previously-chosen sort on mount, or moves it after mount, without a click. Uncontrolled (internal state) when omitted. |
+| `tableConfig` | `TableDataGridConfig` | No | - | Host-controlled current sort and page size. Restores a previously-chosen sort on mount, or moves it after mount, without a click. Uncontrolled (internal state) when omitted. |
 
 ## Fetcher Contract
 
@@ -151,10 +151,10 @@ type TableDataGridFetcher<Row> = (
 uses `cursor: undefined`; later requests receive the previous response cursor.
 
 `sort` carries the current single-column sort, with `sortColumnKey` and
-`sortColumnOrder` left `undefined` when nothing is sorted. A sort change makes
-AG Grid reload its blocks and restarts the cursor chain from the beginning
-without replacing the datasource, because a cursor produced under one sort
-order is not valid under another.
+`sortColumnOrder` left `undefined` when nothing is sorted. A sort change is a
+request-context change like `refreshKey` or `pageSize`: it rebuilds the
+datasource and restarts the cursor chain from the beginning, because a cursor
+produced under one sort order is not valid under another.
 
 AG Grid range details are datasource internals. Consumers should not depend on,
 or return, datasource request positions or AG Grid row-count callback values in
@@ -175,12 +175,6 @@ changes. An empty `rows` array shows the empty state.
 The row model is selected when `TableDataGrid` mounts. To switch between
 `infinite` and `unpaginated`, key the component by mode so Vue remounts it.
 
-For compact, content-sized tables, set `tableConfig.fitToContent` to `true` and
-leave the host height unconstrained. The grid fits its header and all returned
-rows, retains horizontal scrolling, and resizes when the result changes. This
-option defaults to `false` and is ignored in infinite mode. Otherwise, give the
-host a height and the grid scrolls within it.
-
 ```vue
 <TableDataGrid
   mode="unpaginated"
@@ -253,23 +247,6 @@ should opt out of the default flexible fill behavior.
 | `disableRowClick` | `boolean` | No | Suppresses `row:click` for clicks landing in this column's cells, e.g. an actions column. `cell:click` still fires. |
 | `sortable` | `boolean` | No | Enables sorting on this column via AG Grid's built-in header sort control. Only one column can be sorted at a time. |
 | `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. |
-| `dataType` | `'number'` | No | Enables numeric presentation options for this column. Aggregate options are applied only in unpaginated mode. |
-| `valueFormatter` | `(value, row) => string` | No | Formats a raw value for display. A custom cell slot still receives the original `rowValue`. |
-| `showPercentage` | `boolean` | No | In unpaginated numeric columns, shows the row's percentage of the complete returned column sum. |
-| `percentageFormatter` | `(percentage) => string` | No | Optional formatter for the percentage points (50 means 50%) shown by `showPercentage`. The default uses the grid locale, up to two decimal places, and `< 0.01 %` for small positive values. |
-| `bar` | `'relative' \| 'absolute'` | No | In unpaginated numeric columns, renders a bar. `relative` uses `value / sum`; `absolute` uses `value / maximum`, matching the TopN scales. |
-| `thresholds` | `Array<{ value: number, type: 'warning' \| 'error' }>` | No | Applies threshold text/bar colors at or above the highest crossed threshold. Numeric finite values only. |
-
-Numeric presentation is intentionally derived from the complete `rows` result
-in unpaginated mode. Infinite mode does not calculate aggregate values; supplying
-numeric presentation options there, or on a header without `dataType: 'number'`,
-emits a console warning and omits those adornments. Nonnumeric or non-finite
-values also warn once per column and keep their ordinary content without numeric
-adornments. Missing values retain an empty bar track when a bar is configured.
-Bars clamp to 0–100%; percentage labels are omitted when the column total is not positive.
-
-Hosts render optional icons through the `cell-icon` slot. The grid places slot
-content beside the cell value without replacing its default or custom content.
 
 ## Sorting
 
@@ -295,36 +272,14 @@ The current sort lives in `tableConfig` (`sortColumnKey`, `sortColumnOrder`),
 alongside `pageSize`. Pass `tableConfig` to restore a previously-chosen sort
 on mount, or to move the sort after mount without a click; omit it to let the
 component own the sort internally. A sort change emits `sort` (the narrower,
-sort-only payload) and then `update:tableConfig` (the full current config).
-
-For client-side sorting, use `mode="unpaginated"` and pass the complete result
-as `rows`. AG Grid sorts those rows locally with its built-in row animation.
-
-```vue
-<TableDataGrid
-  mode="unpaginated"
-  :rows="rows"
-  :headers="[
-    { key: 'name', label: 'Name', sortable: true },
-    { key: 'requests', label: 'Requests', sortable: true },
-  ]"
-/>
-```
-
-In the default infinite mode, sorting reloads AG Grid's blocks while reusing
-the datasource. The cursor chain starts over, and the fetcher receives the new
-sort as rows load again.
+sort-only payload) and then `update:tableConfig` (the full current config),
+and rebuilds the infinite datasource from the beginning — a cursor produced
+under one sort order is not valid under another.
 
 ## Custom Cell Content
 
 Columns render custom cell content through a slot named after `header.key`.
-Columns without a matching slot render `valueFormatter(rowValue, row)` when
-configured, otherwise their raw `rowValue`. The `cell-icon` slot, percentages,
-and bars decorate both default values and slot content.
-When a named slot renders no content, the grid falls back to the formatted
-default value with ellipsis and an overflow tooltip; non-empty slot content
-remains host-owned.
-`cell-icon` is reserved for icon content and cannot name a column content slot.
+Columns without a matching slot render their raw `rowValue`.
 
 ```vue
 <TableDataGrid
@@ -336,9 +291,6 @@ remains host-owned.
       {{ rowValue }}
     </KBadge>
   </template>
-  <template #cell-icon="{ column, rowValue }">
-    <ProviderIcon v-if="column.key === 'provider' && rowValue === 'openai'" />
-  </template>
 </TableDataGrid>
 ```
 
@@ -368,7 +320,6 @@ remains host-owned.
 | --- | --- |
 | `empty-state` | Replaces the default empty state after a successful empty result. |
 | `error-state` | Replaces the default visible error state when `error` is true. |
-| `cell-icon` | Adds optional host-rendered content before each cell's default value or column slot. Uses the same cell slot props; render nothing for cells without an icon. |
 | `[columnKey]` | Renders custom cell content for the column matching `header.key`. See [Custom Cell Content](#custom-cell-content). |
 
 ## Exports

package/dist/style.css

@@ -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);min-width:0;width:100%}.table-data-grid-cell-content,.table-data-grid-cell-slot-content,.table-data-grid-cell-relative{white-space:nowrap}.table-data-grid-cell-relative{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;flex:1 1 80px;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-3441088c]{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-3441088c]{height:auto}.kong-ui-public-table-data-grid.fit-to-content[data-v-3441088c] .ag-grid-scrolling-rows{min-height:0}.table-data-grid-grid[data-v-3441088c]{--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%}
+.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-17889e6a]{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%}.table-data-grid-grid[data-v-17889e6a]{--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%}