@kong-ui-public/table-data-grid 0.0.1 → 0.0.2-pr.3209.353936131.0

package/README.md

@@ -109,7 +109,7 @@ const fetchRows: TableDataGridFetcher<Row> = async ({
 </script>
 ```
 
-The fetcher must return `{ data, total?, cursor?, hasMore? }`. Paginated tables use `page`, `pageSize`, `sortColumnKey`, `sortColumnOrder`, `search`, and `filterSelection`; infinite tables use `startRow`, `endRow`, `cursor`, `pageSize`, `sortColumnKey`, `sortColumnOrder`, `search`, and `filterSelection`.
+The fetcher must return `{ data, total?, cursor?, hasMore? }`. `total` is the known row count when the dataset is finite. `hasMore` is an explicit next-page signal that overrides the wrapper's fallback inference. In infinite mode, `cursor` may be `undefined` for offset-style APIs; the wrapper still advances blocks sequentially and will not call the next block until the prior one has completed. Paginated tables use `page`, `pageSize`, `sortColumnKey`, `sortColumnOrder`, `search`, and `filterSelection`; infinite tables use `startRow`, `endRow`, `cursor`, `pageSize`, `sortColumnKey`, `sortColumnOrder`, `search`, and `filterSelection`.
 
 ### Infinite Loading
 
@@ -134,6 +134,8 @@ const fetchRows: TableDataGridFetcher<Row> = async ({ startRow = 0, pageSize, cu
 }
 ```
 
+If the API returns `cursor: undefined`, the wrapper still treats the block as completed and will request the next sequential block after the prior block resolves.
+
 ### Filterable Headers
 
 Headers can include `filter?: Filter` from `@kong/kongponents`. When at least one header has a filter definition, the table renders `KFilterGroup` in the toolbar.
@@ -269,7 +271,23 @@ const saveTableConfig = (config: TableDataGridConfig) => {
 }
 ```
 
-Config fields are optional overrides. For example, `columnVisibility: { latency: false }` hides only that column while the rest default to visible.
+Config fields are optional overrides. Per-column layout state is nested under `columns`:
+
+```ts
+const tableConfig = ref<TableDataGridConfig>({
+  columnOrder: ['name', 'status', 'latency'],
+  columns: {
+    latency: { visible: false },
+    status: { width: 160, pinned: 'right' },
+    name: { pinned: false },
+  },
+  pageSize: 25,
+})
+```
+
+Header options describe the initial/default column state. `tableConfig` describes the current table state and any host-provided overrides that should be replayed or persisted.
+
+`columns[key].visible` hides or shows a hideable column, `columns[key].width` stores the column width in pixels, and `columns[key].pinned` stores `'left'`, `'right'`, or `false`. Omitted `visible` values fall back to `headers[].visible ?? true`; when `hideable: false`, visibility is not configurable and the column stays visible. Omitted `width` values fall back to the header width or the table's normal column fitting behavior. Omitted `pinned` values fall back to the header `pinned` value or unpinned. `pinned: false` explicitly unpins a column even when the matching header has a default `pinned` value.
 
 Host applications can map Kongponents `tablePreferences` into `tableConfig` with the exported conversion helpers:
 
@@ -371,6 +389,7 @@ Use `headers[].agGridColumnOptions.cellClass` or `headers[].agGridColumnOptions.
   :error="hasError"
   :fetcher="fetchRows"
   :headers="headers"
+  :loading="isLoading"
 >
   <template #empty-state>
     <KEmptyState title="No requests found" />
@@ -385,6 +404,8 @@ Use `headers[].agGridColumnOptions.cellClass` or `headers[].agGridColumnOptions.
 </TableDataGrid>
 ```
 
+Use `loading` and `error` when the host app needs to force visible table state. Fetcher rejections are caught by the grid and emitted through the `state` event, but the host app owns request error policy and should set `error` when it wants to render error chrome.
+
 ### Toolbar Composition
 
 ```vue
@@ -446,11 +467,11 @@ Use `outside-search` and `outside-filters` to move built-in controls to Teleport
 | `headers` | `Array<TableDataGridHeader<Row>>` | Yes | - | Column definitions used to build AG Grid columns, slots, filters, and table config defaults. |
 | `fetcher` | `TableDataGridFetcher<Row>` | Yes | - | Async function called whenever the table needs rows. |
 | `mode` | `'pagination' \| 'infinite'` | No | `'pagination'` | Controls whether the table renders pagination or an infinite datasource. |
-| `rowKey` | `Extract<keyof Row, string>` | No | `'id'` | Row field used for AG Grid row identity and exposed selection methods. |
+| `rowKey` | `Extract<keyof Row, string>` | No | `'id'` | Row field used for AG Grid row identity and exposed selection methods. Pick a unique, stable field so row selection and row updates stay attached to the same logical row. Missing values are treated as an empty string, so duplicate or missing keys can collide and break identity-sensitive behavior. |
 | `pageSize` | `number` | No | `25` | Default page or block size when `tableConfig.pageSize` is not set. |
 | `initialFetcherParams` | `{ search?: string }` | No | `{}` | Initial fetcher params currently limited to `search`. |
-| `loading` | `boolean` | No | `false` | Shows the table skeleton before rendering the grid. |
-| `error` | `boolean` | No | `false` | Shows the error state instead of the grid. |
+| `loading` | `boolean` | No | `false` | Shows the table loading skeleton and hides the grid while host-owned loading work is in progress. |
+| `error` | `boolean` | No | `false` | Shows the error state instead of the grid. Host apps should set this when they want fetch or request failures to render error chrome. |
 | `enableSearch` | `boolean` | No | `false` | Renders the built-in search input and passes debounced search changes to the fetcher. |
 | `outsideSearch` | `string \| HTMLElement` | No | - | Vue Teleport target for the built-in search input. |
 | `outsideFilters` | `string \| HTMLElement` | No | - | Vue Teleport target for the built-in filters. |
@@ -460,10 +481,10 @@ Use `outside-search` and `outside-filters` to move built-in controls to Teleport
 | `hidePagination` | `boolean` | No | `false` | Hides pagination controls in pagination mode. |
 | `hidePaginationWhenOptional` | `boolean` | No | `false` | Hides pagination controls when the loaded dataset fits on one page. |
 | `rowSelection` | `'none' \| 'single' \| 'multiple'` | No | `'none'` | Enables no selection, click-based single selection, or checkbox-backed multi-selection. |
-| `agGridOptions` | `TableDataGridGridOptions<Row>` | No | `{}` | Pass-through for lower-level AG Grid options. The wrapper still owns its documented behavior. |
+| `agGridOptions` | `TableDataGridGridOptions<Row>` | No | `{}` | Pass-through for lower-level AG Grid options. This is an escape hatch: overrides can bypass wrapper defaults and guarantees, including datasource and row-model behavior. |
 | `paginationPageSizeOptions` | `number[]` | No | `[10, 15, 25, 50, 100]` | Page size choices shown in pagination mode. The active page size is included if missing. |
 | `refreshKey` | `string \| number` | No | - | Refetches when the key changes. |
-| `rowAttrs` | `(row: Row) => Record<string, unknown>` | No | - | Applies DOM attributes to rendered AG Grid rows. |
+| `rowAttrs` | `(row: Row) => Record<string, unknown>` | No | - | Applies DOM attributes to rendered AG Grid rows. Supports `class` as a string, string array, or object map, `style` as an object, and any other DOM attributes as key/value pairs. |
 | `cellAttrs` | `({ row, rowValue, column, rowIndex, colIndex }) => Record<string, unknown>` | No | - | Applies DOM attributes to rendered cell content. |
 | `tableConfig` | `TableDataGridConfig` | No | Internal state | Optional controlled table state for column order, visibility, widths, pinning, sort, and page size. |
 
@@ -475,6 +496,7 @@ Use `outside-search` and `outside-filters` to move built-in controls to Teleport
 | `label` | `string` | - | Header label. |
 | `sortable` | `boolean` | `false` | Enables AG Grid sorting and wrapper sort payload updates for the column. |
 | `hideable` | `boolean` | `true` | Allows the column visibility menu to hide or show the column. |
+| `visible` | `boolean` | `true` | Initial/default visibility for a hideable column. Ignored when `hideable: false`; non-hideable columns stay visible. |
 | `hideLabel` | `boolean` | `false` | Hides the visual header label while keeping the column key and slot mapping. |
 | `disableRowClick` | `boolean` | `false` | Suppresses `row:click` when clicks originate from this column without changing selection behavior. |
 | `tooltip` | `string` | - | Header tooltip text and fallback cell tooltip text. |
@@ -500,7 +522,7 @@ Use `outside-search` and `outside-filters` to move built-in controls to Teleport
 | `row:select` | `Row[]` | The selected row set changes. |
 | `update:tableConfig` | `TableDataGridConfig` | User interaction or wrapper-managed refitting changes table config state. |
 | `sort` | `{ sortColumnKey?: string, sortColumnOrder?: 'asc' \| 'desc' }` | Sort state changes before the updated table config is emitted. |
-| `state` | `{ state: 'loading' \| 'error' \| 'success' \| 'empty', hasData: boolean }` | The table loading, error, success, or empty state changes. |
+| `state` | `{ state: 'loading' \| 'error' \| 'success' \| 'empty', hasData: boolean }` | The table state changes. Host-forced loading/error props and first-load fetch failures can emit loading/error; background refetches and later infinite-block failures keep emitting `success` while existing rows remain visible. |
 | `grid:ready` | `GridApi<Row>` | AG Grid is ready and the wrapper has applied initial column state. |
 | `filter:apply` | `(filterKey: string, selection: FilterGroupSelection)` | KFilterGroup emits apply. Default filters update `v-model:filter-selection`; custom filter slots must write their selected value to the model in the host. |
 | `filter:clear` | `(filterKey: string, selection: FilterGroupSelection)` | KFilterGroup emits clear. Default filters update `v-model:filter-selection`; custom filter slots must clear their value from the model in the host. |
@@ -514,7 +536,7 @@ Use `outside-search` and `outside-filters` to move built-in controls to Teleport
 | `[header.key]` | `{ row, rowValue, column, rowIndex, refreshCell, selected }` | Dynamic cell slot for the matching column key. Call `refreshCell()` when async slot content changes internal loading or display state. |
 | `bulk-action-items` | `{ selectedRows }` | Dropdown items rendered inside the selected-row actions dropdown. |
 | `toolbar` | `{ selectedRows, filterSelection, filters, search, updateFilterSelection, updateSearch, refresh }` | Replaces the host-controlled toolbar content. The column visibility menu still renders as the rightmost toolbar control unless `hideColumnVisibility` is true. |
-| `toolbar-left` | `{ selectedRows, filterSelection, filters, search, updateFilterSelection, updateSearch, refresh }` | Renders before built-in bulk actions, search, and filters. |
+| `toolbar-left` | `{ selectedRows, filterSelection, filters, search, updateFilterSelection, updateSearch, refresh }` | Renders before built-in search, filters, and bulk actions. |
 | `toolbar-right` | `{ selectedRows, filterSelection, filters, search, updateFilterSelection, updateSearch, refresh }` | Renders before the built-in column visibility menu. |
 | `outside-actions` | `{ selectedRows, filterSelection, filters, search, updateFilterSelection, updateSearch, refresh }` | Always-mounted renderless slot for custom controls that host apps Teleport outside the visible table toolbar. |
 | `filter-${header.key}` | None | Forwards custom filter popover content to the built-in KFilterGroup. The host app must update `v-model:filter-selection` when custom filter values are applied or cleared. |
@@ -540,6 +562,7 @@ Use a template ref on `TableDataGrid` to call these methods.
 - `TableDataGridPinnedState`
 - `TableDataGridState`
 - `TableDataGridStatePayload`
+- `TableDataGridColumnConfig`
 - `TableDataGridConfig`
 - `TableDataGridHeader`
 - `TableDataGridFetcherParams`

package/dist/style.css

@@ -1 +1 @@
-.datatable-cell-content[data-v-0e73bfa7]{align-items:center;display:flex;height:100%;min-width:0;width:100%}.table-data-grid-header{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;box-shadow:none;box-sizing:border-box;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);display:inline-flex;flex-wrap:nowrap;font-family:Inter,Roboto,Helvetica,sans-serif;font-family:var(--kui-font-family-text, "Inter", Roboto, Helvetica, sans-serif);font-size:14px;font-size:var(--kui-font-size-30, 14px);font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);gap:6px;gap:var(--kui-space-30, 6px);height:100%;line-height:20px;line-height:var(--kui-line-height-30, 20px);margin:0;min-width:0;padding:0;text-align:left;width:100%}.table-data-grid-header.is-sortable{cursor:pointer}.table-data-grid-header.is-sorted{color:#0044f4;color:var(--kui-color-text-primary, #0044f4)}.table-data-grid-header:focus{outline:none}.table-data-grid-header:focus-visible{border-radius:2px;border-radius:var(--kui-border-radius-10, 2px);box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2))}.header-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tooltip,.header-tooltip-trigger,.header-sort-icon{display:inline-flex;flex-shrink:0}.header-tooltip-trigger{cursor:help}.header-tooltip-icon{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.header-sort-icon{color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5)}.is-sorted .header-sort-icon{color:#0044f4;color:var(--kui-color-text-primary, #0044f4)}.header-tooltip :deep(svg),.header-sort-icon :deep(svg){color:currentColor;display:block;flex-shrink:0}.table-data-grid-column-visibility-menu[data-v-c7a3d29f]{line-height:12px;line-height:var(--kui-line-height-10, 12px)}.table-data-grid-column-visibility-menu .column-search-wrapper[data-v-c7a3d29f]{padding:6px;padding:var(--kui-space-30, 6px)}.table-data-grid-column-visibility-menu[data-v-c7a3d29f] .k-input.column-search{max-width:100%;width:100%}.table-data-grid-column-visibility-menu[data-v-c7a3d29f] .k-input.column-search ::-webkit-search-cancel-button{-webkit-appearance:none}.table-data-grid-column-visibility-menu .column-items[data-v-c7a3d29f]{max-height:250px;overflow-y:auto}.table-data-grid-column-visibility-menu .column-visibility-item[data-v-c7a3d29f]{align-items:center;display:flex}.table-data-grid-column-visibility-menu .column-label[data-v-c7a3d29f]{cursor:pointer;display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-data-grid-column-visibility-menu .column-actions[data-v-c7a3d29f]{display:flex;justify-content:flex-end;padding:4px;padding:var(--kui-space-20, 4px)}.table-data-grid-column-visibility-menu .clear-search[data-v-c7a3d29f]{flex-shrink:0}.datatable-search[data-v-9d5cbebc]{align-items:center;display:flex;min-width:0}[data-v-9d5cbebc] .k-input.datatable-search-input{max-width:100%;min-width:220px;width:260px}[data-v-9d5cbebc] .k-input.datatable-search-input ::-webkit-search-cancel-button{-webkit-appearance:none}.clear-search[data-v-9d5cbebc]{flex-shrink:0}.kong-ui-public-table-data-grid[data-v-b0aefb40]{border:1px solid #e0e4ea;border:1px solid var(--kui-color-border, #e0e4ea);border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);display:flex;flex-direction:column;gap:0;height:100%;min-height:360px;overflow:hidden;position:relative;width:100%}.datatable-toolbar[data-v-b0aefb40]{align-items:center;background:#fff;background:var(--kui-color-background, #ffffff);border-bottom:1px solid #e0e4ea;border-bottom:1px solid var(--kui-color-border, #e0e4ea);display:flex;gap:8px;gap:var(--kui-space-40, 8px);justify-content:space-between;padding:6px;padding:var(--kui-space-30, 6px)}.datatable-outside-actions-host[data-v-b0aefb40]{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.datatable-toolbar-primary[data-v-b0aefb40]{align-items:center;display:flex;flex:1 1 auto;gap:8px;gap:var(--kui-space-40, 8px);min-width:0}.datatable-toolbar-secondary[data-v-b0aefb40]{align-items:center;display:flex;flex:0 0 auto;gap:8px;gap:var(--kui-space-40, 8px);min-width:0}.datatable-toolbar-selection[data-v-b0aefb40]{align-items:center;display:flex;min-width:0}.datatable-bulk-actions-dropdown[data-v-b0aefb40] .k-button.datatable-bulk-actions-trigger{border-width:1px;border-width:var(--kui-border-width-10, 1px);font-size:14px;font-size:var(--kui-font-size-30, 14px);width:140px}.table-data-grid-grid[data-v-b0aefb40]{flex:1 1 420px;min-height:0;width:100%}.table-data-grid-grid[data-v-b0aefb40] .ag-header-cell{border-right:1px solid #e0e4ea;border-right:1px solid var(--kui-color-border, #e0e4ea)}.table-data-grid-grid[data-v-b0aefb40] .ag-header-cell[col-id=ag-Grid-SelectionColumn]{border-right:0;gap:0}.table-data-grid-grid[data-v-b0aefb40] .ag-header-cell-resize:after{display:none}.table-data-grid-grid[data-v-b0aefb40] .ag-root-wrapper{border:0;border-radius:0}.table-data-grid-grid[data-v-b0aefb40] .ag-cell{align-items:center;display:flex}.table-data-grid-grid[data-v-b0aefb40] .ag-cell-wrapper,.table-data-grid-grid[data-v-b0aefb40] .ag-cell-value{align-items:center;display:flex;height:100%;min-width:0;width:100%}.datatable-pagination[data-v-b0aefb40]{background:#fff;background:var(--kui-color-background, #ffffff);border-top:1px solid #e0e4ea;border-top:1px solid var(--kui-color-border, #e0e4ea);padding:4px 12px 6px;padding:var(--kui-space-20, 4px) var(--kui-space-50, 12px) var(--kui-space-30, 6px)}.datatable-pagination-control[data-v-b0aefb40]{margin-top:0;padding:0;width:100%}.datatable-pagination-control[data-v-b0aefb40] .pagination-text.large-screen{padding-left:8px;padding-left:var(--kui-space-40, 8px)}.datatable-pagination-control[data-v-b0aefb40] .pagination-button.placeholder{align-items:center;box-sizing:border-box;display:flex;justify-content:center}
+.datatable-cell-content[data-v-464159b9]{align-items:center;display:flex;height:100%;min-width:0;width:100%}.table-data-grid-header{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;box-shadow:none;box-sizing:border-box;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);display:inline-flex;flex-wrap:nowrap;font-family:Inter,Roboto,Helvetica,sans-serif;font-family:var(--kui-font-family-text, "Inter", Roboto, Helvetica, sans-serif);font-size:14px;font-size:var(--kui-font-size-30, 14px);font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);gap:6px;gap:var(--kui-space-30, 6px);height:100%;line-height:20px;line-height:var(--kui-line-height-30, 20px);margin:0;min-width:0;padding:0;text-align:left;width:100%}.table-data-grid-header.is-sortable{cursor:pointer}.table-data-grid-header.is-sorted{color:#0044f4;color:var(--kui-color-text-primary, #0044f4)}.table-data-grid-header:focus{outline:none}.table-data-grid-header:focus-visible{border-radius:2px;border-radius:var(--kui-border-radius-10, 2px);box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2))}.header-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tooltip,.header-tooltip-trigger,.header-sort-icon{display:inline-flex;flex-shrink:0}.header-tooltip-trigger{cursor:help}.header-tooltip-icon{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.header-sort-icon{color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5)}.is-sorted .header-sort-icon{color:#0044f4;color:var(--kui-color-text-primary, #0044f4)}.header-tooltip svg,.header-sort-icon svg{color:currentColor;display:block;flex-shrink:0}.datatable-selection-cell[data-v-938085bb]{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.datatable-selection-checkbox[data-v-938085bb]{margin:0}.datatable-selection-header[data-v-456d84ae]{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.datatable-selection-checkbox[data-v-456d84ae]{margin:0}.table-data-grid-grid[data-v-2a165223]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-resize-handle-color: transparent;--ag-selected-row-background-color: var(--kui-color-background-primary-weakest, #eefaff);--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 420px;min-height:0;width:100%}.datatable-pagination[data-v-2a165223]{background:#fff;background:var(--kui-color-background, #ffffff);border-top:1px solid #e0e4ea;border-top:1px solid var(--kui-color-border, #e0e4ea);padding:4px 12px 6px;padding:var(--kui-space-20, 4px) var(--kui-space-50, 12px) var(--kui-space-30, 6px)}.datatable-pagination-control[data-v-2a165223]{margin-top:0;padding:0;width:100%}.pagination-text.large-screen{padding-left:8px;padding-left:var(--kui-space-40, 8px)}.ag-header-cell[col-id=ag-Grid-SelectionColumn]{--ag-header-column-border: none;border-right:0;gap:0}.ag-cell{align-items:center;display:flex}.ag-cell-wrapper,.ag-cell-value,.datatable-cell-content{align-items:center;display:flex;height:100%;min-width:0;width:100%}.pagination-button.placeholder{box-sizing:border-box}.datatable-search[data-v-9d5cbebc]{align-items:center;display:flex;min-width:0}[data-v-9d5cbebc] .k-input.datatable-search-input{max-width:100%;min-width:220px;width:260px}[data-v-9d5cbebc] .k-input.datatable-search-input ::-webkit-search-cancel-button{-webkit-appearance:none}.clear-search[data-v-9d5cbebc]{flex-shrink:0}.table-data-grid-column-visibility-menu[data-v-c7a3d29f]{line-height:12px;line-height:var(--kui-line-height-10, 12px)}.table-data-grid-column-visibility-menu .column-search-wrapper[data-v-c7a3d29f]{padding:6px;padding:var(--kui-space-30, 6px)}.table-data-grid-column-visibility-menu[data-v-c7a3d29f] .k-input.column-search{max-width:100%;width:100%}.table-data-grid-column-visibility-menu[data-v-c7a3d29f] .k-input.column-search ::-webkit-search-cancel-button{-webkit-appearance:none}.table-data-grid-column-visibility-menu .column-items[data-v-c7a3d29f]{max-height:250px;overflow-y:auto}.table-data-grid-column-visibility-menu .column-visibility-item[data-v-c7a3d29f]{align-items:center;display:flex}.table-data-grid-column-visibility-menu .column-label[data-v-c7a3d29f]{cursor:pointer;display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-data-grid-column-visibility-menu .column-actions[data-v-c7a3d29f]{display:flex;justify-content:flex-end;padding:4px;padding:var(--kui-space-20, 4px)}.table-data-grid-column-visibility-menu .clear-search[data-v-c7a3d29f]{flex-shrink:0}.datatable-toolbar[data-v-257c452e]{align-items:center;background:#fff;background:var(--kui-color-background, #ffffff);border-bottom:1px solid #e0e4ea;border-bottom:1px solid var(--kui-color-border, #e0e4ea);display:flex;gap:8px;gap:var(--kui-space-40, 8px);justify-content:space-between;padding:6px;padding:var(--kui-space-30, 6px)}.datatable-toolbar-primary[data-v-257c452e]{align-items:center;display:flex;flex:1 1 auto;gap:8px;gap:var(--kui-space-40, 8px);min-width:0}.datatable-toolbar-secondary[data-v-257c452e]{align-items:center;display:flex;flex:0 0 auto;gap:8px;gap:var(--kui-space-40, 8px);min-width:0}.datatable-toolbar-selection[data-v-257c452e]{align-items:center;display:flex;min-width:0}.datatable-bulk-actions-dropdown[data-v-257c452e] .k-button.datatable-bulk-actions-trigger{border-width:1px;border-width:var(--kui-border-width-10, 1px);font-size:14px;font-size:var(--kui-font-size-30, 14px);width:140px}.datatable-outside-actions-host[data-v-97158669]{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.kong-ui-public-table-data-grid[data-v-8fd5824b]{border:1px solid #e0e4ea;border:1px solid var(--kui-color-border, #e0e4ea);border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);display:flex;flex-direction:column;gap:0;height:100%;min-height:360px;overflow:hidden;position:relative;width:100%}