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
package/README.md
CHANGED
|
@@ -23,6 +23,8 @@ A fully-featured, reusable DataGrid component built with React, TypeScript, and
|
|
|
23
23
|
- ✅ **Infinite Scrolling with Server-Side DataSource** (100M+ rows with server-side filtering, sorting, and caching)
|
|
24
24
|
- ✅ **Accessibility (A11y)** (WCAG 2.1 AA compliant with full keyboard navigation, ARIA support, and screen reader compatibility)
|
|
25
25
|
- ✅ **Context Menu** (right-click menu with copy, export, pin/unpin, auto-size, hide, filter by value, and custom actions)
|
|
26
|
+
- ✅ **Density Modes** (Ultra Compact/Compact/Normal/Comfortable spacing with segmented control and persistent preferences)
|
|
27
|
+
- ✅ **10 Beautiful Themes** (Quartz, Alpine, Material, Dark Mode, Nord, Dracula, Solarized Light/Dark, Monokai, One Dark) 🆕
|
|
26
28
|
|
|
27
29
|
## Quick Start
|
|
28
30
|
|
|
@@ -73,8 +75,13 @@ const rows: Row[] = [
|
|
|
73
75
|
- **Layout Persistence**: See [LAYOUT_PERSISTENCE_INDEX.md](./LAYOUT_PERSISTENCE_INDEX.md)
|
|
74
76
|
- **Layout Persistence Feature Guide**: See [LAYOUT_PERSISTENCE_FEATURE.md](./LAYOUT_PERSISTENCE_FEATURE.md)
|
|
75
77
|
- **Layout Persistence Quick Reference**: See [LAYOUT_PERSISTENCE_QUICK_REF.md](./LAYOUT_PERSISTENCE_QUICK_REF.md)
|
|
76
|
-
- **Context Menu**: See [CONTEXT_MENU_FEATURE.md](./CONTEXT_MENU_FEATURE.md)
|
|
78
|
+
- **Context Menu**: See [CONTEXT_MENU_FEATURE.md](./CONTEXT_MENU_FEATURE.md)
|
|
77
79
|
- **Context Menu Quick Reference**: See [CONTEXT_MENU_QUICK_REF.md](./CONTEXT_MENU_QUICK_REF.md)
|
|
80
|
+
- **Density Modes**: See [DENSITY_MODE_INDEX.md](./DENSITY_MODE_INDEX.md)
|
|
81
|
+
- **Density Mode Quick Reference**: See [DENSITY_MODE_QUICK_REF.md](./DENSITY_MODE_QUICK_REF.md)
|
|
82
|
+
- **Theme System**: See [THEME_SYSTEM.md](./THEME_SYSTEM.md) 🆕
|
|
83
|
+
- **Themes Overview**: See [THEMES_OVERVIEW.md](./THEMES_OVERVIEW.md) 🆕
|
|
84
|
+
- **Theme Integration**: See [THEME_INTEGRATION_MIGRATION.md](./THEME_INTEGRATION_MIGRATION.md) - Migration guide
|
|
78
85
|
|
|
79
86
|
## Technology Stack
|
|
80
87
|
|
|
@@ -256,3 +263,54 @@ Response:
|
|
|
256
263
|
- [INFINITE_SCROLLING_INDEX.md](./INFINITE_SCROLLING_INDEX.md) - Documentation index
|
|
257
264
|
- [INFINITE_SCROLLING_FEATURE.md](./INFINITE_SCROLLING_FEATURE.md) - Complete guide
|
|
258
265
|
- [INFINITE_SCROLLING_QUICK_REF.md](./INFINITE_SCROLLING_QUICK_REF.md) - Quick reference
|
|
266
|
+
|
|
267
|
+
## Themes
|
|
268
|
+
|
|
269
|
+
Choose from **10 beautiful pre-built themes** to match your application's design:
|
|
270
|
+
|
|
271
|
+
```tsx
|
|
272
|
+
import { DataGrid, ThemeSelector } from './components/DataGrid';
|
|
273
|
+
import type { ThemeName } from './components/DataGrid/themes';
|
|
274
|
+
|
|
275
|
+
function App() {
|
|
276
|
+
const [theme, setTheme] = useState<ThemeName>('quartz');
|
|
277
|
+
|
|
278
|
+
return (
|
|
279
|
+
<>
|
|
280
|
+
<ThemeSelector currentTheme={theme} onThemeChange={setTheme} />
|
|
281
|
+
<DataGrid
|
|
282
|
+
columns={columns}
|
|
283
|
+
rows={rows}
|
|
284
|
+
theme={theme}
|
|
285
|
+
/>
|
|
286
|
+
</>
|
|
287
|
+
);
|
|
288
|
+
}
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
**Available Themes:**
|
|
292
|
+
|
|
293
|
+
**Light Themes:**
|
|
294
|
+
- `quartz` - Modern white with clean aesthetics
|
|
295
|
+
- `alpine` - Classic business professional
|
|
296
|
+
- `material` - Material Design inspired
|
|
297
|
+
- `nord` - Arctic-inspired minimalist
|
|
298
|
+
- `solarized-light` - Precision colors for readability
|
|
299
|
+
|
|
300
|
+
**Dark Themes:**
|
|
301
|
+
- `dark` - VS Code inspired dark mode
|
|
302
|
+
- `dracula` - Popular purple-tinted theme
|
|
303
|
+
- `solarized-dark` - Dark variant of Solarized
|
|
304
|
+
- `monokai` - Vibrant Sublime-style colors
|
|
305
|
+
- `one-dark` - Atom editor's iconic theme
|
|
306
|
+
|
|
307
|
+
**Features:**
|
|
308
|
+
- Instant theme switching with CSS variables
|
|
309
|
+
- Comprehensive color palettes
|
|
310
|
+
- Consistent spacing and typography
|
|
311
|
+
- Custom shadows and borders per theme
|
|
312
|
+
- Easy theme customization
|
|
313
|
+
|
|
314
|
+
**See also:**
|
|
315
|
+
- [THEME_SYSTEM.md](./THEME_SYSTEM.md) - Complete theme documentation
|
|
316
|
+
- [THEMES_OVERVIEW.md](./THEMES_OVERVIEW.md) - Visual comparison of all themes
|
package/dist/404.html
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
~<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>React DataGrid</title>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
// Single Page Apps for GitHub Pages
|
|
8
|
+
// MIT License
|
|
9
|
+
// https://github.com/rafgraph/spa-github-pages
|
|
10
|
+
// This script takes the current url and converts the path and query
|
|
11
|
+
// string into just a query string, and then redirects the browser
|
|
12
|
+
// to the new url with only a query string and hash fragment,
|
|
13
|
+
// e.g., https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
|
|
14
|
+
// https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
|
|
15
|
+
// Note: this 404.html file must be at least 512 bytes for it to work
|
|
16
|
+
// with Internet Explorer (it is currently > 512 bytes)
|
|
17
|
+
|
|
18
|
+
// If you're creating a Project Pages site and NOT using a custom domain,
|
|
19
|
+
// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
|
|
20
|
+
// This way the code will only replace the route part of the path, and not
|
|
21
|
+
// the real directory in which the app resides, for example:
|
|
22
|
+
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
|
|
23
|
+
// https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
|
|
24
|
+
// Otherwise, leave pathSegmentsToKeep as 0.
|
|
25
|
+
var pathSegmentsToKeep = 1;
|
|
26
|
+
|
|
27
|
+
var l = window.location;
|
|
28
|
+
l.replace(
|
|
29
|
+
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
|
|
30
|
+
l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
|
|
31
|
+
l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
|
|
32
|
+
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
|
|
33
|
+
l.hash
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
</script>
|
|
37
|
+
</head>
|
|
38
|
+
<body>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|