react-open-source-grid 1.0.6 → 1.1.0
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 +59 -1
- package/dist/404.html +40 -0
- package/dist/assets/{index-CzvOHWDO.js → index-B3Bc2jkG.js} +229 -87
- package/dist/assets/index-DqLWhpvP.css +1 -0
- package/dist/assets/{layoutPersistence-CplQV3x3.js → layoutPersistence-YxYcHuDF.js} +1 -1
- package/dist/index.html +57 -4
- package/dist/logo.png +0 -0
- package/dist/robots.txt +11 -0
- package/dist/sitemap.xml +172 -0
- package/package.json +3 -1
- package/dist/assets/index-DcgPHqjq.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fafafa;margin:0;padding:0;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.6}input,button,textarea,select{font-family:inherit;font-size:inherit}button{cursor:pointer;background:0 0;border:none;margin:0;padding:0}:root{--color-primary:#06c;--color-primary-light:#e8f0ff;--color-primary-dark:#004ca3;--color-neutral-dark:#1a1a1a;--color-neutral-light:#f5f5f5;--color-border:#d9d9d9;--color-border-light:#efefef;--color-bg-hover:#f0f0f0;--color-text-primary:#262626;--color-text-secondary:#666;--grid-border:#e5e7eb;--grid-border-width:1px;--grid-border-radius:6px;--grid-bg:#fff;--grid-bg-alt:#f9fafb;--grid-header-bg:#f3f4f6;--grid-footer-bg:#f9fafb;--grid-text:#111827;--grid-text-secondary:#6b7280;--grid-text-muted:#9ca3af;--grid-header-text:#374151;--grid-primary:#3b82f6;--grid-selected:#3b82f614;--grid-hover:#f9fafb;--grid-active:#eff6ff;--grid-cell-padding:10px 12px;--grid-header-padding:10px 12px;--grid-font-size:13px;--grid-font-size-sm:12px;--grid-header-font-weight:600;--grid-shadow-light:0 1px 3px 0 #00000014;--grid-text-inverse:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.virtual-scroller-container{scrollbar-width:thin;scrollbar-color:#c1c1c1 #f1f1f1}.virtual-scroller-container::-webkit-scrollbar{-webkit-appearance:none;width:12px;height:12px}.virtual-scroller-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0}.virtual-scroller-container::-webkit-scrollbar-thumb{background:#c1c1c1;border:2px solid #f1f1f1;border-radius:6px}.virtual-scroller-container::-webkit-scrollbar-thumb:hover{background:#a1a1a1}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.context-menu{background:var(--context-menu-bg,#fff);border:1px solid var(--context-menu-border,#d0d0d0);z-index:10000;min-width:200px;max-width:320px;color:var(--context-menu-text,#333);-webkit-user-select:none;user-select:none;border-radius:6px;padding:4px 0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5;animation:.12s ease-out contextMenuFadeIn;position:fixed;box-shadow:0 4px 16px #00000026}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{cursor:pointer;align-items:center;gap:8px;padding:8px 12px;transition:background-color .1s;display:flex;position:relative}.context-menu-item:hover:not(.disabled){background-color:var(--context-menu-hover-bg,#f0f0f0)}.context-menu-item:active:not(.disabled){background-color:var(--context-menu-active-bg,#e5e5e5)}.context-menu-item.disabled{opacity:.4;cursor:not-allowed}.context-menu-item.danger{color:var(--context-menu-danger,#dc3545)}.context-menu-item.danger:hover:not(.disabled){background-color:var(--context-menu-danger-hover-bg,#fff0f0)}.context-menu-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;font-size:16px;display:flex}.context-menu-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.context-menu-shortcut{color:var(--context-menu-shortcut,#888);margin-left:auto;padding-left:16px;font-size:12px}.context-menu-arrow{color:var(--context-menu-arrow,#888);margin-left:auto;font-size:10px}.context-menu-separator{background-color:var(--context-menu-separator,#e0e0e0);height:1px;margin:4px 0}@media (prefers-color-scheme:dark){.context-menu{--context-menu-bg:#2a2a2a;--context-menu-border:#404040;--context-menu-text:#e0e0e0;--context-menu-hover-bg:#3a3a3a;--context-menu-active-bg:#4a4a4a;--context-menu-separator:#404040;--context-menu-shortcut:#999;--context-menu-arrow:#999;--context-menu-danger:#ff6b6b;--context-menu-danger-hover-bg:#3a2a2a}}.data-grid.theme-quartz .context-menu{--context-menu-bg:#fff;--context-menu-border:#c5c5c5;--context-menu-text:#000;--context-menu-hover-bg:#e6f2ff;--context-menu-active-bg:#cce5ff}.data-grid.theme-alpine .context-menu{--context-menu-bg:#f8f9fa;--context-menu-border:#dee2e6;--context-menu-text:#212529;--context-menu-hover-bg:#e9ecef;--context-menu-active-bg:#dee2e6}.data-grid.theme-balham .context-menu{--context-menu-bg:#fff;--context-menu-border:#bdc3c7;--context-menu-text:#2c3e50;--context-menu-hover-bg:#ecf0f1;--context-menu-active-bg:#d5dbdb}.data-grid.theme-material .context-menu{--context-menu-bg:#fff;--context-menu-border:#e0e0e0;--context-menu-text:#212121;--context-menu-hover-bg:#f5f5f5;--context-menu-active-bg:#eee;border-radius:4px;box-shadow:0 2px 4px #0003}.context-menu-item:focus{outline:2px solid var(--context-menu-focus,#06c);outline-offset:-2px}.context-menu-item:focus:not(:focus-visible){outline:none}.market-data-grid{background:#fff;border:1px solid #e0e0e0;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:13px;overflow:auto}.market-grid-header{z-index:10;background:#f5f5f5;border-bottom:2px solid #d0d0d0;position:sticky;top:0}.market-grid-header-row{min-width:100%;display:flex}.market-grid-header-cell{color:#333;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;border-right:1px solid #e0e0e0;padding:10px 12px;font-weight:600;overflow:hidden}.market-grid-header-cell:last-child{border-right:none}.market-grid-body{min-width:100%}.market-grid-row{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .1s;display:flex}.market-grid-row:hover{background-color:#f9f9f9}.market-grid-row:active{background-color:#f0f0f0}.market-grid-cell{white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #f5f5f5;align-items:center;padding:8px 12px;display:flex;position:relative;overflow:hidden}.market-grid-cell:last-child{border-right:none}.numeric-cell{font-variant-numeric:tabular-nums;justify-content:flex-end;font-family:Monaco,Menlo,Consolas,monospace}@keyframes flashUp{0%{background-color:#4caf5000}20%{background-color:#4caf5066}to{background-color:#4caf5000}}@keyframes flashDown{0%{background-color:#f4433600}20%{background-color:#f4433666}to{background-color:#f4433600}}.cell-flash-up{animation:.5s ease-out flashUp}.cell-flash-down{animation:.5s ease-out flashDown}.change-positive{color:#4caf50;font-weight:600}.change-negative{color:#f44336;font-weight:600}.market-grid-cell[data-field=bid]{color:#2196f3;font-weight:500}.market-grid-cell[data-field=ask]{color:#ff5722;font-weight:500}.market-grid-cell[data-field=price]{font-size:14px;font-weight:700}.market-grid-cell[data-field=volume],.market-grid-cell[data-field=size]{color:#666;font-size:12px}.market-grid-cell[data-field=symbol],.market-grid-cell[data-field=id]{color:#1976d2;font-family:Monaco,Menlo,Consolas,monospace;font-weight:700}.density-compact .market-grid-header-cell{padding:6px 8px;font-size:12px}.density-compact .market-grid-cell{padding:4px 8px;font-size:12px}.density-compact .market-grid-cell[data-field=price]{font-size:13px}.density-compact .market-grid-row{min-height:28px}.market-grid-cell[data-field=high]{color:#4caf50}.market-grid-cell[data-field=low]{color:#f44336}.market-data-grid.loading{opacity:.6;pointer-events:none}.market-data-grid.loading:after{content:"";border:4px solid #f3f3f3;border-top-color:#2196f3;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.market-data-grid.paused{border:2px solid #ff9800}.market-data-grid.paused:before{content:"PAUSED";color:#fff;z-index:1000;letter-spacing:1px;background:#ff9800;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:700;position:absolute;top:10px;right:10px}.market-data-grid.throttled{border:2px solid #f44336}.market-data-grid.throttled:before{content:"THROTTLED";color:#fff;z-index:1000;letter-spacing:1px;background:#f44336;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:700;position:absolute;top:10px;right:10px}.market-data-grid::-webkit-scrollbar{width:12px;height:12px}.market-data-grid::-webkit-scrollbar-track{background:#f5f5f5}.market-data-grid::-webkit-scrollbar-thumb{background:#ccc;border-radius:6px}.market-data-grid::-webkit-scrollbar-thumb:hover{background:#999}.market-data-wrapper{width:100%;height:100%;position:relative}.market-metrics-overlay{color:#0f0;z-index:1000;pointer-events:none;background:#000000bf;border-radius:4px;padding:8px 12px;font-family:Monaco,Menlo,Consolas,monospace;font-size:11px;line-height:1.6;position:absolute;top:10px;left:10px}.market-metrics-overlay .metric{justify-content:space-between;gap:12px;display:flex}.market-metrics-overlay .metric-label{color:#888}.market-metrics-overlay .metric-value{color:#0f0;font-weight:700}.market-metrics-overlay .metric-value.warning{color:#ff9800}.market-metrics-overlay .metric-value.critical{color:#f44336}.connection-status{z-index:1000;letter-spacing:.5px;border-radius:12px;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;top:10px;right:120px}.connection-status.connected{color:#fff;background:#4caf50}.connection-status.connecting{color:#fff;background:#ff9800}.connection-status.disconnected{color:#fff;background:#f44336}.connection-status.reconnecting{color:#fff;background:#ff9800;animation:1s ease-in-out infinite pulse}@media (max-width:768px){.market-data-grid{font-size:11px}.market-grid-cell{padding:6px 8px}.market-grid-header-cell{padding:8px}}.live-market-demo{background:#fafafa;flex-direction:column;max-width:100%;height:100vh;padding:20px;display:flex}.demo-header{margin-bottom:20px}.demo-header h1{color:#1976d2;margin:0 0 8px;font-size:28px;font-weight:700}.demo-description{color:#666;margin:0;font-size:14px}.demo-controls{background:#fff;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:16px;display:flex;box-shadow:0 2px 4px #0000001a}.control-group{flex-wrap:wrap;gap:12px;display:flex}.control-btn{cursor:pointer;white-space:nowrap;background:#fff;border:2px solid #e0e0e0;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.control-btn:hover{background:#f5f9ff;border-color:#2196f3}.control-btn.active{color:#fff;background:#2196f3;border-color:#2196f3}.control-btn.paused{color:#fff;background:#ff9800;border-color:#ff9800}.connection-info{align-items:center;gap:12px;display:flex}.status-badge{letter-spacing:.5px;border-radius:16px;padding:6px 14px;font-size:11px;font-weight:700}.status-badge.connected{color:#fff;background:#4caf50}.status-badge.connecting{color:#fff;background:#ff9800}.status-badge.disconnected{color:#fff;background:#f44336}.status-badge.reconnecting{color:#fff;background:#ff9800;animation:1s ease-in-out infinite pulse-badge}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.metric-badge{color:#1976d2;background:#e3f2fd;border-radius:4px;padding:6px 12px;font-size:13px;font-weight:600}.metrics-panel{background:#000000d9;border-radius:6px;flex-wrap:wrap;gap:20px;margin-bottom:16px;padding:12px 16px;display:flex}.metric-item{align-items:center;gap:8px;display:flex}.metric-label{color:#888;font-size:13px;font-weight:500}.metric-value{color:#0f0;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;font-weight:700}.metric-value.warning{color:#ff9800}.metric-value.critical{color:#f44336}.metric-item.warning{background:#ff980033;border-radius:4px;padding:4px 12px}.grid-container{background:#fff;border-radius:8px;flex:1;min-height:600px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.grid-container.paused{border:3px solid #ff9800}.grid-container.throttled{border:3px solid #f44336}.grid-container.paused:before{content:"PAUSED";color:#fff;z-index:1000;letter-spacing:1px;background:#ff9800;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;position:absolute;top:16px;right:16px;box-shadow:0 2px 6px #0003}.grid-container.throttled:after{content:"CPU THROTTLED";color:#fff;z-index:1000;letter-spacing:1px;background:#f44336;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;animation:1s ease-in-out infinite pulse-warning;position:absolute;top:56px;right:16px;box-shadow:0 2px 6px #0003}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}.demo-footer{background:#fff;border-radius:8px;margin-top:16px;padding:16px;box-shadow:0 2px 4px #0000001a}.demo-footer p{color:#666;margin:0;font-size:13px;line-height:1.6}.demo-footer strong{color:#333}@media (max-width:1024px){.demo-controls{flex-direction:column;align-items:stretch}.connection-info,.metrics-panel{justify-content:center}}@media (max-width:768px){.live-market-demo{padding:12px}.demo-header h1{font-size:22px}.control-btn{padding:8px 16px;font-size:13px}.metrics-panel{font-size:12px}}#root{width:100%;height:100%}.btn-primary{color:#fff;cursor:pointer;background-color:#06c;border:none;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary:hover{background-color:#0052a3;box-shadow:0 2px 8px #06c3}.btn-primary:active{background-color:#003d7a;transform:translateY(1px)}.btn-secondary{color:#262626;cursor:pointer;background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-secondary:hover{background-color:#f5f5f5;border-color:#bfbfbf}.datagrid-container{background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px #00000014}.datagrid-toolbar{background-color:#fafafa;border-bottom:1px solid #efefef;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.datagrid-toolbar-title{color:#262626;font-size:14px;font-weight:600}.filter-input{border:1px solid #d9d9d9;border-radius:4px;padding:6px 12px;font-size:14px;transition:all .2s}.filter-input:focus{border-color:#06c;outline:none;box-shadow:0 0 0 3px #0066cc1a}.loading-state{color:#8c8c8c;justify-content:center;align-items:center;height:400px;font-size:14px;display:flex}@media (max-width:768px){.datagrid-toolbar{flex-direction:column;align-items:flex-start}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-
|
|
1
|
+
import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-B3Bc2jkG.js";export{e as createPreset};
|
package/dist/index.html
CHANGED
|
@@ -2,11 +2,64 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/
|
|
5
|
+
<link rel="icon" type="image/png" href="/logo.png" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
7
|
+
|
|
8
|
+
<!-- Primary Meta Tags -->
|
|
9
|
+
<title>React DataGrid - Enterprise-Grade Open Source Data Grid Component</title>
|
|
10
|
+
<meta name="title" content="React DataGrid - Enterprise-Grade Open Source Data Grid Component" />
|
|
11
|
+
<meta name="description" content="High-performance React DataGrid with 100+ features: virtual scrolling, infinite scroll, tree data, market data streaming, cell renderers, column filters, and more. Open source and production-ready." />
|
|
12
|
+
<meta name="keywords" content="react datagrid, data grid, table component, virtual scroll, infinite scroll, tree data, market data, cell renderer, column filter, react table, open source datagrid, high performance grid" />
|
|
13
|
+
<meta name="author" content="Bhushan Poojary" />
|
|
14
|
+
<meta name="robots" content="index, follow" />
|
|
15
|
+
<meta name="language" content="English" />
|
|
16
|
+
<meta name="revisit-after" content="7 days" />
|
|
17
|
+
|
|
18
|
+
<!-- Open Graph / Facebook -->
|
|
19
|
+
<meta property="og:type" content="website" />
|
|
20
|
+
<meta property="og:url" content="https://bhushanpoojary.github.io/react-open-source-datagrid/" />
|
|
21
|
+
<meta property="og:title" content="React DataGrid - Enterprise-Grade Open Source Data Grid Component" />
|
|
22
|
+
<meta property="og:description" content="High-performance React DataGrid with 100+ features: virtual scrolling, infinite scroll, tree data, market data streaming, cell renderers, column filters, and more." />
|
|
23
|
+
<meta property="og:image" content="/react-open-source-datagrid/logo.png" />
|
|
24
|
+
|
|
25
|
+
<!-- Twitter -->
|
|
26
|
+
<meta property="twitter:card" content="summary_large_image" />
|
|
27
|
+
<meta property="twitter:url" content="https://bhushanpoojary.github.io/react-open-source-datagrid/" />
|
|
28
|
+
<meta property="twitter:title" content="React DataGrid - Enterprise-Grade Open Source Data Grid Component" />
|
|
29
|
+
<meta property="twitter:description" content="High-performance React DataGrid with 100+ features: virtual scrolling, infinite scroll, tree data, market data streaming, cell renderers, column filters, and more." />
|
|
30
|
+
<meta property="twitter:image" content="/react-open-source-datagrid/logo.png" />
|
|
31
|
+
|
|
32
|
+
<!-- Canonical URL -->
|
|
33
|
+
<link rel="canonical" href="https://bhushanpoojary.github.io/react-open-source-datagrid/" />
|
|
34
|
+
|
|
35
|
+
<!-- Theme Color -->
|
|
36
|
+
<meta name="theme-color" content="#1e293b" />
|
|
37
|
+
|
|
38
|
+
<!-- GitHub Pages SPA redirect script -->
|
|
39
|
+
<script type="text/javascript">
|
|
40
|
+
// Single Page Apps for GitHub Pages
|
|
41
|
+
// MIT License
|
|
42
|
+
// https://github.com/rafgraph/spa-github-pages
|
|
43
|
+
// This script checks to see if a redirect is present in the query string,
|
|
44
|
+
// converts it back into the correct url and adds it to the
|
|
45
|
+
// browser's history using window.history.replaceState(...),
|
|
46
|
+
// which won't cause the browser to attempt to load the new url.
|
|
47
|
+
// When the single page app is loaded further down in this file,
|
|
48
|
+
// the correct url will be waiting in the browser's history for
|
|
49
|
+
// the single page app to route accordingly.
|
|
50
|
+
(function(l) {
|
|
51
|
+
if (l.search[1] === '/' ) {
|
|
52
|
+
var decoded = l.search.slice(1).split('&').map(function(s) {
|
|
53
|
+
return s.replace(/~and~/g, '&')
|
|
54
|
+
}).join('?');
|
|
55
|
+
window.history.replaceState(null, null,
|
|
56
|
+
l.pathname.slice(0, -1) + decoded + l.hash
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
}(window.location))
|
|
60
|
+
</script>
|
|
61
|
+
<script type="module" crossorigin src="/assets/index-B3Bc2jkG.js"></script>
|
|
62
|
+
<link rel="stylesheet" crossorigin href="/assets/index-DqLWhpvP.css">
|
|
10
63
|
</head>
|
|
11
64
|
<body>
|
|
12
65
|
<div id="root"></div>
|
package/dist/logo.png
ADDED
|
Binary file
|
package/dist/robots.txt
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# robots.txt for React DataGrid
|
|
2
|
+
# Allow all search engines to crawl the site
|
|
3
|
+
|
|
4
|
+
User-agent: *
|
|
5
|
+
Allow: /
|
|
6
|
+
|
|
7
|
+
# Sitemap location
|
|
8
|
+
Sitemap: https://bhushanpoojary.github.io/react-open-source-datagrid/sitemap.xml
|
|
9
|
+
|
|
10
|
+
# Crawl-delay (optional, prevents overloading server)
|
|
11
|
+
Crawl-delay: 1
|
package/dist/sitemap.xml
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
3
|
+
|
|
4
|
+
<!-- Homepage -->
|
|
5
|
+
<url>
|
|
6
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/</loc>
|
|
7
|
+
<lastmod>2025-11-25</lastmod>
|
|
8
|
+
<changefreq>weekly</changefreq>
|
|
9
|
+
<priority>1.0</priority>
|
|
10
|
+
</url>
|
|
11
|
+
|
|
12
|
+
<!-- Standard Demo -->
|
|
13
|
+
<url>
|
|
14
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/standard</loc>
|
|
15
|
+
<lastmod>2025-11-25</lastmod>
|
|
16
|
+
<changefreq>monthly</changefreq>
|
|
17
|
+
<priority>0.9</priority>
|
|
18
|
+
</url>
|
|
19
|
+
|
|
20
|
+
<!-- Virtual Scrolling -->
|
|
21
|
+
<url>
|
|
22
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/virtual-scrolling</loc>
|
|
23
|
+
<lastmod>2025-11-25</lastmod>
|
|
24
|
+
<changefreq>monthly</changefreq>
|
|
25
|
+
<priority>0.9</priority>
|
|
26
|
+
</url>
|
|
27
|
+
|
|
28
|
+
<!-- Infinite Scroll -->
|
|
29
|
+
<url>
|
|
30
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/infinite-scroll</loc>
|
|
31
|
+
<lastmod>2025-11-25</lastmod>
|
|
32
|
+
<changefreq>monthly</changefreq>
|
|
33
|
+
<priority>0.9</priority>
|
|
34
|
+
</url>
|
|
35
|
+
|
|
36
|
+
<!-- Market Data -->
|
|
37
|
+
<url>
|
|
38
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/market-data</loc>
|
|
39
|
+
<lastmod>2025-11-25</lastmod>
|
|
40
|
+
<changefreq>monthly</changefreq>
|
|
41
|
+
<priority>0.9</priority>
|
|
42
|
+
</url>
|
|
43
|
+
|
|
44
|
+
<!-- Tree Data -->
|
|
45
|
+
<url>
|
|
46
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/tree-data</loc>
|
|
47
|
+
<lastmod>2025-11-25</lastmod>
|
|
48
|
+
<changefreq>monthly</changefreq>
|
|
49
|
+
<priority>0.8</priority>
|
|
50
|
+
</url>
|
|
51
|
+
|
|
52
|
+
<!-- Cell Renderers -->
|
|
53
|
+
<url>
|
|
54
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/cell-renderers</loc>
|
|
55
|
+
<lastmod>2025-11-25</lastmod>
|
|
56
|
+
<changefreq>monthly</changefreq>
|
|
57
|
+
<priority>0.8</priority>
|
|
58
|
+
</url>
|
|
59
|
+
|
|
60
|
+
<!-- Column Filters -->
|
|
61
|
+
<url>
|
|
62
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/column-filters</loc>
|
|
63
|
+
<lastmod>2025-11-25</lastmod>
|
|
64
|
+
<changefreq>monthly</changefreq>
|
|
65
|
+
<priority>0.8</priority>
|
|
66
|
+
</url>
|
|
67
|
+
|
|
68
|
+
<!-- Faceted Search -->
|
|
69
|
+
<url>
|
|
70
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/faceted-search</loc>
|
|
71
|
+
<lastmod>2025-11-25</lastmod>
|
|
72
|
+
<changefreq>monthly</changefreq>
|
|
73
|
+
<priority>0.8</priority>
|
|
74
|
+
</url>
|
|
75
|
+
|
|
76
|
+
<!-- Layout Persistence -->
|
|
77
|
+
<url>
|
|
78
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/layout-persistence</loc>
|
|
79
|
+
<lastmod>2025-11-25</lastmod>
|
|
80
|
+
<changefreq>monthly</changefreq>
|
|
81
|
+
<priority>0.7</priority>
|
|
82
|
+
</url>
|
|
83
|
+
|
|
84
|
+
<!-- Themes -->
|
|
85
|
+
<url>
|
|
86
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/themes</loc>
|
|
87
|
+
<lastmod>2025-11-25</lastmod>
|
|
88
|
+
<changefreq>monthly</changefreq>
|
|
89
|
+
<priority>0.7</priority>
|
|
90
|
+
</url>
|
|
91
|
+
|
|
92
|
+
<!-- Density Mode -->
|
|
93
|
+
<url>
|
|
94
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/density-mode</loc>
|
|
95
|
+
<lastmod>2025-11-25</lastmod>
|
|
96
|
+
<changefreq>monthly</changefreq>
|
|
97
|
+
<priority>0.7</priority>
|
|
98
|
+
</url>
|
|
99
|
+
|
|
100
|
+
<!-- Row Dragging -->
|
|
101
|
+
<url>
|
|
102
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/row-dragging</loc>
|
|
103
|
+
<lastmod>2025-11-25</lastmod>
|
|
104
|
+
<changefreq>monthly</changefreq>
|
|
105
|
+
<priority>0.7</priority>
|
|
106
|
+
</url>
|
|
107
|
+
|
|
108
|
+
<!-- Row Pinning -->
|
|
109
|
+
<url>
|
|
110
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/row-pinning</loc>
|
|
111
|
+
<lastmod>2025-11-25</lastmod>
|
|
112
|
+
<changefreq>monthly</changefreq>
|
|
113
|
+
<priority>0.7</priority>
|
|
114
|
+
</url>
|
|
115
|
+
|
|
116
|
+
<!-- Accessibility -->
|
|
117
|
+
<url>
|
|
118
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/accessibility</loc>
|
|
119
|
+
<lastmod>2025-11-25</lastmod>
|
|
120
|
+
<changefreq>monthly</changefreq>
|
|
121
|
+
<priority>0.7</priority>
|
|
122
|
+
</url>
|
|
123
|
+
|
|
124
|
+
<!-- Context Menu -->
|
|
125
|
+
<url>
|
|
126
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/context-menu</loc>
|
|
127
|
+
<lastmod>2025-11-25</lastmod>
|
|
128
|
+
<changefreq>monthly</changefreq>
|
|
129
|
+
<priority>0.7</priority>
|
|
130
|
+
</url>
|
|
131
|
+
|
|
132
|
+
<!-- Tooltip -->
|
|
133
|
+
<url>
|
|
134
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/tooltip</loc>
|
|
135
|
+
<lastmod>2025-11-25</lastmod>
|
|
136
|
+
<changefreq>monthly</changefreq>
|
|
137
|
+
<priority>0.7</priority>
|
|
138
|
+
</url>
|
|
139
|
+
|
|
140
|
+
<!-- Feature Gallery -->
|
|
141
|
+
<url>
|
|
142
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/feature-gallery</loc>
|
|
143
|
+
<lastmod>2025-11-25</lastmod>
|
|
144
|
+
<changefreq>monthly</changefreq>
|
|
145
|
+
<priority>0.8</priority>
|
|
146
|
+
</url>
|
|
147
|
+
|
|
148
|
+
<!-- Benchmark -->
|
|
149
|
+
<url>
|
|
150
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/demo/benchmark</loc>
|
|
151
|
+
<lastmod>2025-11-25</lastmod>
|
|
152
|
+
<changefreq>monthly</changefreq>
|
|
153
|
+
<priority>0.6</priority>
|
|
154
|
+
</url>
|
|
155
|
+
|
|
156
|
+
<!-- API Reference -->
|
|
157
|
+
<url>
|
|
158
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/api/reference</loc>
|
|
159
|
+
<lastmod>2025-11-25</lastmod>
|
|
160
|
+
<changefreq>weekly</changefreq>
|
|
161
|
+
<priority>0.9</priority>
|
|
162
|
+
</url>
|
|
163
|
+
|
|
164
|
+
<!-- API Demo -->
|
|
165
|
+
<url>
|
|
166
|
+
<loc>https://bhushanpoojary.github.io/react-open-source-datagrid/api/demo</loc>
|
|
167
|
+
<lastmod>2025-11-25</lastmod>
|
|
168
|
+
<changefreq>weekly</changefreq>
|
|
169
|
+
<priority>0.8</priority>
|
|
170
|
+
</url>
|
|
171
|
+
|
|
172
|
+
</urlset>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-open-source-grid",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0
|
|
4
|
+
"version": "1.1.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, and more",
|
|
7
7
|
"main": "./dist/assets/index.js",
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
"exceljs": "^4.4.0",
|
|
56
56
|
"react": "^19.2.0",
|
|
57
57
|
"react-dom": "^19.2.0",
|
|
58
|
+
"react-router-dom": "^7.9.6",
|
|
58
59
|
"react-syntax-highlighter": "^16.1.0"
|
|
59
60
|
},
|
|
60
61
|
"devDependencies": {
|
|
@@ -63,6 +64,7 @@
|
|
|
63
64
|
"@types/node": "^24.10.1",
|
|
64
65
|
"@types/react": "^19.2.5",
|
|
65
66
|
"@types/react-dom": "^19.2.3",
|
|
67
|
+
"@types/react-router-dom": "^5.3.3",
|
|
66
68
|
"@vitejs/plugin-react": "^5.1.1",
|
|
67
69
|
"cypress": "^13.16.1",
|
|
68
70
|
"eslint": "^9.39.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fafafa;margin:0;padding:0;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.6}input,button,textarea,select{font-family:inherit;font-size:inherit}button{cursor:pointer;background:0 0;border:none;margin:0;padding:0}@tailwind base;@tailwind components;@tailwind utilities;:root{--color-primary:#06c;--color-primary-light:#e8f0ff;--color-primary-dark:#004ca3;--color-neutral-dark:#1a1a1a;--color-neutral-light:#f5f5f5;--color-border:#d9d9d9;--color-border-light:#efefef;--color-bg-hover:#f0f0f0;--color-text-primary:#262626;--color-text-secondary:#666;--grid-border:#e5e7eb;--grid-border-width:1px;--grid-border-radius:6px;--grid-bg:#fff;--grid-bg-alt:#f9fafb;--grid-header-bg:#f3f4f6;--grid-footer-bg:#f9fafb;--grid-text:#111827;--grid-text-secondary:#6b7280;--grid-text-muted:#9ca3af;--grid-header-text:#374151;--grid-primary:#3b82f6;--grid-selected:#3b82f614;--grid-hover:#f9fafb;--grid-active:#eff6ff;--grid-cell-padding:10px 12px;--grid-header-padding:10px 12px;--grid-font-size:13px;--grid-font-size-sm:12px;--grid-header-font-weight:600;--grid-shadow-light:0 1px 3px 0 #00000014;--grid-text-inverse:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.virtual-scroller-container{scrollbar-width:thin;scrollbar-color:#c1c1c1 #f1f1f1}.virtual-scroller-container::-webkit-scrollbar{-webkit-appearance:none;width:12px;height:12px}.virtual-scroller-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0}.virtual-scroller-container::-webkit-scrollbar-thumb{background:#c1c1c1;border:2px solid #f1f1f1;border-radius:6px}.virtual-scroller-container::-webkit-scrollbar-thumb:hover{background:#a1a1a1}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.context-menu{background:var(--context-menu-bg,#fff);border:1px solid var(--context-menu-border,#d0d0d0);z-index:10000;min-width:200px;max-width:320px;color:var(--context-menu-text,#333);-webkit-user-select:none;user-select:none;border-radius:6px;padding:4px 0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5;animation:.12s ease-out contextMenuFadeIn;position:fixed;box-shadow:0 4px 16px #00000026}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{cursor:pointer;align-items:center;gap:8px;padding:8px 12px;transition:background-color .1s;display:flex;position:relative}.context-menu-item:hover:not(.disabled){background-color:var(--context-menu-hover-bg,#f0f0f0)}.context-menu-item:active:not(.disabled){background-color:var(--context-menu-active-bg,#e5e5e5)}.context-menu-item.disabled{opacity:.4;cursor:not-allowed}.context-menu-item.danger{color:var(--context-menu-danger,#dc3545)}.context-menu-item.danger:hover:not(.disabled){background-color:var(--context-menu-danger-hover-bg,#fff0f0)}.context-menu-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;font-size:16px;display:flex}.context-menu-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.context-menu-shortcut{color:var(--context-menu-shortcut,#888);margin-left:auto;padding-left:16px;font-size:12px}.context-menu-arrow{color:var(--context-menu-arrow,#888);margin-left:auto;font-size:10px}.context-menu-separator{background-color:var(--context-menu-separator,#e0e0e0);height:1px;margin:4px 0}@media (prefers-color-scheme:dark){.context-menu{--context-menu-bg:#2a2a2a;--context-menu-border:#404040;--context-menu-text:#e0e0e0;--context-menu-hover-bg:#3a3a3a;--context-menu-active-bg:#4a4a4a;--context-menu-separator:#404040;--context-menu-shortcut:#999;--context-menu-arrow:#999;--context-menu-danger:#ff6b6b;--context-menu-danger-hover-bg:#3a2a2a}}.data-grid.theme-quartz .context-menu{--context-menu-bg:#fff;--context-menu-border:#c5c5c5;--context-menu-text:#000;--context-menu-hover-bg:#e6f2ff;--context-menu-active-bg:#cce5ff}.data-grid.theme-alpine .context-menu{--context-menu-bg:#f8f9fa;--context-menu-border:#dee2e6;--context-menu-text:#212529;--context-menu-hover-bg:#e9ecef;--context-menu-active-bg:#dee2e6}.data-grid.theme-balham .context-menu{--context-menu-bg:#fff;--context-menu-border:#bdc3c7;--context-menu-text:#2c3e50;--context-menu-hover-bg:#ecf0f1;--context-menu-active-bg:#d5dbdb}.data-grid.theme-material .context-menu{--context-menu-bg:#fff;--context-menu-border:#e0e0e0;--context-menu-text:#212121;--context-menu-hover-bg:#f5f5f5;--context-menu-active-bg:#eee;border-radius:4px;box-shadow:0 2px 4px #0003}.context-menu-item:focus{outline:2px solid var(--context-menu-focus,#06c);outline-offset:-2px}.context-menu-item:focus:not(:focus-visible){outline:none}.market-data-grid{background:#fff;border:1px solid #e0e0e0;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:13px;overflow:auto}.market-grid-header{z-index:10;background:#f5f5f5;border-bottom:2px solid #d0d0d0;position:sticky;top:0}.market-grid-header-row{min-width:100%;display:flex}.market-grid-header-cell{color:#333;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;border-right:1px solid #e0e0e0;padding:10px 12px;font-weight:600;overflow:hidden}.market-grid-header-cell:last-child{border-right:none}.market-grid-body{min-width:100%}.market-grid-row{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .1s;display:flex}.market-grid-row:hover{background-color:#f9f9f9}.market-grid-row:active{background-color:#f0f0f0}.market-grid-cell{white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #f5f5f5;align-items:center;padding:8px 12px;display:flex;position:relative;overflow:hidden}.market-grid-cell:last-child{border-right:none}.numeric-cell{font-variant-numeric:tabular-nums;justify-content:flex-end;font-family:Monaco,Menlo,Consolas,monospace}@keyframes flashUp{0%{background-color:#4caf5000}20%{background-color:#4caf5066}to{background-color:#4caf5000}}@keyframes flashDown{0%{background-color:#f4433600}20%{background-color:#f4433666}to{background-color:#f4433600}}.cell-flash-up{animation:.5s ease-out flashUp}.cell-flash-down{animation:.5s ease-out flashDown}.change-positive{color:#4caf50;font-weight:600}.change-negative{color:#f44336;font-weight:600}.market-grid-cell[data-field=bid]{color:#2196f3;font-weight:500}.market-grid-cell[data-field=ask]{color:#ff5722;font-weight:500}.market-grid-cell[data-field=price]{font-size:14px;font-weight:700}.market-grid-cell[data-field=volume],.market-grid-cell[data-field=size]{color:#666;font-size:12px}.market-grid-cell[data-field=symbol],.market-grid-cell[data-field=id]{color:#1976d2;font-family:Monaco,Menlo,Consolas,monospace;font-weight:700}.density-compact .market-grid-header-cell{padding:6px 8px;font-size:12px}.density-compact .market-grid-cell{padding:4px 8px;font-size:12px}.density-compact .market-grid-cell[data-field=price]{font-size:13px}.density-compact .market-grid-row{min-height:28px}.market-grid-cell[data-field=high]{color:#4caf50}.market-grid-cell[data-field=low]{color:#f44336}.market-data-grid.loading{opacity:.6;pointer-events:none}.market-data-grid.loading:after{content:"";border:4px solid #f3f3f3;border-top-color:#2196f3;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.market-data-grid.paused{border:2px solid #ff9800}.market-data-grid.paused:before{content:"PAUSED";color:#fff;z-index:1000;letter-spacing:1px;background:#ff9800;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:700;position:absolute;top:10px;right:10px}.market-data-grid.throttled{border:2px solid #f44336}.market-data-grid.throttled:before{content:"THROTTLED";color:#fff;z-index:1000;letter-spacing:1px;background:#f44336;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:700;position:absolute;top:10px;right:10px}.market-data-grid::-webkit-scrollbar{width:12px;height:12px}.market-data-grid::-webkit-scrollbar-track{background:#f5f5f5}.market-data-grid::-webkit-scrollbar-thumb{background:#ccc;border-radius:6px}.market-data-grid::-webkit-scrollbar-thumb:hover{background:#999}.market-data-wrapper{width:100%;height:100%;position:relative}.market-metrics-overlay{color:#0f0;z-index:1000;pointer-events:none;background:#000000bf;border-radius:4px;padding:8px 12px;font-family:Monaco,Menlo,Consolas,monospace;font-size:11px;line-height:1.6;position:absolute;top:10px;left:10px}.market-metrics-overlay .metric{justify-content:space-between;gap:12px;display:flex}.market-metrics-overlay .metric-label{color:#888}.market-metrics-overlay .metric-value{color:#0f0;font-weight:700}.market-metrics-overlay .metric-value.warning{color:#ff9800}.market-metrics-overlay .metric-value.critical{color:#f44336}.connection-status{z-index:1000;letter-spacing:.5px;border-radius:12px;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;top:10px;right:120px}.connection-status.connected{color:#fff;background:#4caf50}.connection-status.connecting{color:#fff;background:#ff9800}.connection-status.disconnected{color:#fff;background:#f44336}.connection-status.reconnecting{color:#fff;background:#ff9800;animation:1s ease-in-out infinite pulse}@media (max-width:768px){.market-data-grid{font-size:11px}.market-grid-cell{padding:6px 8px}.market-grid-header-cell{padding:8px}}.live-market-demo{background:#fafafa;flex-direction:column;max-width:100%;height:100vh;padding:20px;display:flex}.demo-header{margin-bottom:20px}.demo-header h1{color:#1976d2;margin:0 0 8px;font-size:28px;font-weight:700}.demo-description{color:#666;margin:0;font-size:14px}.demo-controls{background:#fff;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:16px;display:flex;box-shadow:0 2px 4px #0000001a}.control-group{flex-wrap:wrap;gap:12px;display:flex}.control-btn{cursor:pointer;white-space:nowrap;background:#fff;border:2px solid #e0e0e0;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.control-btn:hover{background:#f5f9ff;border-color:#2196f3}.control-btn.active{color:#fff;background:#2196f3;border-color:#2196f3}.control-btn.paused{color:#fff;background:#ff9800;border-color:#ff9800}.connection-info{align-items:center;gap:12px;display:flex}.status-badge{letter-spacing:.5px;border-radius:16px;padding:6px 14px;font-size:11px;font-weight:700}.status-badge.connected{color:#fff;background:#4caf50}.status-badge.connecting{color:#fff;background:#ff9800}.status-badge.disconnected{color:#fff;background:#f44336}.status-badge.reconnecting{color:#fff;background:#ff9800;animation:1s ease-in-out infinite pulse-badge}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.metric-badge{color:#1976d2;background:#e3f2fd;border-radius:4px;padding:6px 12px;font-size:13px;font-weight:600}.metrics-panel{background:#000000d9;border-radius:6px;flex-wrap:wrap;gap:20px;margin-bottom:16px;padding:12px 16px;display:flex}.metric-item{align-items:center;gap:8px;display:flex}.metric-label{color:#888;font-size:13px;font-weight:500}.metric-value{color:#0f0;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;font-weight:700}.metric-value.warning{color:#ff9800}.metric-value.critical{color:#f44336}.metric-item.warning{background:#ff980033;border-radius:4px;padding:4px 12px}.grid-container{background:#fff;border-radius:8px;flex:1;min-height:600px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.grid-container.paused{border:3px solid #ff9800}.grid-container.throttled{border:3px solid #f44336}.grid-container.paused:before{content:"PAUSED";color:#fff;z-index:1000;letter-spacing:1px;background:#ff9800;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;position:absolute;top:16px;right:16px;box-shadow:0 2px 6px #0003}.grid-container.throttled:after{content:"CPU THROTTLED";color:#fff;z-index:1000;letter-spacing:1px;background:#f44336;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;animation:1s ease-in-out infinite pulse-warning;position:absolute;top:56px;right:16px;box-shadow:0 2px 6px #0003}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}.demo-footer{background:#fff;border-radius:8px;margin-top:16px;padding:16px;box-shadow:0 2px 4px #0000001a}.demo-footer p{color:#666;margin:0;font-size:13px;line-height:1.6}.demo-footer strong{color:#333}@media (max-width:1024px){.demo-controls{flex-direction:column;align-items:stretch}.connection-info,.metrics-panel{justify-content:center}}@media (max-width:768px){.live-market-demo{padding:12px}.demo-header h1{font-size:22px}.control-btn{padding:8px 16px;font-size:13px}.metrics-panel{font-size:12px}}#root{width:100%;height:100%}.btn-primary{color:#fff;cursor:pointer;background-color:#06c;border:none;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary:hover{background-color:#0052a3;box-shadow:0 2px 8px #06c3}.btn-primary:active{background-color:#003d7a;transform:translateY(1px)}.btn-secondary{color:#262626;cursor:pointer;background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-secondary:hover{background-color:#f5f5f5;border-color:#bfbfbf}.datagrid-container{background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px #00000014}.datagrid-toolbar{background-color:#fafafa;border-bottom:1px solid #efefef;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.datagrid-toolbar-title{color:#262626;font-size:14px;font-weight:600}.filter-input{border:1px solid #d9d9d9;border-radius:4px;padding:6px 12px;font-size:14px;transition:all .2s}.filter-input:focus{border-color:#06c;outline:none;box-shadow:0 0 0 3px #0066cc1a}.loading-state{color:#8c8c8c;justify-content:center;align-items:center;height:400px;font-size:14px;display:flex}@media (max-width:768px){.datagrid-toolbar{flex-direction:column;align-items:flex-start}}
|