@vii7/div-table-widget 1.1.1 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +186 -13
- package/dist/divtable-theme-dark.min.css +1 -0
- package/dist/divtable-theme-dark.min.js +1 -0
- package/dist/divtable.min.css +1 -1
- package/dist/divtable.min.js +1 -1
- package/package.json +4 -2
- package/src/div-table-theme-dark.css +104 -0
- package/src/div-table.css +14 -0
- package/src/div-table.js +116 -248
package/README.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# DivTable Widget
|
|
2
2
|
|
|
3
|
+
**v1.2.1** — 2026-02-05
|
|
4
|
+
|
|
5
|
+
**What's new:**
|
|
6
|
+
|
|
7
|
+
- Fixed `.div-table-body` max-height calculation (now uses widget height minus toolbar and header)
|
|
8
|
+
- Row heights between fixed and scroll sections are now always synchronized to the tallest row
|
|
9
|
+
- No more cell overflow: the tallest cell in a row (including composite cells) sets the row height for both fixed and scroll sections
|
|
10
|
+
|
|
11
|
+
|
|
3
12
|
A modern, flexible table widget built with CSS Grid and Flexbox instead of HTML tables, featuring Monaco Editor integration for advanced query capabilities.
|
|
4
13
|
|
|
5
14
|
|
|
@@ -19,6 +28,7 @@ A modern, flexible table widget built with CSS Grid and Flexbox instead of HTML
|
|
|
19
28
|
- **Keyboard Navigation**: Full keyboard accessibility with arrow key navigation
|
|
20
29
|
- **Responsive Design**: Adaptive column sizing and mobile-friendly layout
|
|
21
30
|
- **Composite Columns**: Stack multiple fields in one column or create two-line headers
|
|
31
|
+
- **Dark Mode Support**: Built-in dark mode with a single class toggle
|
|
22
32
|
|
|
23
33
|
## Installation
|
|
24
34
|
|
|
@@ -28,6 +38,153 @@ npm install @vii7/div-table-widget monaco-editor
|
|
|
28
38
|
|
|
29
39
|
## Usage Options
|
|
30
40
|
|
|
41
|
+
## CDN Setup
|
|
42
|
+
|
|
43
|
+
You can use DivTable Widget directly from a CDN for quick prototyping or embedding in static sites. The latest version is available via [jsDelivr](https://www.jsdelivr.com/package/npm/@vii7/div-table-widget).
|
|
44
|
+
|
|
45
|
+
**Example (CDN):**
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<!DOCTYPE html>
|
|
49
|
+
<html>
|
|
50
|
+
<head>
|
|
51
|
+
<!-- DivTable CSS from CDN -->
|
|
52
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vii7/div-table-widget@latest/src/div-table.css">
|
|
53
|
+
<!-- Monaco Editor (from CDN) -->
|
|
54
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
|
|
55
|
+
<!-- DivTable Query Engine (from CDN) -->
|
|
56
|
+
<script src="https://cdn.jsdelivr.net/npm/@vii7/div-table-widget@latest/src/query.js"></script>
|
|
57
|
+
<!-- DivTable Widget JS (from CDN) -->
|
|
58
|
+
<script src="https://cdn.jsdelivr.net/npm/@vii7/div-table-widget@latest/src/div-table.js"></script>
|
|
59
|
+
</head>
|
|
60
|
+
<body>
|
|
61
|
+
<div id="table-container"></div>
|
|
62
|
+
<script>
|
|
63
|
+
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' }});
|
|
64
|
+
require(['vs/editor/editor.main'], function() {
|
|
65
|
+
const divTable = new DivTable(monaco, {
|
|
66
|
+
tableWidgetElement: document.getElementById('table-container'),
|
|
67
|
+
columns: [
|
|
68
|
+
{ field: 'id', label: 'ID', primaryKey: true },
|
|
69
|
+
{ field: 'name', label: 'Name' },
|
|
70
|
+
{ field: 'email', label: 'Email' },
|
|
71
|
+
{ field: 'status', label: 'Status' }
|
|
72
|
+
],
|
|
73
|
+
data: [
|
|
74
|
+
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
|
|
75
|
+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' }
|
|
76
|
+
]
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
</script>
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
This setup requires no build step—just copy and paste into your HTML file. Always use the latest version by referencing `@latest` in the CDN URL, or pin to a specific version for production stability.
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
## Theming & Customization
|
|
88
|
+
|
|
89
|
+
DivTable supports customizable themes via CSS variables. The base (light) theme is included by default; additional themes like dark mode can be enabled by including a theme CSS file and applying a class.
|
|
90
|
+
|
|
91
|
+
### Available Themes
|
|
92
|
+
|
|
93
|
+
| Theme | File | Class | Description |
|
|
94
|
+
|-------|------|-------|-------------|
|
|
95
|
+
| Light (default) | `div-table.css` | (none) | Default light theme, included automatically |
|
|
96
|
+
| Dark | `div-table-theme-dark.css` | `.theme-dark` or `.dark` | Dark theme for low-light environments |
|
|
97
|
+
|
|
98
|
+
### Enabling Dark Mode
|
|
99
|
+
|
|
100
|
+
**Option 1: Static (include theme CSS file)**
|
|
101
|
+
|
|
102
|
+
Include the dark theme CSS after the base CSS:
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<link rel="stylesheet" href="node_modules/@vii7/div-table-widget/dist/divtable.min.css">
|
|
106
|
+
<link rel="stylesheet" href="node_modules/@vii7/div-table-widget/dist/divtable-theme-dark.min.css">
|
|
107
|
+
<body class="theme-dark">
|
|
108
|
+
...
|
|
109
|
+
</body>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
**Option 2: Dynamic (toggle via JavaScript)**
|
|
113
|
+
|
|
114
|
+
You can toggle dark mode dynamically by adding or removing the theme class with JavaScript:
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
// Enable dark mode
|
|
118
|
+
document.body.classList.add('theme-dark');
|
|
119
|
+
|
|
120
|
+
// Toggle dark mode
|
|
121
|
+
document.body.classList.toggle('theme-dark');
|
|
122
|
+
|
|
123
|
+
// Remove dark mode (back to light)
|
|
124
|
+
document.body.classList.remove('theme-dark');
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
**CDN Example (Dark Mode):**
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vii7/div-table-widget@latest/src/div-table.css">
|
|
131
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vii7/div-table-widget@latest/src/div-table-theme-dark.css">
|
|
132
|
+
<body class="theme-dark">
|
|
133
|
+
...
|
|
134
|
+
</body>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### Creating Custom Themes
|
|
138
|
+
|
|
139
|
+
You can create your own theme by overriding CSS variables. Copy the dark theme file as a starting point and customize the values:
|
|
140
|
+
|
|
141
|
+
```css
|
|
142
|
+
/* my-custom-theme.css */
|
|
143
|
+
.theme-custom {
|
|
144
|
+
--dt-primary: #8b5cf6;
|
|
145
|
+
--dt-primary-hover: #7c3aed;
|
|
146
|
+
--dt-bg-base: #1e1b2e;
|
|
147
|
+
--dt-bg-light: #2d2a3e;
|
|
148
|
+
--dt-text-primary: #e2e0f0;
|
|
149
|
+
/* ... override more variables as needed */
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
Then include and activate your custom theme:
|
|
154
|
+
|
|
155
|
+
```html
|
|
156
|
+
<link rel="stylesheet" href="div-table.css">
|
|
157
|
+
<link rel="stylesheet" href="my-custom-theme.css">
|
|
158
|
+
<body class="theme-custom">
|
|
159
|
+
...
|
|
160
|
+
</body>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### CSS Variables Reference
|
|
164
|
+
|
|
165
|
+
All theme colors are defined as CSS custom properties (variables) in `:root`. Override these in your custom theme class:
|
|
166
|
+
|
|
167
|
+
| Variable | Description |
|
|
168
|
+
|----------|-------------|
|
|
169
|
+
| `--dt-primary` | Primary/accent color |
|
|
170
|
+
| `--dt-bg-base` | Base background color |
|
|
171
|
+
| `--dt-bg-light` | Light background (header, toolbar) |
|
|
172
|
+
| `--dt-bg-hover` | Row hover background |
|
|
173
|
+
| `--dt-bg-selected` | Selected row background |
|
|
174
|
+
| `--dt-border-light` | Light border color |
|
|
175
|
+
| `--dt-border-medium` | Medium border color |
|
|
176
|
+
| `--dt-text-primary` | Primary text color |
|
|
177
|
+
| `--dt-text-secondary` | Secondary text color |
|
|
178
|
+
| `--dt-text-muted` | Muted/disabled text |
|
|
179
|
+
| `--dt-button-bg` | Button background |
|
|
180
|
+
| `--dt-button-text` | Button text color |
|
|
181
|
+
| `--dt-error` | Error state color |
|
|
182
|
+
| `--dt-success` | Success state color |
|
|
183
|
+
| `--dt-warning` | Warning state color |
|
|
184
|
+
| `--dt-info` | Info state color |
|
|
185
|
+
|
|
186
|
+
See `src/div-table.css` for the full list of available variables.
|
|
187
|
+
|
|
31
188
|
### Option 1: Minified (Production)
|
|
32
189
|
|
|
33
190
|
```html
|
|
@@ -59,9 +216,11 @@ npm install @vii7/div-table-widget monaco-editor
|
|
|
59
216
|
| File | Size | Description |
|
|
60
217
|
|------|------|-------------|
|
|
61
218
|
| `dist/divtable.min.js` | ~98KB | Minified JavaScript |
|
|
62
|
-
| `dist/divtable.min.css` | ~22KB | Minified CSS |
|
|
219
|
+
| `dist/divtable.min.css` | ~22KB | Minified CSS (base theme) |
|
|
220
|
+
| `dist/divtable-theme-dark.min.css` | ~2KB | Minified dark theme (optional) |
|
|
63
221
|
| `src/div-table.js` | ~220KB | Source JavaScript |
|
|
64
222
|
| `src/div-table.css` | ~33KB | Source CSS (with CSS variables) |
|
|
223
|
+
| `src/div-table-theme-dark.css` | ~3KB | Source dark theme (optional) |
|
|
65
224
|
| `src/query.js` | ~78KB | Query language engine (required) |
|
|
66
225
|
|
|
67
226
|
## Quick Start
|
|
@@ -87,10 +246,10 @@ npm install @vii7/div-table-widget monaco-editor
|
|
|
87
246
|
const divTable = new DivTable(monaco, {
|
|
88
247
|
tableWidgetElement: document.getElementById('table-container'),
|
|
89
248
|
columns: [
|
|
90
|
-
{ field: 'id',
|
|
91
|
-
{ field: 'name',
|
|
92
|
-
{ field: 'email',
|
|
93
|
-
{ field: 'status',
|
|
249
|
+
{ field: 'id', label: 'ID', primaryKey: true },
|
|
250
|
+
{ field: 'name', label: 'Name' },
|
|
251
|
+
{ field: 'email', label: 'Email' },
|
|
252
|
+
{ field: 'status', label: 'Status' }
|
|
94
253
|
],
|
|
95
254
|
data: [
|
|
96
255
|
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
|
|
@@ -117,9 +276,9 @@ npm install @vii7/div-table-widget monaco-editor
|
|
|
117
276
|
const divTable = new DivTable(monaco, {
|
|
118
277
|
tableWidgetElement: document.getElementById('table-container'),
|
|
119
278
|
columns: [
|
|
120
|
-
{ field: 'id',
|
|
121
|
-
{ field: 'name',
|
|
122
|
-
{ field: 'age',
|
|
279
|
+
{ field: 'id', label: 'ID', primaryKey: true },
|
|
280
|
+
{ field: 'name', label: 'Name' },
|
|
281
|
+
{ field: 'age', label: 'Age' }
|
|
123
282
|
],
|
|
124
283
|
virtualScrolling: true,
|
|
125
284
|
pageSize: 100,
|
|
@@ -333,11 +492,11 @@ Keep the first N columns fixed (frozen) on the left side while scrolling horizon
|
|
|
333
492
|
const divTable = new DivTable(monaco, {
|
|
334
493
|
tableWidgetElement: document.getElementById('table-container'),
|
|
335
494
|
columns: [
|
|
336
|
-
{ field: 'id',
|
|
337
|
-
{ field: 'name',
|
|
338
|
-
{ field: 'email',
|
|
339
|
-
{ field: 'department',
|
|
340
|
-
{ field: 'status',
|
|
495
|
+
{ field: 'id', label: 'ID', primaryKey: true },
|
|
496
|
+
{ field: 'name', label: 'Name' },
|
|
497
|
+
{ field: 'email', label: 'Email' },
|
|
498
|
+
{ field: 'department', label: 'Department' },
|
|
499
|
+
{ field: 'status', label: 'Status' }
|
|
341
500
|
],
|
|
342
501
|
data: myData,
|
|
343
502
|
fixedColumns: 2 // Freeze first 2 columns (ID and Name)
|
|
@@ -645,6 +804,20 @@ Contributions are welcome! Please feel free to submit a Pull Request.
|
|
|
645
804
|
|
|
646
805
|
## Changelog
|
|
647
806
|
|
|
807
|
+
### Version 1.2.1 (2026-02-05)
|
|
808
|
+
|
|
809
|
+
- Patch release with internal improvements
|
|
810
|
+
|
|
811
|
+
### Version 1.2.0 (2026-02-01)
|
|
812
|
+
|
|
813
|
+
- Fixed `.div-table-body` max-height calculation (now uses widget height minus toolbar and header)
|
|
814
|
+
- Row heights between fixed and scroll sections are now always synchronized to the tallest row
|
|
815
|
+
- Fixed cell overflow: the tallest cell in a row (including composite cells) sets the row height for both sections
|
|
816
|
+
- Fixed `align: 'right'` column configuration not being applied in all rendering paths
|
|
817
|
+
- Added tooltips to data cells and composite sub-cells showing full cell content
|
|
818
|
+
- Added tooltips to column headers showing the full label text
|
|
819
|
+
- HTML tags (e.g., `<br>`) are now stripped from tooltips for cleaner display
|
|
820
|
+
|
|
648
821
|
### Version 1.0.0
|
|
649
822
|
|
|
650
823
|
- Initial release
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.dark,.theme-dark{--dt-primary:#ffa200;--dt-primary-hover:#cc8100;--dt-primary-light:rgba(255,162,0,.12);--dt-primary-lighter:rgba(255,162,0,.07);--dt-focus-ring:rgba(255,162,0,.18);--dt-bg-base:#171717;--dt-bg-light:#242424;--dt-bg-hover:#2e2e2e;--dt-bg-selected:rgba(255,162,0,.12);--dt-bg-header:#1f1f1f;--dt-bg-summary:#1f1f1f;--dt-bg-disabled:#333;--dt-border-light:#383838;--dt-border-medium:#333;--dt-border-dark:#2e2e2e;--dt-border-row:#383838;--dt-border-focus:#ffa200;--dt-border-hover:#ffa200;--dt-text-primary:#fafafa;--dt-text-secondary:#e6e6e6;--dt-text-muted:#999;--dt-text-light:#e6e6e6;--dt-text-disabled:#8c8c8c;--dt-text-inverse:#171717;--dt-shadow:rgba(0,0,0,.4);--dt-shadow-medium:rgba(0,0,0,.5);--dt-shadow-heavy:rgba(0,0,0,.6);--dt-error:#ef4343;--dt-error-light:rgba(239,67,67,.6);--dt-error-hover:#7c1d1d;--dt-error-active:#531313;--dt-error-bg:#2e1919;--dt-error-border:#f37272;--dt-error-text:#f15b5b;--dt-error-border-hover:rgba(239,67,67,.6);--dt-error-focus-ring:rgba(239,67,67,.25);--dt-success:#24db6a;--dt-success-bg:#1d3024;--dt-success-bg-hover:#2a4635;--dt-warning:#ffb700;--dt-warning-bg:#302a1d;--dt-warning-bg-hover:#463e2a;--dt-info:#3ebdf4;--dt-info-bg:#1d2a30;--dt-info-bg-hover:#2a3e46;--dt-button-bg:#242424;--dt-button-bg-hover:#2e2e2e;--dt-button-text:#fafafa;--dt-scrollbar-track:#242424;--dt-scrollbar-thumb:#383838;--dt-scrollbar-thumb-hover:#474747;--dt-spinner-track:#333;--dt-spinner-active:#e6e6e6;--dt-skeleton-base:#242424;--dt-skeleton-shine:#333;--dt-group-bg:rgba(36,36,36,.5);--dt-summary-border:#2e2e2e}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DivTable=t():e.DivTable=t()}(this,()=>(()=>{"use strict";var e={};return e=e.DivTable})());
|
package/dist/divtable.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--dt-primary:#007bff;--dt-primary-hover:#0056b3;--dt-primary-light:rgba(0,123,255,.1);--dt-primary-lighter:rgba(0,123,255,.05);--dt-focus-ring:rgba(3,102,214,.1);--dt-bg-base:#fff;--dt-bg-light:#f9f9f7;--dt-bg-hover:#f0f7ff;--dt-bg-selected:rgba(0,123,255,.1);--dt-bg-header:#f9f9f7;--dt-bg-summary:#f9f9f7;--dt-bg-disabled:#f0f0f0;--dt-border-light:#e9ecef;--dt-border-medium:#e1e5e9;--dt-border-dark:#ced4da;--dt-border-row:#f1f3f4;--dt-border-focus:#123a67;--dt-border-hover:#b0b8c1;--dt-text-primary:#374151;--dt-text-secondary:#495057;--dt-text-muted:#6b7280;--dt-text-light:#666;--dt-text-disabled:#999;--dt-text-inverse:#fff;--dt-shadow:rgba(0,0,0,.1);--dt-shadow-medium:rgba(0,0,0,.12);--dt-shadow-heavy:rgba(0,0,0,.15);--dt-error:#dc3545;--dt-error-light:rgba(220,53,69,.6);--dt-error-hover:#c82333;--dt-error-active:#bd2130;--dt-error-bg:#fff5f5;--dt-error-border:#fed7d7;--dt-error-text:#c53030;--dt-error-border-hover:rgba(200,35,51,.6);--dt-error-focus-ring:rgba(220,53,69,.25);--dt-success:#28a745;--dt-success-bg:#e8f5e9;--dt-success-bg-hover:#c8e6c9;--dt-warning:#ffc107;--dt-warning-bg:#fff8e1;--dt-warning-bg-hover:#ffecb3;--dt-info:#0ea5e9;--dt-info-bg:#e0f2fe;--dt-info-bg-hover:#bae6fd;--dt-button-bg:#f0f0f0;--dt-button-bg-hover:#e0e0e0;--dt-button-text:#333;--dt-scrollbar-track:#f1f1f1;--dt-scrollbar-thumb:#c1c1c1;--dt-scrollbar-thumb-hover:#a8a8a8;--dt-spinner-track:#e3e3e3;--dt-spinner-active:#666;--dt-skeleton-base:#e9ecef;--dt-skeleton-shine:#f8f9fa;--dt-group-bg:hsla(60,14%,97%,.5);--dt-summary-border:#adb5bd}.div-table-widget{background:var(--dt-bg-base);border-radius:8px;box-shadow:0 2px 8px var(--dt-shadow);box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;width:100%}.div-table-toolbar{align-items:center;background:var(--dt-bg-light);border-bottom:1px solid var(--dt-border-light);display:flex;flex-shrink:0;gap:10px;padding:16px}.query-inputfield{background:var(--dt-bg-base);border:2px solid var(--dt-border-medium);border-radius:8px;box-shadow:0 1px 3px var(--dt-shadow);flex:1;min-width:50%;overflow:hidden;padding:10px 5px 4px 10px;transition:all .2s ease-in-out}.query-inputfield:hover{border-color:var(--dt-border-hover);box-shadow:0 2px 4px var(--dt-shadow-medium)}.query-inputfield.focused{border-color:var(--dt-border-focus);box-shadow:0 0 0 3px var(--dt-focus-ring),0 1px 3px var(--dt-shadow);outline:none}.query-inputfield.error{border-color:var(--dt-error-light)}.query-inputfield.error:hover{border-color:var(--dt-error-border-hover)}.query-inputfield.error.focused{border-color:var(--dt-error-light);box-shadow:0 0 0 3px var(--dt-error-focus-ring),0 1px 3px var(--dt-shadow)}.query-inputfield .monaco-editor{height:22px!important;--vscode-focusBorder:transparent}.div-table-toolbar select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--dt-bg-base);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:2px solid var(--dt-border-medium);border-radius:8px;box-shadow:0 1px 3px var(--dt-shadow);color:var(--dt-text-secondary);cursor:pointer;font-size:14px;min-width:150px;padding:10px 32px 10px 12px;transition:all .2s ease-in-out}.div-table-toolbar select:hover{border-color:var(--dt-border-hover);box-shadow:0 2px 4px var(--dt-shadow-medium)}.div-table-toolbar select:focus{border-color:var(--dt-border-focus);box-shadow:0 0 0 3px var(--dt-focus-ring),0 1px 3px var(--dt-shadow);outline:none}.div-table-toolbar select:disabled{background-color:var(--dt-bg-light);border-color:var(--dt-border-light);color:var(--dt-text-muted);cursor:not-allowed}.info-section{color:var(--dt-text-light);display:flex;flex-direction:column;font-size:.9em;gap:0;margin-left:auto;min-width:200px;padding:0;text-align:right}.info-line-container{gap:8px}.info-line,.info-line-container{align-items:center;display:flex;justify-content:flex-end}.info-line.secondary{color:var(--dt-text-disabled);font-size:.8em}.refresh-button{align-items:center;background:none;border:none;border-radius:3px;color:var(--dt-text-light);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;min-height:22px;min-width:22px;padding:4px;transition:all .2s ease;width:22px}.refresh-button:hover{background-color:var(--dt-button-bg);color:var(--dt-button-text)}.refresh-button:active{background-color:var(--dt-button-bg-hover)}.refresh-button.refreshing{color:var(--dt-primary)}.refresh-button.refreshing svg{animation:spin 1s linear infinite}.refresh-button svg{height:14px;transition:transform .2s ease;width:14px}.auto-fetch-button{align-items:center;background:none;border:none;border-radius:3px;color:var(--dt-text-light);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;margin-left:4px;min-height:22px;min-width:22px;padding:4px;transition:all .2s ease;width:22px}.auto-fetch-button:hover{background-color:var(--dt-button-bg);color:var(--dt-button-text)}.auto-fetch-button:active{background-color:var(--dt-button-bg-hover)}.auto-fetch-button.active{background-color:var(--dt-success-bg);color:var(--dt-success)}.auto-fetch-button.active:hover{background-color:var(--dt-success-bg-hover)}.auto-fetch-button.paused{background-color:var(--dt-warning-bg);color:var(--dt-warning)}.auto-fetch-button.paused:hover{background-color:var(--dt-warning-bg-hover)}.auto-fetch-button:disabled{cursor:not-allowed;opacity:.5}.auto-fetch-button svg{height:14px;transition:transform .2s ease;width:14px}.filter-selected-only-toggle-button{align-items:center;background:none;border:none;border-radius:3px;color:var(--dt-text-light);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;margin-right:6px;min-height:22px;min-width:22px;padding:4px;transition:all .2s ease;width:22px}.filter-selected-only-toggle-button:hover{background-color:var(--dt-button-bg);color:var(--dt-button-text)}.filter-selected-only-toggle-button:active{background-color:var(--dt-button-bg-hover)}.filter-selected-only-toggle-button.active{background-color:var(--dt-info-bg);color:var(--dt-info)}.filter-selected-only-toggle-button.active:hover{background-color:var(--dt-info-bg-hover)}.filter-selected-only-toggle-button svg{height:14px;transition:transform .2s ease;width:14px}.info-selection{font-weight:600}.info-stats{color:var(--dt-text-light)}.progress-line{align-items:center;display:flex;justify-content:flex-end;margin-top:2px}.loading-progress{background:var(--dt-border-light);border-radius:2px;height:4px;overflow:hidden;position:relative;width:120px}.progress-segment{border-radius:2px;height:100%;position:absolute;top:0;transition:width .3s ease,left .3s ease}.filtered-segment{background:var(--dt-error);z-index:3}.loaded-segment{background:var(--dt-text-secondary);z-index:2}.loading-segment{background:var(--dt-primary);z-index:1}.loading-segment:after{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.8),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.loading-progress[data-state=filtered-loading],.loading-progress[data-state=sequential-loading]{position:relative}.loading-progress[data-state=filtered] .loaded-segment{background:var(--dt-text-light)}.loading-progress-bar{background:var(--dt-text-secondary);border-radius:2px;height:100%;position:relative;transition:width .3s ease}.loading-progress-bar.loading:after{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.8),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.loading-progress[data-state=filtered] .loading-progress-bar{background:var(--dt-text-light)}.loading-progress[data-state=filtered] .loading-progress-bar.loading:after{animation:filtered-shimmer 2s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent)}.loading-progress[data-state=loading] .loading-progress-bar{background:var(--dt-text-secondary)}@keyframes loading-shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes filtered-shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.div-table-container{background:var(--dt-bg-base);display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;width:100%}.div-table-header{align-items:auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--dt-bg-header);border-bottom:1px solid var(--dt-border-light);color:var(--dt-text-primary);display:grid;flex-shrink:0;min-height:48px;position:sticky;top:0;transition:box-shadow .3s cubic-bezier(.4,0,.2,1);z-index:10}.scrollbar-spacer{background:transparent;pointer-events:none}.div-table-header.scrolled{box-shadow:0 2px 8px var(--dt-shadow)}.div-table-body{background:var(--dt-bg-base);flex:1;min-height:0;overflow-y:auto}.div-table-row{align-items:stretch;border-bottom:1px solid var(--dt-border-row);box-sizing:border-box;cursor:pointer;display:grid;gap:0;min-height:40px;transition:all .2s ease}.div-table-row:hover{background-color:var(--dt-bg-hover)}.div-table-row:last-child{border-bottom:none}.div-table-cell{box-sizing:border-box;min-width:0;text-overflow:ellipsis;white-space:nowrap}.div-table-cell,.div-table-header-cell{align-items:flex-start;display:flex;overflow:hidden;padding:8px 12px}.div-table-header-cell{color:var(--dt-text-primary);cursor:pointer;justify-content:space-between;transition:background-color .2s ease;user-select:none}.header-left-content{align-items:center;display:flex;flex:1 1 auto;font-weight:600;gap:0;min-width:0;overflow:hidden}.header-left-content>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-right-content{align-items:center;display:flex;flex:0 0 auto;gap:4px;margin-left:8px}.div-table-header-cell:hover{background-color:var(--dt-shadow)}.group-indicator{align-items:center;display:inline-flex;font-size:12px;height:20px;justify-content:center;opacity:0;transition:opacity .2s ease;width:14px}.div-table-header-cell:hover .group-indicator{opacity:.5}.group-indicator:hover{opacity:1!important}.group-indicator.grouped{color:inherit;opacity:1!important}.sort-indicator{align-items:center;display:inline-flex;height:20px;justify-content:center;opacity:0;transition:opacity .2s ease;width:14px}.div-table-header-cell:hover .sort-indicator{opacity:.5}.sort-indicator.active{opacity:1!important}.header-right-content>span:last-child:not(.group-indicator):not(.sort-indicator){opacity:0;transition:opacity .2s ease}.div-table-header-cell:hover .header-right-content>span:last-child:not(.group-indicator):not(.sort-indicator){opacity:.5}.div-table-header-cell.sorted .header-right-content>span:last-child:not(.sort-indicator){opacity:1!important}.sub-sort-indicator{align-items:center;display:inline-flex;height:20px;justify-content:center;opacity:0;transition:opacity .2s ease;width:14px}.composite-header:hover .sub-sort-indicator,.composite-sub-header:hover .sub-sort-indicator{opacity:.5}.sub-sort-indicator.active{opacity:1!important}.div-table-cell.checkbox-column,.div-table-header-cell.checkbox-column{justify-content:center;max-width:40px;min-width:40px;padding:8px 4px;width:40px}.div-table-cell.checkbox-column input[type=checkbox],.div-table-header-cell.checkbox-column input[type=checkbox]{accent-color:var(--dt-primary);cursor:pointer;height:15px;margin:0;width:15px}input[type=checkbox]:indeterminate{background-color:var(--dt-primary);border-color:var(--dt-primary);position:relative}input[type=checkbox]:indeterminate:after{color:var(--dt-text-inverse);content:"━";font-size:10px;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.div-table-header-cell.checkbox-column input[type=checkbox]:indeterminate{background-color:var(--dt-primary);border-color:var(--dt-primary)}.div-table-row.selected{background-color:var(--dt-bg-selected)!important}.div-table-row.focused{background-color:var(--dt-bg-base);box-shadow:inset 3px 0 0 var(--dt-primary)}.div-table-row.focused:hover{background-color:var(--dt-primary-lighter)!important}.div-table-row.group-header.focused{background-color:var(--dt-bg-base)!important;box-shadow:inset 3px 0 0 var(--dt-primary)!important}.div-table-row.group-header.focused:hover{background-color:var(--dt-bg-hover)!important}.div-table-row.group-header{background:var(--dt-bg-base);border-bottom:1px solid var(--dt-border-row);border-top:1px solid var(--dt-border-row);box-shadow:none;color:var(--dt-text-secondary);font-weight:400;isolation:isolate;position:sticky;top:0;z-index:9}.div-table-row.group-header:first-of-type{border-top:none}.div-table-row.group-header:hover{background-color:var(--dt-bg-hover)}.div-table-row.group-header:first-of-type{box-shadow:0 2px 8px var(--dt-shadow-heavy)}.div-table-row.group-header .div-table-cell span{font-weight:600}.div-table-row.group-header .checkbox-column{align-items:center;display:flex;justify-content:center}.div-table-row.group-header .checkbox-column input[type=checkbox]{accent-color:var(--dt-primary);cursor:pointer;height:15px;width:15px}.div-table-row.group-header .checkbox-column input[type=checkbox]:indeterminate{background-color:var(--dt-primary)}.group-toggle,.group-toggle-all{align-items:center;border-radius:3px;cursor:pointer;display:inline-flex;font-size:.9em;justify-content:center;min-height:20px;min-width:20px;padding:2px;transform:rotate(90deg);transition:transform .2s ease}.group-toggle-all.collapsed,.group-toggle.collapsed{transform:rotate(0deg)}.group-toggle-all{font-size:1em;font-weight:700;margin-right:6px}.group-toggle-all:hover,.group-toggle:hover{background-color:var(--dt-shadow);opacity:.7}.div-table-cell.grouped-column{color:var(--dt-text-disabled);font-style:italic}.div-table-cell.composite-column{align-items:flex-start;display:flex;flex-direction:column;gap:2px;padding:6px 12px;white-space:normal}.composite-sub{color:var(--dt-text-muted);line-height:1.2}.div-table-cell.composite-cell{align-items:stretch;display:flex;flex-direction:column;gap:0;padding:8px 12px}.composite-sub-cell{align-items:center;display:flex;min-width:0;overflow:hidden}.composite-sub-cell:first-child{margin-bottom:4px}.composite-sub-cell:not(:first-child){color:var(--dt-text-muted)}.div-table-header-cell.composite-header{flex-direction:column;gap:4px;justify-content:flex-start;padding:8px 12px}.composite-sub-header{border-radius:4px;cursor:pointer;min-width:0;padding:0;transition:background-color .2s ease;user-select:none;width:100%}.composite-sub-header:first-child{color:var(--dt-text-primary);font-weight:600;margin-bottom:4px}.composite-sub-header:hover{background-color:var(--dt-bg-disabled)}.composite-toggle{cursor:pointer;display:inline-block;font-size:.9em;transition:transform .2s ease;user-select:none}.composite-toggle:hover{opacity:.7}.div-table-row.group-collapsed{display:none}.col-fixed-narrow{grid-column:span 1;max-width:80px;min-width:60px}.col-fixed-medium{grid-column:span 1;max-width:140px;min-width:100px}.col-flexible-small{flex:1;grid-column:span 1;min-width:120px}.col-flexible-medium{flex:2;grid-column:span 2;min-width:150px}.col-flexible-large{flex:3;grid-column:span 3;min-width:200px}.div-table-header.grid-5-cols,.div-table-row.grid-5-cols{grid-template-columns:40px 1fr 100px 200px 100px}.div-table-header.grid-4-cols,.div-table-row.grid-4-cols{grid-template-columns:40px 2fr 200px 100px}.div-table-header,.div-table-row{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}@media (max-width:768px){.div-table-toolbar{align-items:stretch;flex-direction:column;gap:8px}.query-inputfield{max-width:100%;width:100%}.div-table-cell.hidden-mobile,.div-table-header-cell.hidden-mobile{display:none}.div-table-header.grid-4-cols,.div-table-header.grid-5-cols,.div-table-row.grid-4-cols,.div-table-row.grid-5-cols{grid-template-columns:40px 2fr 1fr}}@media (max-width:480px){.div-table-cell.hidden-small,.div-table-header-cell.hidden-small{display:none}.div-table-header.grid-4-cols,.div-table-header.grid-5-cols,.div-table-row.grid-4-cols,.div-table-row.grid-5-cols{grid-template-columns:40px 1fr}}.div-table-widget.no-checkboxes .checkbox-column{display:none}.div-table-widget.no-checkboxes .div-table-header.grid-5-cols,.div-table-widget.no-checkboxes .div-table-row.grid-5-cols{grid-template-columns:1fr 2fr 2fr 1fr}.div-table-widget.no-checkboxes .div-table-header.grid-4-cols,.div-table-widget.no-checkboxes .div-table-row.grid-4-cols{grid-template-columns:2fr 2fr 1fr}.div-table-body::-webkit-scrollbar{width:8px}.div-table-body::-webkit-scrollbar-track{background:var(--dt-scrollbar-track);border-radius:4px}.div-table-body::-webkit-scrollbar-thumb{background:var(--dt-scrollbar-thumb);border-radius:4px}.div-table-body::-webkit-scrollbar-thumb:hover{background:var(--dt-scrollbar-thumb-hover)}.div-table-empty{color:var(--dt-text-disabled)}.div-table-empty,.div-table-loading{align-items:center;display:flex;font-style:italic;justify-content:center;min-height:200px}.div-table-loading{color:var(--dt-text-light);position:relative}.div-table-loading:before{animation:spin 1s linear infinite;border-top:2px solid var(--dt-spinner-track);border:2px solid var(--dt-spinner-track);border-radius:50%;border-top-color:var(--dt-spinner-active);content:"";height:20px;margin-right:10px;width:20px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-indicator{align-items:center;background:var(--dt-error-bg);border:1px solid var(--dt-error-border);border-radius:3px;color:var(--dt-error-text);display:none;font-size:14px;gap:10px;justify-content:center;margin:10px 0;padding:15px}.div-table-row.loading-placeholder{background:var(--dt-group-bg);border-bottom:1px solid var(--dt-border-row);cursor:default;pointer-events:none}.div-table-row.loading-placeholder:hover{background:var(--dt-group-bg)!important}.div-table-cell.loading-cell{align-items:center;display:flex;padding:8px 12px}.loading-shimmer-content{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,var(--dt-skeleton-base) 25%,var(--dt-skeleton-shine) 50%,var(--dt-skeleton-base) 75%);background-size:200% 100%;border-radius:4px;height:16px}.retry-button{align-items:stretch;background:var(--dt-error);border:none;border-radius:4px;color:var(--dt-text-inverse);flex-direction:column;gap:0;padding:8px 12px}.div-table-cell.composite-cell .composite-sub-cell{align-items:flex-start}.retry-button:hover{background:var(--dt-error-hover)}.retry-button:active{background:var(--dt-error-active)}.div-table-container.has-fixed-columns{display:flex;flex-direction:column;overflow:hidden}.div-table-columns-wrapper{display:flex;flex:1;min-height:0;overflow:hidden}.div-table-fixed-section{background:var(--dt-bg-base);border-right:1px solid var(--dt-border-light);display:flex;flex:0 0 auto;flex-direction:column;z-index:5}.div-table-fixed-section.has-scroll-shadow{box-shadow:2px 0 8px var(--dt-shadow)}.div-table-scroll-section{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;overflow:hidden}.div-table-fixed-header{display:grid;z-index:11}.div-table-fixed-header,.div-table-scroll-header{box-sizing:border-box;flex-shrink:0;position:relative}.div-table-scroll-header{overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;z-index:10;-ms-overflow-style:none}.div-table-scroll-header::-webkit-scrollbar{display:none}.div-table-scroll-header-inner{display:grid;min-width:100%;width:max-content}.div-table-fixed-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.div-table-fixed-body::-webkit-scrollbar{display:none}.div-table-fixed-body{-ms-overflow-style:none;scrollbar-width:none}.div-table-scroll-body{flex:1;min-height:0;overflow:auto;overflow-x:overlay;overflow-y:overlay}@supports (scrollbar-gutter:stable){.div-table-scroll-body{overflow-x:auto;overflow-y:auto}.div-table-fixed-body,.div-table-scroll-body{scrollbar-gutter:stable}}.div-table-fixed-row,.div-table-scroll-row{align-items:flex-start;box-sizing:border-box;min-height:40px}.div-table-fixed-row,.div-table-scroll-row{background:var(--dt-bg-base);display:grid}.div-table-row.hover,.div-table-row:hover{background-color:var(--dt-bg-hover)}.div-table-fixed-row.selected,.div-table-scroll-row.selected{background-color:var(--dt-bg-selected)!important}.div-table-fixed-row.focused,.div-table-scroll-row.focused{background-color:var(--dt-bg-base);box-shadow:inset 3px 0 0 var(--dt-primary)}.div-table-fixed-row.focused.hover,.div-table-fixed-row.focused:hover,.div-table-scroll-row.focused.hover,.div-table-scroll-row.focused:hover{background-color:var(--dt-primary-lighter)!important}.div-table-fixed-row.group-header,.div-table-scroll-row.group-header{background:var(--dt-bg-base);border-bottom:1px solid var(--dt-border-row);border-top:1px solid var(--dt-border-row);position:sticky;top:0;z-index:4}.div-table-fixed-row.group-header.focused,.div-table-scroll-row.group-header.focused{background-color:var(--dt-bg-base)!important;box-shadow:inset 3px 0 0 var(--dt-primary)!important}.div-table-scroll-section .div-table-cell{overflow:visible;text-overflow:clip;white-space:nowrap}.div-table-scroll-section .div-table-header-cell,.div-table-scroll-section .header-left-content{overflow:visible}.div-table-scroll-section .header-left-content>span{overflow:visible;text-overflow:clip;white-space:nowrap}.div-table-scroll-row{min-width:100%;width:max-content}@media (max-width:768px){.div-table-container.has-fixed-columns{display:flex;flex-direction:column}.div-table-columns-wrapper{flex-direction:column}.div-table-fixed-section{border-bottom:1px solid var(--dt-border-light);border-right:none;box-shadow:0 2px 8px var(--dt-shadow);flex:0 0 auto}.div-table-scroll-section{flex:1 1 auto}}.div-table-row.summary-row{background-color:var(--dt-bg-base);border-bottom:2px solid var(--dt-border-dark);font-weight:600;min-height:32px}.div-table-row.header-summary{background-color:var(--dt-bg-summary);border-bottom:1px solid var(--dt-summary-border);position:sticky;top:0;z-index:2}.div-table-row.group-summary{border-bottom:1px solid var(--dt-summary-border);font-size:.95em;font-weight:500}.div-table-cell.summary-cell{color:var(--dt-text-secondary);padding:8px 12px}.aggregate-value{color:var(--dt-text-primary);font-variant-numeric:tabular-nums;font-weight:700}.div-table-row.summary-row:hover{background-color:var(--dt-bg-summary)}.div-table-fixed-row.summary-row{background-color:var(--dt-bg-base);min-height:32px}.div-table-fixed-row.header-summary{background-color:var(--dt-bg-summary)}.div-table-cell.summary-cell:empty{min-height:1em}
|
|
1
|
+
:root{--dt-primary:#007bff;--dt-primary-hover:#0056b3;--dt-primary-light:rgba(0,123,255,.1);--dt-primary-lighter:rgba(0,123,255,.05);--dt-focus-ring:rgba(3,102,214,.1);--dt-bg-base:#fff;--dt-bg-light:#f9f9f7;--dt-bg-hover:#f0f7ff;--dt-bg-selected:rgba(0,123,255,.1);--dt-bg-header:#f9f9f7;--dt-bg-summary:#f9f9f7;--dt-bg-disabled:#f0f0f0;--dt-border-light:#e9ecef;--dt-border-medium:#e1e5e9;--dt-border-dark:#ced4da;--dt-border-row:#f1f3f4;--dt-border-focus:#123a67;--dt-border-hover:#b0b8c1;--dt-text-primary:#374151;--dt-text-secondary:#495057;--dt-text-muted:#6b7280;--dt-text-light:#666;--dt-text-disabled:#999;--dt-text-inverse:#fff;--dt-shadow:rgba(0,0,0,.1);--dt-shadow-medium:rgba(0,0,0,.12);--dt-shadow-heavy:rgba(0,0,0,.15);--dt-error:#dc3545;--dt-error-light:rgba(220,53,69,.6);--dt-error-hover:#c82333;--dt-error-active:#bd2130;--dt-error-bg:#fff5f5;--dt-error-border:#fed7d7;--dt-error-text:#c53030;--dt-error-border-hover:rgba(200,35,51,.6);--dt-error-focus-ring:rgba(220,53,69,.25);--dt-success:#28a745;--dt-success-bg:#e8f5e9;--dt-success-bg-hover:#c8e6c9;--dt-warning:#ffc107;--dt-warning-bg:#fff8e1;--dt-warning-bg-hover:#ffecb3;--dt-info:#0ea5e9;--dt-info-bg:#e0f2fe;--dt-info-bg-hover:#bae6fd;--dt-button-bg:#f0f0f0;--dt-button-bg-hover:#e0e0e0;--dt-button-text:#333;--dt-scrollbar-track:#f1f1f1;--dt-scrollbar-thumb:#c1c1c1;--dt-scrollbar-thumb-hover:#a8a8a8;--dt-spinner-track:#e3e3e3;--dt-spinner-active:#666;--dt-skeleton-base:#e9ecef;--dt-skeleton-shine:#f8f9fa;--dt-group-bg:hsla(60,14%,97%,.5);--dt-summary-border:#adb5bd}.div-table-widget{background:var(--dt-bg-base);border-radius:8px;box-shadow:0 2px 8px var(--dt-shadow);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.div-table-toolbar{align-items:center;background:var(--dt-bg-light);border-bottom:1px solid var(--dt-border-light);display:flex;flex-shrink:0;gap:10px;padding:16px}.query-inputfield{background:var(--dt-bg-base);border:2px solid var(--dt-border-medium);border-radius:8px;box-shadow:0 1px 3px var(--dt-shadow);flex:1;min-width:50%;overflow:hidden;padding:10px 5px 4px 10px;transition:all .2s ease-in-out}.query-inputfield:hover{border-color:var(--dt-border-hover);box-shadow:0 2px 4px var(--dt-shadow-medium)}.query-inputfield.focused{border-color:var(--dt-border-focus);box-shadow:0 0 0 3px var(--dt-focus-ring),0 1px 3px var(--dt-shadow);outline:none}.query-inputfield.error{border-color:var(--dt-error-light)}.query-inputfield.error:hover{border-color:var(--dt-error-border-hover)}.query-inputfield.error.focused{border-color:var(--dt-error-light);box-shadow:0 0 0 3px var(--dt-error-focus-ring),0 1px 3px var(--dt-shadow)}.query-inputfield .monaco-editor{height:22px!important;--vscode-focusBorder:transparent}.div-table-toolbar select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--dt-bg-base);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:2px solid var(--dt-border-medium);border-radius:8px;box-shadow:0 1px 3px var(--dt-shadow);color:var(--dt-text-secondary);cursor:pointer;font-size:14px;min-width:150px;padding:10px 32px 10px 12px;transition:all .2s ease-in-out}.div-table-toolbar select:hover{border-color:var(--dt-border-hover);box-shadow:0 2px 4px var(--dt-shadow-medium)}.div-table-toolbar select:focus{border-color:var(--dt-border-focus);box-shadow:0 0 0 3px var(--dt-focus-ring),0 1px 3px var(--dt-shadow);outline:none}.div-table-toolbar select:disabled{background-color:var(--dt-bg-light);border-color:var(--dt-border-light);color:var(--dt-text-muted);cursor:not-allowed}.info-section{color:var(--dt-text-light);display:flex;flex-direction:column;font-size:.9em;gap:0;margin-left:auto;min-width:200px;padding:0;text-align:right}.info-line-container{gap:8px}.info-line,.info-line-container{align-items:center;display:flex;justify-content:flex-end}.info-line.secondary{color:var(--dt-text-disabled);font-size:.8em}.refresh-button{align-items:center;background:none;border:none;border-radius:3px;color:var(--dt-text-light);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;min-height:22px;min-width:22px;padding:4px;transition:all .2s ease;width:22px}.refresh-button:hover{background-color:var(--dt-button-bg);color:var(--dt-button-text)}.refresh-button:active{background-color:var(--dt-button-bg-hover)}.refresh-button.refreshing{color:var(--dt-primary)}.refresh-button.refreshing svg{animation:spin 1s linear infinite}.refresh-button svg{height:14px;transition:transform .2s ease;width:14px}.auto-fetch-button{align-items:center;background:none;border:none;border-radius:3px;color:var(--dt-text-light);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;margin-left:4px;min-height:22px;min-width:22px;padding:4px;transition:all .2s ease;width:22px}.auto-fetch-button:hover{background-color:var(--dt-button-bg);color:var(--dt-button-text)}.auto-fetch-button:active{background-color:var(--dt-button-bg-hover)}.auto-fetch-button.active{background-color:var(--dt-success-bg);color:var(--dt-success)}.auto-fetch-button.active:hover{background-color:var(--dt-success-bg-hover)}.auto-fetch-button.paused{background-color:var(--dt-warning-bg);color:var(--dt-warning)}.auto-fetch-button.paused:hover{background-color:var(--dt-warning-bg-hover)}.auto-fetch-button:disabled{cursor:not-allowed;opacity:.5}.auto-fetch-button svg{height:14px;transition:transform .2s ease;width:14px}.filter-selected-only-toggle-button{align-items:center;background:none;border:none;border-radius:3px;color:var(--dt-text-light);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;margin-right:6px;min-height:22px;min-width:22px;padding:4px;transition:all .2s ease;width:22px}.filter-selected-only-toggle-button:hover{background-color:var(--dt-button-bg);color:var(--dt-button-text)}.filter-selected-only-toggle-button:active{background-color:var(--dt-button-bg-hover)}.filter-selected-only-toggle-button.active{background-color:var(--dt-info-bg);color:var(--dt-info)}.filter-selected-only-toggle-button.active:hover{background-color:var(--dt-info-bg-hover)}.filter-selected-only-toggle-button svg{height:14px;transition:transform .2s ease;width:14px}.info-selection{font-weight:600}.info-stats{color:var(--dt-text-light)}.progress-line{align-items:center;display:flex;justify-content:flex-end;margin-top:2px}.loading-progress{background:var(--dt-border-light);border-radius:2px;height:4px;overflow:hidden;position:relative;width:120px}.progress-segment{border-radius:2px;height:100%;position:absolute;top:0;transition:width .3s ease,left .3s ease}.filtered-segment{background:var(--dt-error);z-index:3}.loaded-segment{background:var(--dt-text-secondary);z-index:2}.loading-segment{background:var(--dt-primary);z-index:1}.loading-segment:after{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.8),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.loading-progress[data-state=filtered-loading],.loading-progress[data-state=sequential-loading]{position:relative}.loading-progress[data-state=filtered] .loaded-segment{background:var(--dt-text-light)}.loading-progress-bar{background:var(--dt-text-secondary);border-radius:2px;height:100%;position:relative;transition:width .3s ease}.loading-progress-bar.loading:after{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.8),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.loading-progress[data-state=filtered] .loading-progress-bar{background:var(--dt-text-light)}.loading-progress[data-state=filtered] .loading-progress-bar.loading:after{animation:filtered-shimmer 2s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent)}.loading-progress[data-state=loading] .loading-progress-bar{background:var(--dt-text-secondary)}@keyframes loading-shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes filtered-shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.div-table-container{background:var(--dt-bg-base);display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;width:100%}.div-table-header{align-items:auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--dt-bg-header);border-bottom:1px solid var(--dt-border-light);color:var(--dt-text-primary);display:grid;flex-shrink:0;min-height:48px;position:sticky;top:0;transition:box-shadow .3s cubic-bezier(.4,0,.2,1);z-index:10}.scrollbar-spacer{background:transparent;pointer-events:none}.div-table-header.scrolled{box-shadow:0 2px 8px var(--dt-shadow)}.div-table-body{background:var(--dt-bg-base);flex:1;min-height:0;overflow-y:auto}.div-table-row{align-items:stretch;border-bottom:1px solid var(--dt-border-row);box-sizing:border-box;color:var(--dt-text-primary);cursor:pointer;display:grid;gap:0;min-height:40px;transition:all .2s ease}.div-table-row:hover{background-color:var(--dt-bg-hover)}.div-table-row:last-child{border-bottom:none}.div-table-cell{box-sizing:border-box;min-width:0;text-overflow:ellipsis;white-space:nowrap}.div-table-cell,.div-table-header-cell{align-items:flex-start;display:flex;overflow:hidden;padding:8px 12px}.div-table-header-cell{color:var(--dt-text-primary);cursor:pointer;justify-content:space-between;transition:background-color .2s ease;user-select:none}.header-left-content{align-items:center;display:flex;flex:1 1 auto;font-weight:600;gap:0;min-width:0;overflow:hidden}.header-left-content>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-right-content{align-items:center;display:flex;flex:0 0 auto;gap:4px;margin-left:8px}.div-table-header-cell:hover{background-color:var(--dt-shadow)}.group-indicator{align-items:center;display:inline-flex;font-size:12px;height:20px;justify-content:center;opacity:0;transition:opacity .2s ease;width:14px}.div-table-header-cell:hover .group-indicator{opacity:.5}.group-indicator:hover{opacity:1!important}.group-indicator.grouped{color:inherit;opacity:1!important}.sort-indicator{align-items:center;display:inline-flex;height:20px;justify-content:center;opacity:0;transition:opacity .2s ease;width:14px}.div-table-header-cell:hover .sort-indicator{opacity:.5}.sort-indicator.active{opacity:1!important}.header-right-content>span:last-child:not(.group-indicator):not(.sort-indicator){opacity:0;transition:opacity .2s ease}.div-table-header-cell:hover .header-right-content>span:last-child:not(.group-indicator):not(.sort-indicator){opacity:.5}.div-table-header-cell.sorted .header-right-content>span:last-child:not(.sort-indicator){opacity:1!important}.sub-sort-indicator{align-items:center;display:inline-flex;height:20px;justify-content:center;opacity:0;transition:opacity .2s ease;width:14px}.composite-header:hover .sub-sort-indicator,.composite-sub-header:hover .sub-sort-indicator{opacity:.5}.sub-sort-indicator.active{opacity:1!important}.div-table-cell.checkbox-column,.div-table-header-cell.checkbox-column{justify-content:center;max-width:40px;min-width:40px;padding:8px 4px;width:40px}.div-table-cell.checkbox-column input[type=checkbox],.div-table-header-cell.checkbox-column input[type=checkbox]{accent-color:var(--dt-primary);cursor:pointer;height:15px;margin:0;width:15px}input[type=checkbox]:indeterminate{background-color:var(--dt-primary);border-color:var(--dt-primary);position:relative}input[type=checkbox]:indeterminate:after{color:var(--dt-text-inverse);content:"━";font-size:10px;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.div-table-header-cell.checkbox-column input[type=checkbox]:indeterminate{background-color:var(--dt-primary);border-color:var(--dt-primary)}.div-table-row.selected{background-color:var(--dt-bg-selected)!important}.div-table-row.focused{background-color:var(--dt-bg-base);box-shadow:inset 3px 0 0 var(--dt-primary)}.div-table-row.focused:hover{background-color:var(--dt-primary-lighter)!important}.div-table-row.group-header.focused{background-color:var(--dt-bg-base)!important;box-shadow:inset 3px 0 0 var(--dt-primary)!important}.div-table-row.group-header.focused:hover{background-color:var(--dt-bg-hover)!important}.div-table-row.group-header{background:var(--dt-bg-base);border-bottom:1px solid var(--dt-border-row);border-top:1px solid var(--dt-border-row);box-shadow:none;color:var(--dt-text-secondary);font-weight:400;isolation:isolate;position:sticky;top:0;z-index:9}.div-table-row.group-header:first-of-type{border-top:none}.div-table-row.group-header:hover{background-color:var(--dt-bg-hover)}.div-table-row.group-header:first-of-type{box-shadow:0 2px 8px var(--dt-shadow-heavy)}.div-table-row.group-header .div-table-cell span{font-weight:600}.div-table-row.group-header .checkbox-column{align-items:center;display:flex;justify-content:center}.div-table-row.group-header .checkbox-column input[type=checkbox]{accent-color:var(--dt-primary);cursor:pointer;height:15px;width:15px}.div-table-row.group-header .checkbox-column input[type=checkbox]:indeterminate{background-color:var(--dt-primary)}.group-toggle,.group-toggle-all{align-items:center;border-radius:3px;cursor:pointer;display:inline-flex;font-size:.9em;justify-content:center;min-height:20px;min-width:20px;padding:2px;transform:rotate(90deg);transition:transform .2s ease}.group-toggle-all.collapsed,.group-toggle.collapsed{transform:rotate(0deg)}.group-toggle-all{font-size:1em;font-weight:700;margin-right:6px}.group-toggle-all:hover,.group-toggle:hover{background-color:var(--dt-shadow);opacity:.7}.div-table-cell.grouped-column{color:var(--dt-text-disabled);font-style:italic}.div-table-cell.composite-column{align-items:flex-start;display:flex;flex-direction:column;gap:2px;padding:6px 12px;white-space:normal}.composite-sub{color:var(--dt-text-muted);line-height:1.2}.div-table-cell.composite-cell{align-items:stretch;display:flex;flex-direction:column;gap:0;padding:8px 12px}.composite-sub-cell{align-items:center;display:flex;min-width:0;overflow:hidden}.composite-sub-cell:first-child{margin-bottom:4px}.composite-sub-cell:not(:first-child){color:var(--dt-text-muted)}.div-table-header-cell.composite-header{flex-direction:column;gap:4px;justify-content:flex-start;padding:8px 12px}.composite-sub-header{border-radius:4px;cursor:pointer;min-width:0;padding:0;transition:background-color .2s ease;user-select:none;width:100%}.composite-sub-header:first-child{color:var(--dt-text-primary);font-weight:600;margin-bottom:4px}.composite-main-header{color:var(--dt-text-primary)}.composite-sub-header:hover{background-color:var(--dt-bg-disabled)}.composite-toggle{cursor:pointer;display:inline-block;font-size:.9em;transition:transform .2s ease;user-select:none}.composite-toggle:hover{opacity:.7}.div-table-row.group-collapsed{display:none}.col-fixed-narrow{grid-column:span 1;max-width:80px;min-width:60px}.col-fixed-medium{grid-column:span 1;max-width:140px;min-width:100px}.col-flexible-small{flex:1;grid-column:span 1;min-width:120px}.col-flexible-medium{flex:2;grid-column:span 2;min-width:150px}.col-flexible-large{flex:3;grid-column:span 3;min-width:200px}.div-table-header.grid-5-cols,.div-table-row.grid-5-cols{grid-template-columns:40px 1fr 100px 200px 100px}.div-table-header.grid-4-cols,.div-table-row.grid-4-cols{grid-template-columns:40px 2fr 200px 100px}.div-table-header,.div-table-row{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}@media (max-width:768px){.div-table-toolbar{align-items:stretch;flex-direction:column;gap:8px}.query-inputfield{max-width:100%;width:100%}.div-table-cell.hidden-mobile,.div-table-header-cell.hidden-mobile{display:none}.div-table-header.grid-4-cols,.div-table-header.grid-5-cols,.div-table-row.grid-4-cols,.div-table-row.grid-5-cols{grid-template-columns:40px 2fr 1fr}}@media (max-width:480px){.div-table-cell.hidden-small,.div-table-header-cell.hidden-small{display:none}.div-table-header.grid-4-cols,.div-table-header.grid-5-cols,.div-table-row.grid-4-cols,.div-table-row.grid-5-cols{grid-template-columns:40px 1fr}}.div-table-widget.no-checkboxes .checkbox-column{display:none}.div-table-widget.no-checkboxes .div-table-header.grid-5-cols,.div-table-widget.no-checkboxes .div-table-row.grid-5-cols{grid-template-columns:1fr 2fr 2fr 1fr}.div-table-widget.no-checkboxes .div-table-header.grid-4-cols,.div-table-widget.no-checkboxes .div-table-row.grid-4-cols{grid-template-columns:2fr 2fr 1fr}.div-table-body::-webkit-scrollbar{width:8px}.div-table-body::-webkit-scrollbar-track{background:var(--dt-scrollbar-track);border-radius:4px}.div-table-body::-webkit-scrollbar-thumb{background:var(--dt-scrollbar-thumb);border-radius:4px}.div-table-body::-webkit-scrollbar-thumb:hover{background:var(--dt-scrollbar-thumb-hover)}.div-table-empty{color:var(--dt-text-disabled)}.div-table-empty,.div-table-loading{align-items:center;display:flex;font-style:italic;justify-content:center;min-height:200px}.div-table-loading{color:var(--dt-text-light);position:relative}.div-table-loading:before{animation:spin 1s linear infinite;border-top:2px solid var(--dt-spinner-track);border:2px solid var(--dt-spinner-track);border-radius:50%;border-top-color:var(--dt-spinner-active);content:"";height:20px;margin-right:10px;width:20px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-indicator{align-items:center;background:var(--dt-error-bg);border:1px solid var(--dt-error-border);border-radius:3px;color:var(--dt-error-text);display:none;font-size:14px;gap:10px;justify-content:center;margin:10px 0;padding:15px}.div-table-row.loading-placeholder{background:var(--dt-group-bg);border-bottom:1px solid var(--dt-border-row);cursor:default;pointer-events:none}.div-table-row.loading-placeholder:hover{background:var(--dt-group-bg)!important}.div-table-cell.loading-cell{align-items:center;display:flex;padding:8px 12px}.loading-shimmer-content{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,var(--dt-skeleton-base) 25%,var(--dt-skeleton-shine) 50%,var(--dt-skeleton-base) 75%);background-size:200% 100%;border-radius:4px;height:16px}.retry-button{align-items:stretch;background:var(--dt-error);border:none;border-radius:4px;color:var(--dt-text-inverse);flex-direction:column;gap:0;padding:8px 12px}.div-table-cell.composite-cell .composite-sub-cell{align-items:flex-start}.retry-button:hover{background:var(--dt-error-hover)}.retry-button:active{background:var(--dt-error-active)}.div-table-container.has-fixed-columns{display:flex;flex-direction:column;overflow:hidden}.div-table-columns-wrapper{display:flex;flex:1;min-height:0;overflow:hidden}.div-table-fixed-section{background:var(--dt-bg-base);border-right:1px solid var(--dt-border-light);display:flex;flex:0 0 auto;flex-direction:column;z-index:5}.div-table-fixed-section.has-scroll-shadow{box-shadow:2px 0 8px var(--dt-shadow)}.div-table-scroll-section{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;overflow:hidden}.div-table-fixed-header{display:grid;z-index:11}.div-table-fixed-header,.div-table-scroll-header{box-sizing:border-box;flex-shrink:0;position:relative}.div-table-scroll-header{overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;z-index:10;-ms-overflow-style:none}.div-table-scroll-header::-webkit-scrollbar{display:none}.div-table-scroll-header-inner{display:grid;min-width:100%;width:max-content}.div-table-fixed-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.div-table-fixed-body::-webkit-scrollbar{display:none}.div-table-fixed-body{-ms-overflow-style:none;scrollbar-width:none}.div-table-scroll-body{flex:1;min-height:0;overflow:auto;overflow-x:overlay;overflow-y:overlay}@supports (scrollbar-gutter:stable){.div-table-scroll-body{overflow-x:auto;overflow-y:auto}.div-table-fixed-body,.div-table-scroll-body{scrollbar-gutter:stable}}.div-table-fixed-row,.div-table-scroll-row{align-items:flex-start;box-sizing:border-box;min-height:40px}.div-table-fixed-row,.div-table-scroll-row{background:var(--dt-bg-base);display:grid}.div-table-row.hover,.div-table-row:hover{background-color:var(--dt-bg-hover)}.div-table-fixed-row.selected,.div-table-scroll-row.selected{background-color:var(--dt-bg-selected)!important}.div-table-fixed-row.focused,.div-table-scroll-row.focused{background-color:var(--dt-bg-base);box-shadow:inset 3px 0 0 var(--dt-primary)}.div-table-fixed-row.focused.hover,.div-table-fixed-row.focused:hover,.div-table-scroll-row.focused.hover,.div-table-scroll-row.focused:hover{background-color:var(--dt-primary-lighter)!important}.div-table-fixed-row.group-header,.div-table-scroll-row.group-header{background:var(--dt-bg-base);border-bottom:1px solid var(--dt-border-row);border-top:1px solid var(--dt-border-row);position:sticky;top:0;z-index:4}.div-table-fixed-row.group-header.focused,.div-table-scroll-row.group-header.focused{background-color:var(--dt-bg-base)!important;box-shadow:inset 3px 0 0 var(--dt-primary)!important}.div-table-scroll-section .div-table-cell{overflow:visible;text-overflow:clip;white-space:nowrap}.div-table-scroll-section .div-table-header-cell,.div-table-scroll-section .header-left-content{overflow:visible}.div-table-scroll-section .header-left-content>span{overflow:visible;text-overflow:clip;white-space:nowrap}.div-table-scroll-row{min-width:100%;width:max-content}@media (max-width:768px){.div-table-container.has-fixed-columns{display:flex;flex-direction:column}.div-table-columns-wrapper{flex-direction:column}.div-table-fixed-section{border-bottom:1px solid var(--dt-border-light);border-right:none;box-shadow:0 2px 8px var(--dt-shadow);flex:0 0 auto}.div-table-scroll-section{flex:1 1 auto}}.div-table-row.summary-row{background-color:var(--dt-bg-base);border-bottom:2px solid var(--dt-border-dark);font-weight:600;min-height:32px}.div-table-row.header-summary{background-color:var(--dt-bg-summary);border-bottom:1px solid var(--dt-summary-border);position:sticky;top:0;z-index:2}.div-table-row.group-summary{border-bottom:1px solid var(--dt-summary-border);font-size:.95em;font-weight:500}.div-table-cell.summary-cell{color:var(--dt-text-secondary);padding:8px 12px}.aggregate-value{color:var(--dt-text-primary);font-variant-numeric:tabular-nums;font-weight:700}.div-table-row.summary-row:hover{background-color:var(--dt-bg-summary)}.div-table-fixed-row.summary-row{background-color:var(--dt-bg-base);min-height:32px}.div-table-fixed-row.header-summary{background-color:var(--dt-bg-summary)}.div-table-cell.summary-cell:empty{min-height:1em}
|