@kong-ui-public/table-data-grid 0.5.3-pr.3854.e45740a1b.0 → 0.5.3

package/README.md

@@ -2,9 +2,8 @@
 
 Reusable Vue wrapper around AG Grid for Kong table data grids.
 
-This package supports AG Grid infinite row loading with a cursor-first fetcher
-contract and complete-result loading through its client-side row model. It also
-provides basic column definitions, single-column sorting, empty/error
+This package currently supports AG Grid infinite row loading with a cursor-first
+fetcher contract, basic column definitions, single-column sorting, empty/error
 presentation states, and state lifecycle emits.
 
 ## Peer Dependencies
@@ -114,12 +113,11 @@ const handleState = (payload: TableDataGridStatePayload) => {
 | Prop | Type | Required | Default | Notes |
 | --- | --- | --- | --- | --- |
 | `headers` | `Array<TableDataGridHeader<Row>>` | Yes | - | Basic column definitions mapped to AG Grid columns. |
-| `fetcher` | `TableDataGridFetcher<Row> \| TableDataGridUnpaginatedFetcher<Row>` | Yes | - | Async row loader for the selected mode. |
-| `mode` | `'infinite' \| 'unpaginated'` | No | `'infinite'` | Selects the fetcher contract and AG Grid row model. |
+| `fetcher` | `TableDataGridFetcher<Row>` | Yes | - | Async row loader called by the AG Grid infinite datasource. |
 | `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` | AG Grid cache block size and fetcher request size. `tableConfig.pageSize` wins when present. |
-| `refreshKey` | `string \| number \| boolean` | No | - | Parent invalidation signal that reloads the current result. |
-| `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. |
+| `refreshKey` | `string \| number \| boolean` | No | - | Parent invalidation signal that rebuilds the datasource from the beginning. |
+| `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
 
@@ -163,42 +161,11 @@ the public fetcher contract.
 is omitted, `hasMore: false` or a response shorter than `pageSize` marks the last
 loaded row as the end of the dataset.
 
-For a complete result that must be loaded once and rendered without pagination,
-set `mode="unpaginated"`. The fetcher receives no page size, cursor, sort, or
-other pagination values, and its complete result is passed to AG Grid's internal
-client-side row model. Changing `refreshKey` or the fetcher starts one new
-request; scrolling through the result does not call the fetcher again.
-
-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"
-  :fetcher="fetchTopRows"
-  :headers="headers"
-  :refresh-key="refreshKey"
-/>
-
-<script setup lang="ts">
-import type { TableDataGridUnpaginatedFetcher } from '@kong-ui-public/table-data-grid'
-
-const fetchTopRows: TableDataGridUnpaginatedFetcher<Row> = async () => ({
-  data: await loadAllRows(),
-})
-</script>
-```
-
 ## Refresh Behavior
 
 `refreshKey` is a parent-owned invalidation signal. Changing it rebuilds the
 infinite datasource, clears stored cursors, and starts again from the first
-block with `cursor: undefined`. In `unpaginated` mode it starts one new
-complete-result request instead and keeps the previous rows visible while that
-request is pending.
+block with `cursor: undefined`.
 
 This reset is required for cursor APIs because cursor values are only valid
 relative to the response and query chain that produced them. Reusing a later
@@ -256,25 +223,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 and built-in icon matching. 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. |
-| `icons` | `Array<{ pattern: RegExp, icon: Component }>` | No | Renders the first matching icon beside the value. Matching checks raw and formatted text and preserves regular-expression state. Built-in provider mappings are always checked after custom mappings. |
-
-Numeric presentation is intentionally derived from the complete successful 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.
-
-The grid includes case-insensitive built-in provider mappings for common AI
-provider names such as `OpenAI`, `Anthropic`, `Bedrock`, and `Vertex`. Hosts can
-add mappings for other values through `icons`.
 
 ## Sorting
 
@@ -307,10 +255,7 @@ 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`. Icons, percentages, and bars decorate
-both default values and slot content. For translated slot content, provide the
-same display text through `valueFormatter` so icon matching can inspect it.
+Columns without a matching slot render their raw `rowValue`.
 
 ```vue
 <TableDataGrid
@@ -330,7 +275,7 @@ same display text through `valueFormatter` so icon matching can inspect it.
 | `row` | `Row` | The full row record backing this cell. |
 | `rowValue` | `unknown` | `row[header.key]`. |
 | `column` | `TableDataGridHeader<Row>` | The header definition for this column. |
-| `rowIndex` | `number` | The row's index in the currently loaded result. |
+| `rowIndex` | `number` | The row's index in the currently loaded block. |
 | `selected` | `boolean` | Whether the row is currently selected. |
 | `refreshCell` | `() => void` | Forces AG Grid to re-render this cell. |
 
@@ -339,7 +284,7 @@ same display text through `valueFormatter` so icon matching can inspect it.
 | Event | Payload | When it fires |
 | --- | --- | --- |
 | `grid:ready` | `GridApi<Row>` | AG Grid is ready. |
-| `state` | `{ state: 'loading' \| 'success' \| 'error', hasData: boolean }` | Internal fetch lifecycle changes after fetching starts. |
+| `state` | `{ state: 'loading' \| 'success' \| 'error', hasData: boolean }` | Internal fetch lifecycle changes after the datasource starts requesting rows. |
 | `row:click` | `(row: TableDataGridRowClickPayload<Row>, event: RowClickedEvent<Row>)` | A row is clicked, unless the click landed in a `disableRowClick` column. |
 | `cell:click` | `TableDataGridCellClickPayload<Row>` | Any cell is clicked, including cells in `disableRowClick` columns. |
 | `sort` | `TableDataGridSort` | The current single-column sort changes. Fires before `update:tableConfig`. |
@@ -349,7 +294,7 @@ same display text through `valueFormatter` so icon matching can inspect it.
 
 | Slot | Purpose |
 | --- | --- |
-| `empty-state` | Replaces the default empty state after a successful empty result. |
+| `empty-state` | Replaces the default empty state after a successful empty first block. |
 | `error-state` | Replaces the default visible error state when `error` is true. |
 | `[columnKey]` | Renders custom cell content for the column matching `header.key`. See [Custom Cell Content](#custom-cell-content). |
 
@@ -363,13 +308,9 @@ same display text through `valueFormatter` so icon matching can inspect it.
 - `TableDataGridCellClickPayload`
 - `TableDataGridCellSlotProps`
 - `TableDataGridHeader`
-- `TableDataGridProps`
 - `TableDataGridInfiniteFetcherParams`
-- `TableDataGridUnpaginatedFetcherParams`
 - `TableDataGridFetcherResult`
 - `TableDataGridFetcher`
-- `TableDataGridUnpaginatedFetcherResult`
-- `TableDataGridUnpaginatedFetcher`
 - `TableDataGridReadyPayload`
 - `TableDataGridSortDirection`
 - `TableDataGridSort`

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-icon{flex:0 0 auto;height:16px;height:var(--kui-icon-size-30, 16px);width:16px;width:var(--kui-icon-size-30, 16px)}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-3d63188f]{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-3d63188f]{height:auto}.kong-ui-public-table-data-grid.fit-to-content[data-v-3d63188f] .ag-grid-scrolling-rows{min-height:0}.table-data-grid-grid[data-v-3d63188f]{--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-d8328fe5]{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-d8328fe5]{--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%}