@forgedevstack/grid-table 1.0.1 → 1.0.2
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 +24 -0
- package/README.md +16 -5
- package/dist/grid-table.css +1 -0
- package/dist/index.js +98 -113
- package/dist/index.mjs +98 -113
- package/package.json +8 -5
- package/src/grid-table.scss +26 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,30 @@ 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.2] - 2026-01-17
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
|
|
12
|
+
- **BREAKING**: Migrated from Tailwind CSS to SCSS for zero-config styling
|
|
13
|
+
- Removed Tailwind CSS dependency completely
|
|
14
|
+
- All styles now self-contained in SCSS
|
|
15
|
+
- Compiled CSS included in package
|
|
16
|
+
- No Tailwind configuration required
|
|
17
|
+
- Fixed package.json exports order - moved `types` before `import` and `require` to resolve TypeScript warnings
|
|
18
|
+
- Updated package name to `@forgedevstack/grid-table` to match npm organization
|
|
19
|
+
|
|
20
|
+
### Added
|
|
21
|
+
|
|
22
|
+
- SCSS source files for better maintainability
|
|
23
|
+
- Compiled CSS file in dist for zero-config usage
|
|
24
|
+
- Build process now compiles SCSS to CSS automatically
|
|
25
|
+
|
|
26
|
+
## [1.0.1] - 2026-01-17
|
|
27
|
+
|
|
28
|
+
### Changed
|
|
29
|
+
|
|
30
|
+
- Initial npm publication with `@forgedevstack` scope
|
|
31
|
+
|
|
8
32
|
## [0.1.0] - 2026-01-15
|
|
9
33
|
|
|
10
34
|
### Added
|
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# grid-table
|
|
2
2
|
|
|
3
|
-
A powerful, headless grid table component for React with
|
|
3
|
+
A powerful, headless grid table component for React with SCSS styling, drag-and-drop columns, filtering, sorting, and responsive mobile support. Zero-config - no Tailwind CSS required!
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- **
|
|
7
|
+
- **SCSS Styling**: Self-contained SCSS styles, no Tailwind CSS dependency required
|
|
8
8
|
- **React 16.8+**: Works with all React versions that support hooks
|
|
9
9
|
- **Dark/Light Theme**: Built-in theme support with customizable colors
|
|
10
10
|
- **Filtering**: Column-level and global filtering with multiple operators
|
|
@@ -24,13 +24,24 @@ A powerful, headless grid table component for React with Tailwind CSS styling, d
|
|
|
24
24
|
## Installation
|
|
25
25
|
|
|
26
26
|
```bash
|
|
27
|
-
npm install grid-table
|
|
27
|
+
npm install @forgedevstack/grid-table
|
|
28
28
|
# or
|
|
29
|
-
pnpm add grid-table
|
|
29
|
+
pnpm add @forgedevstack/grid-table
|
|
30
30
|
# or
|
|
31
|
-
yarn add grid-table
|
|
31
|
+
yarn add @forgedevstack/grid-table
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
+
### Import CSS (Required)
|
|
35
|
+
|
|
36
|
+
**Zero-config setup** - No Tailwind CSS required! Import the compiled CSS file once in your app:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
// In your main entry file (e.g., main.tsx, App.tsx, or index.css)
|
|
40
|
+
import '@forgedevstack/grid-table/grid-table.css';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
This provides all the necessary styles. The package uses SCSS internally and compiles to CSS - no configuration needed!
|
|
44
|
+
|
|
34
45
|
## Quick Start
|
|
35
46
|
|
|
36
47
|
```tsx
|
|
@@ -0,0 +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}}
|