@forgedevstack/grid-table 1.0.2 → 1.0.3
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/CHANGELOG.md +13 -0
- package/README.md +20 -3
- package/dist/grid-table.css +1 -1
- package/dist/index.d.mts +134 -103
- package/dist/index.d.ts +134 -103
- package/dist/index.js +824 -343
- package/dist/index.mjs +813 -330
- package/package.json +7 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,19 @@ All notable changes to grid-table will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.0.3] - 2026-02-07
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **Overflow tooltip**: When cell content is truncated, show full content on hover. Table prop `showOverflowTooltip` (default `true`); override per column with `showOverflowTooltip: true | false`.
|
|
13
|
+
- **Expandable sub-cell**: Optional extra content per cell, expandable by double-click or arrow. Column: `renderSubCell: (row) => ReactNode`, `subCellExpandTrigger: 'doubleClick' | 'arrow' | 'both'`. Table prop `subCellExpandTrigger` sets default for all columns. State in context (`expandedCellIds`, `toggleCellExpansion`).
|
|
14
|
+
- **Cell auto-size on double-click**: Table prop `enableCellAutoSizeOnDoubleClick`. When `true`, double-clicking a truncated cell (without sub-cell) expands that cell to fit content. State: `autoSizedCellIds`, `toggleCellAutoSize` in context.
|
|
15
|
+
- **Expand row on double-click**: Table prop `expandRowOnDoubleClick`. When `true`, double-clicking a row toggles row expansion (`renderRowExpansion`). All rows can show one full-width sub-row when expanded.
|
|
16
|
+
- **Table-level options**: All cell/row expand and tooltip options are configurable via GridTable props: `showOverflowTooltip`, `enableCellAutoSizeOnDoubleClick`, `subCellExpandTrigger`, `expandRowOnDoubleClick`. Column definitions can override where applicable.
|
|
17
|
+
- **@forgedevstack/bear integration**: Grid-table uses Bear (ForgeStack) for checkboxes, overflow tooltip, and theme. Peer dependency `@forgedevstack/bear`; Bear styles are imported from grid-table entry so one import brings them in. Theme controllable via `themeMode: 'light' | 'dark' | 'system'` prop.
|
|
18
|
+
- **Header/body alignment**: Expand column spacer in header when `enableRowExpansion` so column names align with data. Header cell widths use explicit px for consistency.
|
|
19
|
+
- **Sub-row (renderRowExpansion)**: Signature is now `(row: T, rowId: string | number) => ReactNode`. User controls content (editable form, sub-table, etc.) and can use `rowId` for save/update.
|
|
20
|
+
|
|
8
21
|
## [1.0.2] - 2026-01-17
|
|
9
22
|
|
|
10
23
|
### Changed
|
package/README.md
CHANGED
|
@@ -17,6 +17,8 @@ A powerful, headless grid table component for React with SCSS styling, drag-and-
|
|
|
17
17
|
- **Responsive**: Mobile-first design with drawer for filters/sorting
|
|
18
18
|
- **Skeleton Loading**: Beautiful loading states
|
|
19
19
|
- **Empty States**: Customizable empty state component
|
|
20
|
+
- **Overflow tooltip**: Show full cell content on hover when truncated (per-column `showOverflowTooltip`)
|
|
21
|
+
- **Expandable sub-cell**: Extra content per cell via double-click or arrow; `renderSubCell` and `subCellExpandTrigger`
|
|
20
22
|
- **Context API**: No prop drilling, access state from anywhere
|
|
21
23
|
- **TypeScript**: Full type safety
|
|
22
24
|
- **Accessible**: ARIA attributes and keyboard navigation
|
|
@@ -31,16 +33,23 @@ pnpm add @forgedevstack/grid-table
|
|
|
31
33
|
yarn add @forgedevstack/grid-table
|
|
32
34
|
```
|
|
33
35
|
|
|
36
|
+
### Dependencies
|
|
37
|
+
|
|
38
|
+
Grid-table is part of ForgeStack and uses **@forgedevstack/bear** for checkboxes, tooltips, and theming. Install Bear (peer dependency):
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install @forgedevstack/grid-table @forgedevstack/bear
|
|
42
|
+
```
|
|
43
|
+
|
|
34
44
|
### Import CSS (Required)
|
|
35
45
|
|
|
36
|
-
|
|
46
|
+
Import the grid-table CSS once in your app. Bear styles are loaded automatically when you import from grid-table:
|
|
37
47
|
|
|
38
48
|
```tsx
|
|
39
|
-
// In your main entry file (e.g., main.tsx, App.tsx, or index.css)
|
|
40
49
|
import '@forgedevstack/grid-table/grid-table.css';
|
|
41
50
|
```
|
|
42
51
|
|
|
43
|
-
|
|
52
|
+
No need to import Bear styles separately; the grid-table entry pulls them in.
|
|
44
53
|
|
|
45
54
|
## Quick Start
|
|
46
55
|
|
|
@@ -235,6 +244,11 @@ const columns: ColumnDefinition<User>[] = [
|
|
|
235
244
|
| `showPagination` | `boolean` | `true` | Show pagination controls |
|
|
236
245
|
| `showFilter` | `boolean` | `true` | Show filter controls |
|
|
237
246
|
| `showGlobalFilter` | `boolean` | `true` | Show global search |
|
|
247
|
+
| `showOverflowTooltip` | `boolean` | `true` | Show full content on hover when cell is truncated |
|
|
248
|
+
| `enableCellAutoSizeOnDoubleClick` | `boolean` | `false` | Double-click cell to expand width to fit content |
|
|
249
|
+
| `subCellExpandTrigger` | `'doubleClick' \| 'arrow' \| 'both'` | `'both'` | Default trigger for sub-cell expand |
|
|
250
|
+
| `expandRowOnDoubleClick` | `boolean` | `false` | Double-click row to toggle row expansion |
|
|
251
|
+
| `themeMode` | `'light' \| 'dark' \| 'system'` | — | Control theme for table (and Bear components) |
|
|
238
252
|
| `stickyHeader` | `boolean` | `true` | Sticky header on scroll |
|
|
239
253
|
|
|
240
254
|
### ColumnDefinition
|
|
@@ -257,6 +271,9 @@ const columns: ColumnDefinition<User>[] = [
|
|
|
257
271
|
| `filterOptions` | `FilterOption[]` | Options for select filter |
|
|
258
272
|
| `sortFn` | `(a, b, dir) => number` | Custom sort function |
|
|
259
273
|
| `filterFn` | `(value, filter, op) => boolean` | Custom filter function |
|
|
274
|
+
| `showOverflowTooltip` | `boolean` | When truncated, show full content on hover (default true) |
|
|
275
|
+
| `renderSubCell` | `(row) => ReactNode` | Optional expandable sub-content below cell |
|
|
276
|
+
| `subCellExpandTrigger` | `'doubleClick' \| 'arrow' \| 'both'` | How to expand sub-cell (default `'both'`) |
|
|
260
277
|
|
|
261
278
|
## License
|
|
262
279
|
|
package/dist/grid-table.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-table{background-color:var(--gt-bg-primary, #ffffff);border-radius:.5rem;border:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06));overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:14px;line-height:1.5;width:100%;display:flex;flex-direction:column}.grid-table-container{overflow:auto;width:100%}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-header{display:flex;background-color:var(--gt-bg-secondary, #f5f5f5);width:100%;min-width:100%}.grid-header-cell{position:relative;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;font-weight:500;font-size:.875rem;color:var(--gt-text-secondary, #595959);user-select:none;border-bottom:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06));transition:color,background-color;transition-duration:.15s;flex-shrink:0;flex:1 1 auto;min-width:0}.grid-header-cell:hover{color:var(--gt-text-primary, #262626);background-color:var(--gt-bg-hover, #e0e0e0)}.grid-header-cell.sticky-left,.grid-header-cell.sticky-right{box-shadow:2px 0 4px -2px rgba(0,0,0,.2)}.grid-header>.relative:last-child .grid-header-cell{flex:1 1 auto !important;width:auto !important;min-width:0 !important;max-width:none !important}.grid-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.grid-header-sort{display:flex;align-items:center;justify-content:center;gap:.125rem}.grid-header-filter{padding:.25rem;border-radius:.25rem;transition:background-color;transition-duration:.15s}.grid-header-filter:hover{background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-header-resize{position:absolute;right:0;top:0;bottom:0;width:.25rem;cursor:col-resize;transition:background-color;transition-duration:.15s}.grid-header-resize:hover{background-color:var(--gt-accent-primary, #1890ff)}.grid-header-select{display:flex;align-items:center;justify-content:center;padding:0 .5rem;border-bottom:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06))}.grid-header-checkbox{width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-header-actions{display:flex;align-items:center;justify-content:center;gap:.25rem}.grid-header-actions button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;padding:.25rem;background-color:rgba(0,0,0,0);color:var(--gt-text-secondary, #808080);width:1.5rem;height:1.5rem}.grid-header-actions button:hover{background-color:var(--gt-bg-hover, #e0e0e0);color:var(--gt-text-primary, #262626)}.icon-sm{width:.875rem;height:.875rem}.icon-md{width:1rem;height:1rem}.icon-lg{width:4rem;height:4rem}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-body{display:flex;flex-direction:column;background-color:var(--gt-bg-primary, #ffffff);width:100%}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-row{display:flex;align-items:stretch;border-bottom:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06));transition:background-color;transition-duration:.15s;cursor:default;width:100%;min-width:100%}.grid-row:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.grid-row.selected{background-color:rgba(24,144,255,.1)}.grid-row.disabled{opacity:.5;cursor:not-allowed}.grid-row.clickable{cursor:pointer}.grid-row-select{display:flex;align-items:center;justify-content:center;padding:0 .5rem}.grid-row-checkbox{width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-row-expand{display:flex;align-items:center;justify-content:center;padding:0 .5rem}.grid-row-expand-button{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:background-color;transition-duration:.15s}.grid-row-expand-button:hover{background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-row-expansion{border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:var(--gt-bg-secondary, #2b2b2b);padding:1rem}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-cell{display:flex;align-items:center;padding:.75rem 1rem;flex-shrink:0;flex:1 1 auto;min-width:0}.grid-cell.sticky-left,.grid-cell.sticky-right{box-shadow:2px 0 4px -2px rgba(0,0,0,.2)}.grid-row>.grid-cell:last-child{flex:1 1 auto !important;width:auto !important;min-width:0 !important;max-width:none !important}.grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gt-text-primary, #262626)}.grid-cell-label{font-weight:500;color:var(--gt-text-muted, #606060);margin-right:.5rem;font-size:.875rem}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-table-toolbar .toolbar-search-wrapper{flex:1;position:relative}.grid-table-toolbar input{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.grid-table-toolbar input:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.grid-table-toolbar input{width:100%;padding-left:2.5rem;padding-right:.75rem;padding-top:.5rem;padding-bottom:.5rem;font-size:.875rem}.grid-table-toolbar .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--gt-text-muted, #606060);pointer-events:none}.grid-table-toolbar .clear-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--gt-text-muted, #606060);background:none;border:none;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;transition:color;transition-duration:.15s}.grid-table-toolbar .clear-button:hover{color:var(--gt-text-primary, #a9b7c6)}.grid-table-toolbar .filter-badge{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));color:var(--gt-text-secondary, #808080);transition:background-color;transition-duration:.15s}.grid-table-toolbar .filter-badge:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.grid-table-toolbar .toolbar-actions{display:flex;align-items:center;justify-content:center;gap:.5rem}.grid-table-toolbar .toolbar-action-button{padding:.5rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:rgba(0,0,0,0);transition:background-color;transition-duration:.15s}.grid-table-toolbar .toolbar-action-button:hover{background-color:var(--gt-bg-hover, #4e4e4e)}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.75rem 1rem;border-top:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:var(--gt-bg-secondary, #2b2b2b);font-size:.875rem;color:var(--gt-text-secondary, #808080)}.grid-pagination-info{display:flex;align-items:center;justify-content:center;gap:1rem}.grid-pagination-range{font-size:.875rem;color:var(--gt-text-secondary, #808080)}.grid-pagination-size{display:flex;align-items:center;justify-content:center;gap:.5rem}.grid-pagination-size label{font-size:.875rem;color:var(--gt-text-muted, #606060)}.grid-pagination-size select{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.grid-pagination-size select:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.grid-pagination-size select{padding:.25rem .5rem;font-size:.875rem}.grid-pagination-controls{display:flex;align-items:center;justify-content:center;gap:.25rem}.grid-pagination-pages{display:flex;align-items:center;justify-content:center;gap:.25rem}.grid-pagination button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;padding:.5rem;background-color:var(--gt-bg-primary, #1e1e1e);color:var(--gt-text-primary, #a9b7c6);min-width:2rem;height:2rem;font-size:.875rem}.grid-pagination button:hover:not(:disabled){background-color:var(--gt-bg-hover, #4e4e4e)}.grid-pagination button:disabled{opacity:.5;cursor:not-allowed}.grid-pagination button.active{background-color:var(--gt-accent-primary, #1890ff);color:#fff}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.filter-popup{position:absolute;z-index:50;background-color:var(--gt-bg-primary, #1e1e1e);border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);min-width:280px}.filter-popup-header{padding:.75rem 1rem;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.filter-popup-header .header-content{display:flex;align-items:center;justify-content:space-between}.filter-popup-header .header-title{font-weight:500;color:var(--gt-text-primary, #a9b7c6)}.filter-popup-header .header-close{padding:.25rem;border-radius:.25rem;background:none;border:none;cursor:pointer;color:var(--gt-text-muted, #606060);transition:background-color,color;transition-duration:.15s}.filter-popup-header .header-close:hover{background-color:var(--gt-bg-hover, #4e4e4e);color:var(--gt-text-primary, #a9b7c6)}.filter-popup-body{padding:1rem}.filter-popup-body .filter-field{margin-bottom:1rem}.filter-popup-body .filter-field:last-child{margin-bottom:0}.filter-popup-body label{display:block;font-size:.75rem;color:var(--gt-text-muted, #606060);margin-bottom:.25rem}.filter-popup-body input,.filter-popup-body select{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.filter-popup-body input:focus,.filter-popup-body select:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.filter-popup-body input,.filter-popup-body select{width:100%;padding:.5rem .75rem;font-size:.875rem}.filter-popup-footer{padding:.75rem 1rem;border-top:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));display:flex;align-items:center;justify-content:space-between}.filter-popup-footer button{padding:.375rem .75rem;font-size:.875rem;border-radius:.25rem;border:none;cursor:pointer;transition:background-color,color,opacity;transition-duration:.15s}.filter-popup-footer .filter-clear{color:var(--gt-text-muted, #606060)}.filter-popup-footer .filter-clear:hover{color:var(--gt-text-primary, #a9b7c6)}.filter-popup-footer .filter-apply{background-color:var(--gt-accent-primary, #1890ff);color:#fff}.filter-popup-footer .filter-apply:hover{opacity:.9}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.mobile-drawer-container{position:fixed;inset:0;z-index:50}.mobile-drawer-overlay{position:absolute;inset:0;background-color:#000;transition:opacity;transition-duration:.15s}.mobile-drawer{position:absolute;bottom:0;left:0;right:0;background-color:var(--gt-bg-primary, #1e1e1e);border-radius:1rem 1rem 0 0;box-shadow:0 -4px 6px -1px rgba(0,0,0,.1),0 -2px 4px -1px rgba(0,0,0,.06);max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.drawer-header h3{font-size:1.125rem;font-weight:500;color:var(--gt-text-primary, #a9b7c6)}.drawer-header button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;padding:.5rem;background-color:rgba(0,0,0,0);color:var(--gt-text-secondary, #808080)}.drawer-header button:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.drawer-content{flex:1;overflow-y:auto}.drawer-filter-content,.drawer-sort-content,.drawer-columns-content{padding:1rem}.drawer-filter-content>div:first-child,.drawer-sort-content>div:first-child,.drawer-columns-content>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.drawer-filter-content>div:first-child button,.drawer-sort-content>div:first-child button,.drawer-columns-content>div:first-child button{font-size:.875rem;color:var(--gt-accent-primary, #1890ff);background:none;border:none;cursor:pointer;text-decoration:underline}.drawer-filter-content>div:first-child button:hover,.drawer-sort-content>div:first-child button:hover,.drawer-columns-content>div:first-child button:hover{text-decoration:none}.filter-item{margin-bottom:.75rem}.filter-item label{display:block;font-size:.875rem;font-weight:500;color:var(--gt-text-secondary, #808080);margin-bottom:.25rem}.filter-item input{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.filter-item input:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.filter-item input{width:100%;padding:.5rem .75rem;font-size:.875rem}.drawer-sort-content button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;width:100%;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;margin-bottom:.5rem;background-color:rgba(0,0,0,0);color:var(--gt-text-primary, #a9b7c6);font-size:.875rem}.drawer-sort-content button.active{border-color:var(--gt-accent-primary, #1890ff);background-color:rgba(24,144,255,.1)}.drawer-sort-content button:hover:not(.active){background-color:var(--gt-bg-hover, #4e4e4e)}.drawer-columns-content label{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.5rem .75rem;border-radius:.25rem;cursor:pointer;transition:background-color;transition-duration:.15s}.drawer-columns-content label:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.drawer-columns-content label input[type=checkbox]{width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.drawer-columns-content label span{font-size:.875rem;color:var(--gt-text-primary, #a9b7c6)}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-skeleton{background-color:var(--gt-bg-primary, #1e1e1e)}.grid-skeleton-header{display:flex;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:var(--gt-bg-secondary, #2b2b2b)}.grid-skeleton-header>div{padding:.75rem 1rem;flex-shrink:0}.grid-skeleton-header>div>div{border-radius:.25rem;background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-skeleton-header>div>div.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.grid-skeleton-body{background-color:var(--gt-bg-primary, #1e1e1e)}.grid-skeleton-row{display:flex;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-skeleton-cell{padding:.75rem 1rem;flex-shrink:0}.grid-skeleton-cell>div{border-radius:.25rem;background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-skeleton-cell>div.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;background-color:var(--gt-bg-primary, #1e1e1e)}.grid-empty-icon{margin-bottom:1rem;color:var(--gt-text-muted, #606060);font-size:2.25rem}.grid-empty-icon svg{width:4rem;height:4rem}.grid-empty-title{font-size:1.125rem;font-weight:500;color:var(--gt-text-primary, #a9b7c6);margin-bottom:.5rem}.grid-empty-description{font-size:.875rem;color:var(--gt-text-muted, #606060);max-width:24rem;margin-bottom:1rem}.grid-empty-action{margin-top:1rem}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.flex{display:flex}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.shadow-xl{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-10{padding-left:2.5rem}.pr-3{padding-right:.75rem}.w-full{width:100%}.w-4{width:1rem}.h-4{height:1rem}.w-3\.5{width:.875rem}.h-3\.5{height:.875rem}.min-w-\[280px\]{min-width:280px}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-white{color:#fff}.font-medium{font-weight:500}.left-3{left:.75rem}.right-3{right:.75rem}.top-1\/2{top:50%}.-translate-y-1\/2{transform:translateY(-50%)}.z-50{z-index:50}.mr-2{margin-right:.5rem}.mb-1{margin-bottom:.25rem}.mt-1{margin-top:.25rem}.space-y-4>*+*{margin-top:1rem}.opacity-90{opacity:.9}.cursor-pointer{cursor:pointer}.cursor-col-resize{cursor:col-resize}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.flex-shrink-0{flex-shrink:0}@media(max-width: 768px){.w-full-sm{width:100%}}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.bg-theme-primary{background-color:var(--gt-bg-primary, #1e1e1e) !important}.bg-theme-secondary{background-color:var(--gt-bg-secondary, #2b2b2b) !important}.bg-theme-tertiary{background-color:var(--gt-bg-tertiary, #3c3c3c) !important}.bg-theme-hover{background-color:var(--gt-bg-hover, #4e4e4e) !important}.text-theme-primary{color:var(--gt-text-primary, #a9b7c6) !important}.text-theme-secondary{color:var(--gt-text-secondary, #808080) !important}.text-theme-muted{color:var(--gt-text-muted, #606060) !important}.border-theme-border{border-color:var(--gt-border-color, rgba(255, 255, 255, 0.08)) !important}.bg-accent-primary{background-color:var(--gt-accent-primary, #1890ff) !important}.text-accent-primary{color:var(--gt-accent-primary, #1890ff) !important}.bg-accent-primary\/10{background-color:rgba(24,144,255,.1) !important}.hover\:bg-theme-hover:hover{background-color:var(--gt-bg-hover, #4e4e4e) !important}.hover\:text-theme-primary:hover{color:var(--gt-text-primary, #a9b7c6) !important}.hover\:bg-accent-primary\/90:hover{background-color:rgba(24,144,255,.9) !important}.hover\:bg-theme-tertiary:hover{background-color:var(--gt-bg-tertiary, #3c3c3c) !important}.hover\:opacity-90:hover{opacity:.9}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #a9b7c6;--gt-text-secondary: #808080;--gt-text-muted: #606060;--gt-border-color: rgba(255, 255, 255, 0.08);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}@media(max-width: 768px){.grid-row{flex-wrap:wrap;gap:.5rem;padding:1rem}.grid-cell{width:100%;padding:.25rem 0}}
|
|
1
|
+
:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-table{background-color:var(--gt-bg-primary, #ffffff);border-radius:.5rem;border:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06));overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:14px;line-height:1.5;width:100%;display:flex;flex-direction:column}.grid-table-container{overflow:auto;width:100%}.grid-table-studio-layout{background-color:var(--gt-bg-primary)}.grid-table-studio-main{overflow:auto}.light .grid-table{color:var(--gt-text-primary)}.light .grid-table .grid-cell-value,.light .grid-table .grid-cell-value *,.light .grid-table .grid-cell-label,.light .grid-table .grid-header-cell,.light .grid-table .grid-header-content,.light .grid-table .grid-pagination,.light .grid-table .grid-pagination *,.light .grid-table .grid-table-toolbar,.light .grid-table .grid-table-toolbar input,.light .grid-table .grid-table-toolbar .search-icon,.light .grid-table .grid-table-toolbar .clear-button,.light .grid-table .grid-table-toolbar .filter-badge,.light .grid-table .grid-cell-subcell{color:var(--gt-text-primary)}.light .grid-table .grid-pagination-info span,.light .grid-table .grid-table-toolbar input::placeholder{color:var(--gt-text-secondary)}.light .grid-table input,.light .grid-table select,.light .grid-table button:not(.grid-cell-expand-trigger){color:var(--gt-text-primary);background-color:var(--gt-bg-primary);border-color:var(--gt-border-color)}.light .grid-table .grid-header-cell{background-color:var(--gt-bg-secondary)}.light .grid-table .grid-row{background-color:var(--gt-bg-primary)}.light .grid-table .grid-row:hover{background-color:var(--gt-bg-hover)}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-header{display:flex;background-color:var(--gt-bg-secondary, #f5f5f5);width:100%;min-width:100%}.grid-header-cell{position:relative;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;font-weight:500;font-size:.875rem;color:var(--gt-text-secondary, #595959);user-select:none;border-bottom:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06));transition:color,background-color;transition-duration:.15s;flex-shrink:0;min-width:0}.grid-header-cell:hover{color:var(--gt-text-primary, #262626);background-color:var(--gt-bg-hover, #e0e0e0)}.grid-header-cell.sticky-left,.grid-header-cell.sticky-right{box-shadow:2px 0 4px -2px rgba(0,0,0,.2)}.grid-header>.relative:last-child .grid-header-cell{flex:1 1 auto !important;width:auto !important;min-width:0 !important;max-width:none !important}.grid-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.grid-header-sort{display:flex;align-items:center;justify-content:center;gap:.125rem}.grid-header-filter{padding:.25rem;border-radius:.25rem;transition:background-color;transition-duration:.15s}.grid-header-filter:hover{background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-header-resize{position:absolute;right:0;top:0;bottom:0;width:.25rem;cursor:col-resize;transition:background-color;transition-duration:.15s}.grid-header-resize:hover{background-color:var(--gt-accent-primary, #1890ff)}.grid-header-select{display:flex;align-items:center;justify-content:center;padding:0 .5rem;border-bottom:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06))}.grid-header-expand-spacer{width:2.5rem;min-width:2.5rem;flex-shrink:0;border-bottom:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06))}.grid-header-checkbox{width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-header-actions{display:flex;align-items:center;justify-content:center;gap:.25rem}.grid-header-actions button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;padding:.25rem;background-color:rgba(0,0,0,0);color:var(--gt-text-secondary, #808080);width:1.5rem;height:1.5rem}.grid-header-actions button:hover{background-color:var(--gt-bg-hover, #e0e0e0);color:var(--gt-text-primary, #262626)}.icon-sm{width:.875rem;height:.875rem}.icon-md{width:1rem;height:1rem}.icon-lg{width:4rem;height:4rem}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-body{display:flex;flex-direction:column;background-color:var(--gt-bg-primary, #ffffff);width:100%}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-row{display:flex;align-items:stretch;border-bottom:1px solid var(--gt-border-color, rgba(0, 0, 0, 0.06));transition:background-color;transition-duration:.15s;cursor:default;width:100%;min-width:100%}.grid-row:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.grid-row.selected{background-color:rgba(24,144,255,.1)}.grid-row.disabled{opacity:.5;cursor:not-allowed}.grid-row.clickable{cursor:pointer}.grid-row-select{display:flex;align-items:center;justify-content:center;padding:0 .5rem}.grid-row-checkbox{width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-row-expand{display:flex;align-items:center;justify-content:center;padding:0 .5rem}.grid-row-expand-button{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:background-color;transition-duration:.15s}.grid-row-expand-button:hover{background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-row-expansion{border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:var(--gt-bg-secondary, #2b2b2b);padding:1rem}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-cell{display:flex;flex-direction:column;align-items:stretch;padding:.75rem 1rem;flex-shrink:0;min-width:0}.grid-cell.sticky-left,.grid-cell.sticky-right{box-shadow:2px 0 4px -2px rgba(0,0,0,.2)}.grid-cell-inner{display:flex;align-items:center;min-width:0;gap:.25rem}.grid-row>.grid-cell:last-child{flex:1 1 auto !important;width:auto !important;min-width:0 !important;max-width:none !important}.grid-cell-value{color:var(--gt-text-primary, #262626);display:block;min-width:0}.grid-cell-value--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block}.grid-cell-value--truncate>*,.grid-cell-value-text{display:block !important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-cell-value-wrapper{display:block;min-width:0;overflow:hidden}.grid-cell-highlight{background-color:var(--gt-accent-primary, #1890ff);color:inherit;padding:0 .125em;border-radius:.125rem;font-weight:500}.grid-cell-label{font-weight:500;color:var(--gt-text-muted, #606060);margin-right:.5rem;font-size:.875rem;flex-shrink:0}.grid-cell-expand-trigger{flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:.25rem;background:rgba(0,0,0,0);cursor:pointer;color:var(--gt-text-muted, #606060);transition:transform,color,background-color;transition-duration:.15s}.grid-cell-expand-trigger::after{content:"";display:inline-block;width:.35rem;height:.35rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:.25rem}.grid-cell-expand-trigger:hover{color:var(--gt-accent-primary, #1890ff);background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-cell-expand-trigger--expanded::after{transform:rotate(-135deg)}.grid-cell--auto-sized .grid-cell-value{white-space:normal;overflow:visible;text-overflow:clip}.grid-cell-subcell{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));font-size:.8125rem;color:var(--gt-text-secondary, #808080);min-width:0}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-table-toolbar .toolbar-search-wrapper{flex:1;position:relative}.grid-table-toolbar input{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.grid-table-toolbar input:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.grid-table-toolbar input{width:100%;padding-left:2.5rem;padding-right:.75rem;padding-top:.5rem;padding-bottom:.5rem;font-size:.875rem}.grid-table-toolbar .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--gt-text-muted, #606060);pointer-events:none}.grid-table-toolbar .clear-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--gt-text-muted, #606060);background:none;border:none;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;transition:color;transition-duration:.15s}.grid-table-toolbar .clear-button:hover{color:var(--gt-text-primary, #a9b7c6)}.grid-table-toolbar .filter-badge{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));color:var(--gt-text-secondary, #808080);transition:background-color;transition-duration:.15s}.grid-table-toolbar .filter-badge:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.grid-table-toolbar .toolbar-actions{display:flex;align-items:center;justify-content:center;gap:.5rem}.grid-table-toolbar .toolbar-action-button{padding:.5rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:rgba(0,0,0,0);transition:background-color;transition-duration:.15s}.grid-table-toolbar .toolbar-action-button:hover{background-color:var(--gt-bg-hover, #4e4e4e)}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.75rem 1rem;border-top:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:var(--gt-bg-secondary, #2b2b2b);font-size:.875rem;color:var(--gt-text-secondary, #808080)}.grid-pagination-info{display:flex;align-items:center;justify-content:center;gap:1rem}.grid-pagination-range{font-size:.875rem;color:var(--gt-text-secondary, #808080)}.grid-pagination-size{display:flex;align-items:center;justify-content:center;gap:.5rem}.grid-pagination-size label{font-size:.875rem;color:var(--gt-text-muted, #606060)}.grid-pagination-size select{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.grid-pagination-size select:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.grid-pagination-size select{padding:.25rem .5rem;font-size:.875rem}.grid-pagination-controls{display:flex;align-items:center;justify-content:center;gap:.25rem}.grid-pagination-pages{display:flex;align-items:center;justify-content:center;gap:.25rem}.grid-pagination button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;padding:.5rem;background-color:var(--gt-bg-primary, #1e1e1e);color:var(--gt-text-primary, #a9b7c6);min-width:2rem;height:2rem;font-size:.875rem}.grid-pagination button:hover:not(:disabled){background-color:var(--gt-bg-hover, #4e4e4e)}.grid-pagination button:disabled{opacity:.5;cursor:not-allowed}.grid-pagination button.active{background-color:var(--gt-accent-primary, #1890ff);color:#fff}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.filter-popup{position:absolute;z-index:50;background-color:var(--gt-bg-primary, #1e1e1e);border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);min-width:280px}.filter-popup-header{padding:.75rem 1rem;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.filter-popup-header .header-content{display:flex;align-items:center;justify-content:space-between}.filter-popup-header .header-title{font-weight:500;color:var(--gt-text-primary, #a9b7c6)}.filter-popup-header .header-close{padding:.25rem;border-radius:.25rem;background:none;border:none;cursor:pointer;color:var(--gt-text-muted, #606060);transition:background-color,color;transition-duration:.15s}.filter-popup-header .header-close:hover{background-color:var(--gt-bg-hover, #4e4e4e);color:var(--gt-text-primary, #a9b7c6)}.filter-popup-body{padding:1rem}.filter-popup-body .filter-field{margin-bottom:1rem}.filter-popup-body .filter-field:last-child{margin-bottom:0}.filter-popup-body label{display:block;font-size:.75rem;color:var(--gt-text-muted, #606060);margin-bottom:.25rem}.filter-popup-body input,.filter-popup-body select{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.filter-popup-body input:focus,.filter-popup-body select:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.filter-popup-body input,.filter-popup-body select{width:100%;padding:.5rem .75rem;font-size:.875rem}.filter-popup-footer{padding:.75rem 1rem;border-top:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));display:flex;align-items:center;justify-content:space-between}.filter-popup-footer button{padding:.375rem .75rem;font-size:.875rem;border-radius:.25rem;border:none;cursor:pointer;transition:background-color,color,opacity;transition-duration:.15s}.filter-popup-footer .filter-clear{color:var(--gt-text-muted, #606060)}.filter-popup-footer .filter-clear:hover{color:var(--gt-text-primary, #a9b7c6)}.filter-popup-footer .filter-apply{background-color:var(--gt-accent-primary, #1890ff);color:#fff}.filter-popup-footer .filter-apply:hover{opacity:.9}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.mobile-drawer-container{position:fixed;inset:0;z-index:50}.mobile-drawer-overlay{position:absolute;inset:0;background-color:#000;transition:opacity;transition-duration:.15s}.mobile-drawer{position:absolute;bottom:0;left:0;right:0;background-color:var(--gt-bg-primary, #1e1e1e);border-radius:1rem 1rem 0 0;box-shadow:0 -4px 6px -1px rgba(0,0,0,.1),0 -2px 4px -1px rgba(0,0,0,.06);max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.drawer-header h3{font-size:1.125rem;font-weight:500;color:var(--gt-text-primary, #a9b7c6)}.drawer-header button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;padding:.5rem;background-color:rgba(0,0,0,0);color:var(--gt-text-secondary, #808080)}.drawer-header button:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.drawer-content{flex:1;overflow-y:auto}.drawer-filter-content,.drawer-sort-content,.drawer-columns-content{padding:1rem}.drawer-filter-content>div:first-child,.drawer-sort-content>div:first-child,.drawer-columns-content>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.drawer-filter-content>div:first-child button,.drawer-sort-content>div:first-child button,.drawer-columns-content>div:first-child button{font-size:.875rem;color:var(--gt-accent-primary, #1890ff);background:none;border:none;cursor:pointer;text-decoration:underline}.drawer-filter-content>div:first-child button:hover,.drawer-sort-content>div:first-child button:hover,.drawer-columns-content>div:first-child button:hover{text-decoration:none}.filter-item{margin-bottom:.75rem}.filter-item label{display:block;font-size:.875rem;font-weight:500;color:var(--gt-text-secondary, #808080);margin-bottom:.25rem}.filter-item input{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;background-color:var(--gt-bg-secondary, #2b2b2b);color:var(--gt-text-primary, #a9b7c6);outline:none;transition:border-color,box-shadow;transition-duration:.15s}.filter-item input:focus{outline:none;border-color:var(--gt-accent-primary, #1890ff);box-shadow:0 0 0 2px rgba(24,144,255,.2)}.filter-item input{width:100%;padding:.5rem .75rem;font-size:.875rem}.drawer-sort-content button{border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));border-radius:.25rem;cursor:pointer;transition:background-color,color,border-color;transition-duration:.15s;width:100%;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;margin-bottom:.5rem;background-color:rgba(0,0,0,0);color:var(--gt-text-primary, #a9b7c6);font-size:.875rem}.drawer-sort-content button.active{border-color:var(--gt-accent-primary, #1890ff);background-color:rgba(24,144,255,.1)}.drawer-sort-content button:hover:not(.active){background-color:var(--gt-bg-hover, #4e4e4e)}.drawer-columns-content label{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.5rem .75rem;border-radius:.25rem;cursor:pointer;transition:background-color;transition-duration:.15s}.drawer-columns-content label:hover{background-color:var(--gt-bg-hover, #4e4e4e)}.drawer-columns-content label input[type=checkbox]{width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.drawer-columns-content label span{font-size:.875rem;color:var(--gt-text-primary, #a9b7c6)}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-skeleton{background-color:var(--gt-bg-primary, #1e1e1e)}.grid-skeleton-header{display:flex;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08));background-color:var(--gt-bg-secondary, #2b2b2b)}.grid-skeleton-header>div{padding:.75rem 1rem;flex-shrink:0}.grid-skeleton-header>div>div{border-radius:.25rem;background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-skeleton-header>div>div.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.grid-skeleton-body{background-color:var(--gt-bg-primary, #1e1e1e)}.grid-skeleton-row{display:flex;border-bottom:1px solid var(--gt-border-color, rgba(255, 255, 255, 0.08))}.grid-skeleton-cell{padding:.75rem 1rem;flex-shrink:0}.grid-skeleton-cell>div{border-radius:.25rem;background-color:var(--gt-bg-tertiary, #3c3c3c)}.grid-skeleton-cell>div.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.grid-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;background-color:var(--gt-bg-primary, #1e1e1e)}.grid-empty-icon{margin-bottom:1rem;color:var(--gt-text-muted, #606060);font-size:2.25rem}.grid-empty-icon svg{width:4rem;height:4rem}.grid-empty-title{font-size:1.125rem;font-weight:500;color:var(--gt-text-primary, #a9b7c6);margin-bottom:.5rem}.grid-empty-description{font-size:.875rem;color:var(--gt-text-muted, #606060);max-width:24rem;margin-bottom:1rem}.grid-empty-action{margin-top:1rem}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.flex{display:flex}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.shadow-xl{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-10{padding-left:2.5rem}.pr-3{padding-right:.75rem}.w-full{width:100%}.w-4{width:1rem}.h-4{height:1rem}.w-3\.5{width:.875rem}.h-3\.5{height:.875rem}.min-w-\[280px\]{min-width:280px}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-white{color:#fff}.font-medium{font-weight:500}.left-3{left:.75rem}.right-3{right:.75rem}.top-1\/2{top:50%}.-translate-y-1\/2{transform:translateY(-50%)}.z-50{z-index:50}.mr-2{margin-right:.5rem}.mb-1{margin-bottom:.25rem}.mt-1{margin-top:.25rem}.space-y-4>*+*{margin-top:1rem}.opacity-90{opacity:.9}.cursor-pointer{cursor:pointer}.cursor-col-resize{cursor:col-resize}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.flex-shrink-0{flex-shrink:0}@media(max-width: 768px){.w-full-sm{width:100%}}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.bg-theme-primary{background-color:var(--gt-bg-primary, #1e1e1e) !important}.bg-theme-secondary{background-color:var(--gt-bg-secondary, #2b2b2b) !important}.bg-theme-tertiary{background-color:var(--gt-bg-tertiary, #3c3c3c) !important}.bg-theme-hover{background-color:var(--gt-bg-hover, #4e4e4e) !important}.text-theme-primary{color:var(--gt-text-primary, #a9b7c6) !important}.text-theme-secondary{color:var(--gt-text-secondary, #808080) !important}.text-theme-muted{color:var(--gt-text-muted, #606060) !important}.border-theme-border{border-color:var(--gt-border-color, rgba(255, 255, 255, 0.08)) !important}.bg-accent-primary{background-color:var(--gt-accent-primary, #1890ff) !important}.text-accent-primary{color:var(--gt-accent-primary, #1890ff) !important}.bg-accent-primary\/10{background-color:rgba(24,144,255,.1) !important}.hover\:bg-theme-hover:hover{background-color:var(--gt-bg-hover, #4e4e4e) !important}.hover\:text-theme-primary:hover{color:var(--gt-text-primary, #a9b7c6) !important}.hover\:bg-accent-primary\/90:hover{background-color:rgba(24,144,255,.9) !important}.hover\:bg-theme-tertiary:hover{background-color:var(--gt-bg-tertiary, #3c3c3c) !important}.hover\:opacity-90:hover{opacity:.9}:root{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #262626;--gt-text-secondary: #595959;--gt-text-muted: #8c8c8c;--gt-border-color: rgba(0, 0, 0, 0.06);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}.light{--gt-bg-primary: #ffffff;--gt-bg-secondary: #f5f5f5;--gt-bg-tertiary: #ebebeb;--gt-bg-hover: #e0e0e0;--gt-text-primary: #171717;--gt-text-secondary: #525252;--gt-text-muted: #737373;--gt-border-color: rgba(0, 0, 0, 0.08);--gt-accent-primary: #2563eb;--gt-accent-success: #16a34a;--gt-accent-warning: #ca8a04;--gt-accent-error: #dc2626}html.dark,.dark{--gt-bg-primary: #1e1e1e;--gt-bg-secondary: #2b2b2b;--gt-bg-tertiary: #3c3c3c;--gt-bg-hover: #4e4e4e;--gt-text-primary: #e4e6eb;--gt-text-secondary: #b4b8c0;--gt-text-muted: #8c9199;--gt-border-color: rgba(255, 255, 255, 0.12);--gt-accent-primary: #1890ff;--gt-accent-success: #52c41a;--gt-accent-warning: #faad14;--gt-accent-error: #ff4d4f}@media(max-width: 768px){.grid-row{flex-wrap:wrap;gap:.5rem;padding:1rem}.grid-cell{width:100%;padding:.25rem 0}}
|
package/dist/index.d.mts
CHANGED
|
@@ -132,6 +132,9 @@ interface ColumnDefinition<T = unknown> {
|
|
|
132
132
|
sortFn?: (a: unknown, b: unknown, direction: SortDirection) => number;
|
|
133
133
|
filterFn?: (value: unknown, filterValue: unknown, operator: FilterOperator) => boolean;
|
|
134
134
|
meta?: Record<string, unknown>;
|
|
135
|
+
showOverflowTooltip?: boolean;
|
|
136
|
+
renderSubCell?: (row: T) => ReactNode;
|
|
137
|
+
subCellExpandTrigger?: 'doubleClick' | 'arrow' | 'both';
|
|
135
138
|
}
|
|
136
139
|
interface FilterOption {
|
|
137
140
|
value: string | number | boolean;
|
|
@@ -376,7 +379,7 @@ interface GridTableProps<T extends RowData = RowData> {
|
|
|
376
379
|
getRowStyle?: (row: T, index: number) => React.CSSProperties;
|
|
377
380
|
isRowDisabled?: (row: T) => boolean;
|
|
378
381
|
isRowSelectable?: (row: T) => boolean;
|
|
379
|
-
renderRowExpansion?: (row: T) => ReactNode;
|
|
382
|
+
renderRowExpansion?: (row: T, rowId: string | number) => ReactNode;
|
|
380
383
|
renderHeader?: () => ReactNode;
|
|
381
384
|
renderFooter?: () => ReactNode;
|
|
382
385
|
renderEmpty?: () => ReactNode;
|
|
@@ -425,6 +428,119 @@ interface GridTableRef<T extends RowData = RowData> {
|
|
|
425
428
|
exportData: (format: 'json' | 'csv') => void;
|
|
426
429
|
}
|
|
427
430
|
|
|
431
|
+
interface TableContextState<T extends RowData = RowData> {
|
|
432
|
+
data: T[];
|
|
433
|
+
originalData: T[];
|
|
434
|
+
columns: ColumnDefinition<T>[];
|
|
435
|
+
columnStates: ColumnState[];
|
|
436
|
+
sorting: SortValue[];
|
|
437
|
+
filters: FilterValue[];
|
|
438
|
+
globalFilter: string;
|
|
439
|
+
page: number;
|
|
440
|
+
pageSize: number;
|
|
441
|
+
totalItems: number;
|
|
442
|
+
selectedIds: Set<string | number>;
|
|
443
|
+
expandedIds: Set<string | number>;
|
|
444
|
+
expandedCellIds: Set<string>;
|
|
445
|
+
autoSizedColumnIds: Set<string>;
|
|
446
|
+
loading: boolean;
|
|
447
|
+
error: Error | string | null;
|
|
448
|
+
theme: Theme;
|
|
449
|
+
translations: Translations;
|
|
450
|
+
currentBreakpoint: Breakpoint;
|
|
451
|
+
mobileBreakpoint: Breakpoint;
|
|
452
|
+
draggingColumnId: string | null;
|
|
453
|
+
resizingColumnId: string | null;
|
|
454
|
+
activeFilterColumnId: string | null;
|
|
455
|
+
showMobileDrawer: boolean;
|
|
456
|
+
mobileDrawerContent: 'filter' | 'sort' | 'columns' | null;
|
|
457
|
+
}
|
|
458
|
+
interface TableContextActions<T extends RowData = RowData> {
|
|
459
|
+
setData: (data: T[]) => void;
|
|
460
|
+
setLoading: (loading: boolean) => void;
|
|
461
|
+
setError: (error: Error | string | null) => void;
|
|
462
|
+
setSorting: (columnId: string, direction: SortDirection) => void;
|
|
463
|
+
toggleSorting: (columnId: string) => void;
|
|
464
|
+
clearSorting: () => void;
|
|
465
|
+
setFilter: (columnId: string, value: unknown, operator?: FilterOperator) => void;
|
|
466
|
+
removeFilter: (columnId: string) => void;
|
|
467
|
+
clearFilters: () => void;
|
|
468
|
+
setGlobalFilter: (value: string) => void;
|
|
469
|
+
setPage: (page: number) => void;
|
|
470
|
+
setPageSize: (pageSize: number) => void;
|
|
471
|
+
selectRow: (id: string | number) => void;
|
|
472
|
+
deselectRow: (id: string | number) => void;
|
|
473
|
+
toggleRow: (id: string | number) => void;
|
|
474
|
+
selectAll: () => void;
|
|
475
|
+
deselectAll: () => void;
|
|
476
|
+
expandRow: (id: string | number) => void;
|
|
477
|
+
collapseRow: (id: string | number) => void;
|
|
478
|
+
toggleRowExpansion: (id: string | number) => void;
|
|
479
|
+
toggleCellExpansion: (rowId: string | number, columnId: string) => void;
|
|
480
|
+
toggleColumnAutoSize: (columnId: string) => void;
|
|
481
|
+
reorderColumn: (sourceId: string, targetId: string) => void;
|
|
482
|
+
resizeColumn: (columnId: string, width: number) => void;
|
|
483
|
+
toggleColumnVisibility: (columnId: string) => void;
|
|
484
|
+
resetColumns: () => void;
|
|
485
|
+
setDraggingColumn: (columnId: string | null) => void;
|
|
486
|
+
setResizingColumn: (columnId: string | null) => void;
|
|
487
|
+
setActiveFilterColumn: (columnId: string | null) => void;
|
|
488
|
+
openMobileDrawer: (content: 'filter' | 'sort' | 'columns') => void;
|
|
489
|
+
closeMobileDrawer: () => void;
|
|
490
|
+
refresh: () => void;
|
|
491
|
+
reset: () => void;
|
|
492
|
+
}
|
|
493
|
+
type SubCellExpandTrigger = 'doubleClick' | 'arrow' | 'both';
|
|
494
|
+
interface TableOptions {
|
|
495
|
+
showOverflowTooltip?: boolean;
|
|
496
|
+
enableCellAutoSizeOnDoubleClick?: boolean;
|
|
497
|
+
subCellExpandTrigger?: SubCellExpandTrigger;
|
|
498
|
+
expandRowOnDoubleClick?: boolean;
|
|
499
|
+
globalFilterColumns?: string[];
|
|
500
|
+
}
|
|
501
|
+
interface TableContextValue<T extends RowData = RowData> {
|
|
502
|
+
state: TableContextState<T>;
|
|
503
|
+
actions: TableContextActions<T>;
|
|
504
|
+
tableOptions: TableOptions;
|
|
505
|
+
computed: {
|
|
506
|
+
filteredData: T[];
|
|
507
|
+
sortedData: T[];
|
|
508
|
+
paginatedData: T[];
|
|
509
|
+
visibleColumns: ColumnDefinition<T>[];
|
|
510
|
+
totalPages: number;
|
|
511
|
+
canGoNext: boolean;
|
|
512
|
+
canGoPrevious: boolean;
|
|
513
|
+
allSelected: boolean;
|
|
514
|
+
someSelected: boolean;
|
|
515
|
+
isMobile: boolean;
|
|
516
|
+
isTablet: boolean;
|
|
517
|
+
isDesktop: boolean;
|
|
518
|
+
};
|
|
519
|
+
}
|
|
520
|
+
interface TableProviderProps<T extends RowData = RowData> {
|
|
521
|
+
children: ReactNode;
|
|
522
|
+
data: T[];
|
|
523
|
+
columns: ColumnDefinition<T>[];
|
|
524
|
+
loading?: boolean;
|
|
525
|
+
error?: Error | string | null;
|
|
526
|
+
theme?: Partial<Theme>;
|
|
527
|
+
translations?: Partial<Translations>;
|
|
528
|
+
mobileBreakpoint?: Breakpoint;
|
|
529
|
+
paginationConfig?: PaginationConfig;
|
|
530
|
+
filterConfig?: FilterConfig;
|
|
531
|
+
sortConfig?: SortConfig;
|
|
532
|
+
enableMultiSort?: boolean;
|
|
533
|
+
enableRowSelection?: boolean;
|
|
534
|
+
enableMultiSelect?: boolean;
|
|
535
|
+
getRowId?: (row: T) => string | number;
|
|
536
|
+
onStateChange?: (state: TableContextState<T>) => void;
|
|
537
|
+
showOverflowTooltip?: boolean;
|
|
538
|
+
enableCellAutoSizeOnDoubleClick?: boolean;
|
|
539
|
+
subCellExpandTrigger?: SubCellExpandTrigger;
|
|
540
|
+
expandRowOnDoubleClick?: boolean;
|
|
541
|
+
globalFilterColumns?: string[];
|
|
542
|
+
}
|
|
543
|
+
|
|
428
544
|
interface GridTableComponentProps<T extends RowData = RowData> {
|
|
429
545
|
data: T[];
|
|
430
546
|
columns: ColumnDefinition<T>[];
|
|
@@ -478,15 +594,23 @@ interface GridTableComponentProps<T extends RowData = RowData> {
|
|
|
478
594
|
getRowClassName?: (row: T, index: number) => string;
|
|
479
595
|
getRowStyle?: (row: T, index: number) => CSSProperties;
|
|
480
596
|
isRowDisabled?: (row: T) => boolean;
|
|
481
|
-
renderRowExpansion?: (row: T) => ReactNode;
|
|
597
|
+
renderRowExpansion?: (row: T, rowId: string | number) => ReactNode;
|
|
598
|
+
themeMode?: 'light' | 'dark' | 'system';
|
|
482
599
|
renderHeader?: () => ReactNode;
|
|
483
600
|
renderFooter?: () => ReactNode;
|
|
484
601
|
tableRef?: RefObject<GridTableRef<T>>;
|
|
485
602
|
className?: string;
|
|
486
603
|
style?: CSSProperties;
|
|
604
|
+
showOverflowTooltip?: boolean;
|
|
605
|
+
enableCellAutoSizeOnDoubleClick?: boolean;
|
|
606
|
+
subCellExpandTrigger?: SubCellExpandTrigger;
|
|
607
|
+
expandRowOnDoubleClick?: boolean;
|
|
608
|
+
globalFilterColumns?: string[];
|
|
609
|
+
themeOverride?: Record<string, unknown>;
|
|
610
|
+
studio?: boolean;
|
|
487
611
|
}
|
|
488
612
|
|
|
489
|
-
declare function GridTable<T extends RowData = RowData>({ data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig, sortConfig, enableMultiSelect, getRowId, ...props }: GridTableComponentProps<T>): ReactNode;
|
|
613
|
+
declare function GridTable<T extends RowData = RowData>({ data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig, sortConfig, enableMultiSelect, getRowId, showOverflowTooltip, enableCellAutoSizeOnDoubleClick, subCellExpandTrigger, expandRowOnDoubleClick, themeMode, themeOverride, studio, ...props }: GridTableComponentProps<T>): ReactNode;
|
|
490
614
|
|
|
491
615
|
interface GridHeaderProps<T extends RowData = RowData> {
|
|
492
616
|
columns: ColumnDefinition<T>[];
|
|
@@ -499,6 +623,7 @@ interface GridHeaderProps<T extends RowData = RowData> {
|
|
|
499
623
|
enableDragDrop?: boolean;
|
|
500
624
|
enableResize?: boolean;
|
|
501
625
|
enableSelection?: boolean;
|
|
626
|
+
enableExpansion?: boolean;
|
|
502
627
|
allSelected?: boolean;
|
|
503
628
|
someSelected?: boolean;
|
|
504
629
|
onSelectAll?: () => void;
|
|
@@ -507,7 +632,7 @@ interface GridHeaderProps<T extends RowData = RowData> {
|
|
|
507
632
|
getSortDirection?: (columnId: string) => SortDirection;
|
|
508
633
|
}
|
|
509
634
|
|
|
510
|
-
declare function GridHeader<T extends RowData = RowData>({ columns, columnStates, className, style, sticky, enableSort, enableFilter, enableDragDrop, enableResize, enableSelection, allSelected, someSelected, onSelectAll, onSort, onFilterOpen, getSortDirection, }: GridHeaderProps<T>): ReactNode;
|
|
635
|
+
declare function GridHeader<T extends RowData = RowData>({ columns, columnStates, className, style, sticky, enableSort, enableFilter, enableDragDrop, enableResize, enableSelection, enableExpansion, allSelected, someSelected, onSelectAll, onSort, onFilterOpen, getSortDirection, }: GridHeaderProps<T>): ReactNode;
|
|
511
636
|
|
|
512
637
|
interface CellClickEvent<T extends RowData = RowData> {
|
|
513
638
|
row: T;
|
|
@@ -519,6 +644,7 @@ interface GridCellProps<T extends RowData = RowData> {
|
|
|
519
644
|
column: ColumnDefinition<T>;
|
|
520
645
|
row: T;
|
|
521
646
|
rowIndex: number;
|
|
647
|
+
rowId: string | number;
|
|
522
648
|
value: unknown;
|
|
523
649
|
width?: number | string;
|
|
524
650
|
align?: Alignment;
|
|
@@ -552,7 +678,7 @@ interface GridBodyProps<T extends RowData = RowData> {
|
|
|
552
678
|
getRowClassName?: (row: T, index: number) => string;
|
|
553
679
|
getRowStyle?: (row: T, index: number) => CSSProperties;
|
|
554
680
|
isRowDisabled?: (row: T) => boolean;
|
|
555
|
-
renderRowExpansion?: (row: T) => ReactNode;
|
|
681
|
+
renderRowExpansion?: (row: T, rowId: string | number) => ReactNode;
|
|
556
682
|
}
|
|
557
683
|
|
|
558
684
|
declare function GridBody<T extends RowData = RowData>({ data, columns, columnStates, className, style, isMobile, showMobileLabels, enableSelection, enableExpansion, selectedIds, expandedIds, onRowClick, onRowDoubleClick, onCellClick, onRowSelect, onRowExpand, getRowId, getRowClassName, getRowStyle, isRowDisabled, renderRowExpansion, }: GridBodyProps<T>): ReactNode;
|
|
@@ -577,13 +703,13 @@ interface GridRowProps<T extends RowData = RowData> {
|
|
|
577
703
|
onExpand?: (expanded: boolean) => void;
|
|
578
704
|
enableSelection?: boolean;
|
|
579
705
|
enableExpansion?: boolean;
|
|
580
|
-
renderExpansion?: (row: T) => ReactNode;
|
|
706
|
+
renderExpansion?: (row: T, rowId: string | number) => ReactNode;
|
|
581
707
|
getRowId: (row: T) => string | number;
|
|
582
708
|
}
|
|
583
709
|
|
|
584
710
|
declare function GridRow<T extends RowData = RowData>({ row, rowIndex, columns, columnStates, isSelected, isExpanded, isDisabled, isMobile, showMobileLabels, className, style, onClick, onDoubleClick, onContextMenu, onCellClick, onSelect, onExpand, enableSelection, enableExpansion, renderExpansion, getRowId, }: GridRowProps<T>): ReactNode;
|
|
585
711
|
|
|
586
|
-
declare function GridCell<T extends RowData = RowData>({ column, row, rowIndex, value, width, align, className, style, showLabel, labelText, sticky, stickyOffset, onClick, }: GridCellProps<T>): ReactNode;
|
|
712
|
+
declare function GridCell<T extends RowData = RowData>({ column, row, rowIndex, rowId, value, width, align, className, style, showLabel, labelText, sticky, stickyOffset, onClick, }: GridCellProps<T>): ReactNode;
|
|
587
713
|
|
|
588
714
|
interface PaginationProps {
|
|
589
715
|
page: number;
|
|
@@ -638,103 +764,8 @@ interface MobileDrawerProps {
|
|
|
638
764
|
|
|
639
765
|
declare function MobileDrawer({ isOpen, content, onClose, className, style, }: MobileDrawerProps): ReactNode;
|
|
640
766
|
|
|
641
|
-
interface TableContextState<T extends RowData = RowData> {
|
|
642
|
-
data: T[];
|
|
643
|
-
originalData: T[];
|
|
644
|
-
columns: ColumnDefinition<T>[];
|
|
645
|
-
columnStates: ColumnState[];
|
|
646
|
-
sorting: SortValue[];
|
|
647
|
-
filters: FilterValue[];
|
|
648
|
-
globalFilter: string;
|
|
649
|
-
page: number;
|
|
650
|
-
pageSize: number;
|
|
651
|
-
totalItems: number;
|
|
652
|
-
selectedIds: Set<string | number>;
|
|
653
|
-
expandedIds: Set<string | number>;
|
|
654
|
-
loading: boolean;
|
|
655
|
-
error: Error | string | null;
|
|
656
|
-
theme: Theme;
|
|
657
|
-
translations: Translations;
|
|
658
|
-
currentBreakpoint: Breakpoint;
|
|
659
|
-
mobileBreakpoint: Breakpoint;
|
|
660
|
-
draggingColumnId: string | null;
|
|
661
|
-
resizingColumnId: string | null;
|
|
662
|
-
activeFilterColumnId: string | null;
|
|
663
|
-
showMobileDrawer: boolean;
|
|
664
|
-
mobileDrawerContent: 'filter' | 'sort' | 'columns' | null;
|
|
665
|
-
}
|
|
666
|
-
interface TableContextActions<T extends RowData = RowData> {
|
|
667
|
-
setData: (data: T[]) => void;
|
|
668
|
-
setLoading: (loading: boolean) => void;
|
|
669
|
-
setError: (error: Error | string | null) => void;
|
|
670
|
-
setSorting: (columnId: string, direction: SortDirection) => void;
|
|
671
|
-
toggleSorting: (columnId: string) => void;
|
|
672
|
-
clearSorting: () => void;
|
|
673
|
-
setFilter: (columnId: string, value: unknown, operator?: FilterOperator) => void;
|
|
674
|
-
removeFilter: (columnId: string) => void;
|
|
675
|
-
clearFilters: () => void;
|
|
676
|
-
setGlobalFilter: (value: string) => void;
|
|
677
|
-
setPage: (page: number) => void;
|
|
678
|
-
setPageSize: (pageSize: number) => void;
|
|
679
|
-
selectRow: (id: string | number) => void;
|
|
680
|
-
deselectRow: (id: string | number) => void;
|
|
681
|
-
toggleRow: (id: string | number) => void;
|
|
682
|
-
selectAll: () => void;
|
|
683
|
-
deselectAll: () => void;
|
|
684
|
-
expandRow: (id: string | number) => void;
|
|
685
|
-
collapseRow: (id: string | number) => void;
|
|
686
|
-
toggleRowExpansion: (id: string | number) => void;
|
|
687
|
-
reorderColumn: (sourceId: string, targetId: string) => void;
|
|
688
|
-
resizeColumn: (columnId: string, width: number) => void;
|
|
689
|
-
toggleColumnVisibility: (columnId: string) => void;
|
|
690
|
-
resetColumns: () => void;
|
|
691
|
-
setDraggingColumn: (columnId: string | null) => void;
|
|
692
|
-
setResizingColumn: (columnId: string | null) => void;
|
|
693
|
-
setActiveFilterColumn: (columnId: string | null) => void;
|
|
694
|
-
openMobileDrawer: (content: 'filter' | 'sort' | 'columns') => void;
|
|
695
|
-
closeMobileDrawer: () => void;
|
|
696
|
-
refresh: () => void;
|
|
697
|
-
reset: () => void;
|
|
698
|
-
}
|
|
699
|
-
interface TableContextValue<T extends RowData = RowData> {
|
|
700
|
-
state: TableContextState<T>;
|
|
701
|
-
actions: TableContextActions<T>;
|
|
702
|
-
computed: {
|
|
703
|
-
filteredData: T[];
|
|
704
|
-
sortedData: T[];
|
|
705
|
-
paginatedData: T[];
|
|
706
|
-
visibleColumns: ColumnDefinition<T>[];
|
|
707
|
-
totalPages: number;
|
|
708
|
-
canGoNext: boolean;
|
|
709
|
-
canGoPrevious: boolean;
|
|
710
|
-
allSelected: boolean;
|
|
711
|
-
someSelected: boolean;
|
|
712
|
-
isMobile: boolean;
|
|
713
|
-
isTablet: boolean;
|
|
714
|
-
isDesktop: boolean;
|
|
715
|
-
};
|
|
716
|
-
}
|
|
717
|
-
interface TableProviderProps<T extends RowData = RowData> {
|
|
718
|
-
children: ReactNode;
|
|
719
|
-
data: T[];
|
|
720
|
-
columns: ColumnDefinition<T>[];
|
|
721
|
-
loading?: boolean;
|
|
722
|
-
error?: Error | string | null;
|
|
723
|
-
theme?: Partial<Theme>;
|
|
724
|
-
translations?: Partial<Translations>;
|
|
725
|
-
mobileBreakpoint?: Breakpoint;
|
|
726
|
-
paginationConfig?: PaginationConfig;
|
|
727
|
-
filterConfig?: FilterConfig;
|
|
728
|
-
sortConfig?: SortConfig;
|
|
729
|
-
enableMultiSort?: boolean;
|
|
730
|
-
enableRowSelection?: boolean;
|
|
731
|
-
enableMultiSelect?: boolean;
|
|
732
|
-
getRowId?: (row: T) => string | number;
|
|
733
|
-
onStateChange?: (state: TableContextState<T>) => void;
|
|
734
|
-
}
|
|
735
|
-
|
|
736
767
|
declare const TableContext: react.Context<TableContextValue<RowData> | null>;
|
|
737
|
-
declare function TableProvider<T extends RowData>({ children, data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig: _filterConfig, sortConfig: _sortConfig, enableMultiSort, getRowId, onStateChange, }: TableProviderProps<T>): ReactNode;
|
|
768
|
+
declare function TableProvider<T extends RowData>({ children, data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig: _filterConfig, sortConfig: _sortConfig, enableMultiSort, getRowId, onStateChange, showOverflowTooltip, enableCellAutoSizeOnDoubleClick, subCellExpandTrigger, expandRowOnDoubleClick, globalFilterColumns, }: TableProviderProps<T>): ReactNode;
|
|
738
769
|
declare function useTableContext<T extends RowData = RowData>(): TableContextValue<T>;
|
|
739
770
|
|
|
740
771
|
interface UseSortReturn {
|