photon-grid-react 1.0.0 → 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/README.md +180 -60
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,75 +1,195 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Photon Grid for React
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img src="https://raw.githubusercontent.com/abdulwahid-csit/photon-grid/main/assets/logo.svg" alt="Photon Grid — React Data Grid" width="180"/>
|
|
5
|
+
</p>
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
<p align="center">
|
|
8
|
+
<strong>A high-performance, enterprise-grade React data grid built on the zero-dependency Photon Grid engine.</strong>
|
|
9
|
+
</p>
|
|
6
10
|
|
|
7
|
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|
11
|
+
<p align="center">
|
|
9
12
|
|
|
10
|
-
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
11
17
|
|
|
12
|
-
|
|
18
|
+
</p>
|
|
13
19
|
|
|
14
|
-
|
|
20
|
+
---
|
|
15
21
|
|
|
16
|
-
|
|
22
|
+
## Overview
|
|
17
23
|
|
|
18
|
-
|
|
19
|
-
export default defineConfig([
|
|
20
|
-
globalIgnores(['dist']),
|
|
21
|
-
{
|
|
22
|
-
files: ['**/*.{ts,tsx}'],
|
|
23
|
-
extends: [
|
|
24
|
-
// Other configs...
|
|
24
|
+
**Photon Grid for React** (`photon-grid-react`) is the official React wrapper for [Photon Grid Core](https://www.npmjs.com/package/photon-grid-core) — an extremely fast, framework-agnostic TypeScript data grid.
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
tseslint.configs.recommendedTypeChecked,
|
|
28
|
-
// Alternatively, use this for stricter rules
|
|
29
|
-
tseslint.configs.strictTypeChecked,
|
|
30
|
-
// Optionally, add this for stylistic rules
|
|
31
|
-
tseslint.configs.stylisticTypeChecked,
|
|
26
|
+
It exposes a single `<PhotonGrid />` component that binds React props and callbacks to the core engine, giving you virtual scrolling, sorting, filtering, grouping, editing, and custom React cell renderers with **zero framework lock-in**.
|
|
32
27
|
|
|
33
|
-
|
|
34
|
-
],
|
|
35
|
-
languageOptions: {
|
|
36
|
-
parserOptions: {
|
|
37
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
38
|
-
tsconfigRootDir: import.meta.dirname,
|
|
39
|
-
},
|
|
40
|
-
// other options...
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
])
|
|
28
|
+
A modern, lightweight alternative to AG Grid, react-data-grid, TanStack Table, and Handsontable for React applications.
|
|
44
29
|
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Features
|
|
33
|
+
|
|
34
|
+
- Single declarative React component (`<PhotonGrid />`)
|
|
35
|
+
- Custom React component cell renderers
|
|
36
|
+
- Fully typed props and event callbacks
|
|
37
|
+
- Zero runtime dependencies in the core engine
|
|
38
|
+
- Virtual scrolling and virtual columns
|
|
39
|
+
- Millions of rows support
|
|
40
|
+
- Column pinning, resizing, moving, and auto-size
|
|
41
|
+
- Cell selection and range selection
|
|
42
|
+
- Clipboard support (copy / paste)
|
|
43
|
+
- Keyboard and mouse navigation
|
|
44
|
+
- Tree data and row grouping
|
|
45
|
+
- Sorting and multi-column sorting
|
|
46
|
+
- Filtering and quick filtering
|
|
47
|
+
- Custom cell and header renderers
|
|
48
|
+
- Context menu and custom context menus
|
|
49
|
+
- Pagination, status bar, and tool panels
|
|
50
|
+
- Theme support (light, dark, custom)
|
|
51
|
+
- Event-driven, API-driven architecture
|
|
52
|
+
- High-FPS, memory-efficient rendering
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Installation
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
npm install photon-grid-react photon-grid-core
|
|
45
60
|
```
|
|
46
61
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
```js
|
|
50
|
-
// eslint.config.js
|
|
51
|
-
import reactX from 'eslint-plugin-react-x'
|
|
52
|
-
import reactDom from 'eslint-plugin-react-dom'
|
|
53
|
-
|
|
54
|
-
export default defineConfig([
|
|
55
|
-
globalIgnores(['dist']),
|
|
56
|
-
{
|
|
57
|
-
files: ['**/*.{ts,tsx}'],
|
|
58
|
-
extends: [
|
|
59
|
-
// Other configs...
|
|
60
|
-
// Enable lint rules for React
|
|
61
|
-
reactX.configs['recommended-typescript'],
|
|
62
|
-
// Enable lint rules for React DOM
|
|
63
|
-
reactDom.configs.recommended,
|
|
64
|
-
],
|
|
65
|
-
languageOptions: {
|
|
66
|
-
parserOptions: {
|
|
67
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
68
|
-
tsconfigRootDir: import.meta.dirname,
|
|
69
|
-
},
|
|
70
|
-
// other options...
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
])
|
|
62
|
+
or
|
|
74
63
|
|
|
64
|
+
```bash
|
|
65
|
+
yarn add photon-grid-react photon-grid-core
|
|
75
66
|
```
|
|
67
|
+
|
|
68
|
+
or
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
pnpm add photon-grid-react photon-grid-core
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
`react`, `react-dom` (>= 18) are peer dependencies. `photon-grid-core` is a dependency and is installed automatically.
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## Basic Usage
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { PhotonGrid } from 'photon-grid-react';
|
|
82
|
+
import type { PhotonGridColumnDef } from 'photon-grid-react';
|
|
83
|
+
import type { GridApi } from 'photon-grid-core';
|
|
84
|
+
|
|
85
|
+
const columns: PhotonGridColumnDef[] = [
|
|
86
|
+
{ colId: 'name', field: 'name', header: 'Name', type: 'string' },
|
|
87
|
+
{ colId: 'age', field: 'age', header: 'Age', type: 'number' },
|
|
88
|
+
];
|
|
89
|
+
|
|
90
|
+
const rows = [
|
|
91
|
+
{ name: 'Ada', age: 36 },
|
|
92
|
+
{ name: 'Alan', age: 41 },
|
|
93
|
+
];
|
|
94
|
+
|
|
95
|
+
export function App() {
|
|
96
|
+
const onReady = (api: GridApi) => {
|
|
97
|
+
console.log('visible rows:', api.getVisibleRows().length);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
return (
|
|
101
|
+
<PhotonGrid
|
|
102
|
+
columns={columns}
|
|
103
|
+
dataSet={rows}
|
|
104
|
+
options={{ theme: 'light' }}
|
|
105
|
+
onGridReady={onReady}
|
|
106
|
+
onRowClicked={(e) => console.log(e)}
|
|
107
|
+
/>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
> **Styling** is injected automatically by the core engine — no CSS import is required.
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Props
|
|
117
|
+
|
|
118
|
+
| Prop | Type | Description |
|
|
119
|
+
| --------- | --------------------------- | ------------------------------------------------------ |
|
|
120
|
+
| `columns` | `PhotonGridColumnDef[]` | Column definitions. Renderer slots accept React components in addition to plain functions. |
|
|
121
|
+
| `dataSet` | `Record<string, unknown>[]` | Row data. |
|
|
122
|
+
| `options` | `Partial<GridOptions>` | Theme, selection, editing, pagination, and feature flags. |
|
|
123
|
+
|
|
124
|
+
### Event callbacks
|
|
125
|
+
|
|
126
|
+
`onGridReady`, `onDataChanged`, `onRowClicked`, `onRowDoubleClicked`, `onRowSelected`,
|
|
127
|
+
`onCellClicked`, `onCellDoubleClicked`, `onCellValueChanged`, `onCellSelectionChanged`,
|
|
128
|
+
`onColumnResized`, `onColumnMoved`, `onSortChanged`, `onFilterChanged`, `onPageChanged`,
|
|
129
|
+
`onColumnsStateChanged`, `onThemeChanged`, `onExportComplete`.
|
|
130
|
+
|
|
131
|
+
`onGridReady` receives the `GridApi`, giving you full programmatic control over the grid.
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## Why Photon Grid?
|
|
136
|
+
|
|
137
|
+
- Declarative, idiomatic React API
|
|
138
|
+
- Fast, virtualized rendering for millions of rows
|
|
139
|
+
- Framework-independent core — share grid logic across React, Angular, and Vue
|
|
140
|
+
- Modular, extensible, plugin-friendly architecture
|
|
141
|
+
- Enterprise capabilities with a simple, predictable API
|
|
142
|
+
- Fully typed with built-in declaration files
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## Browser Support
|
|
147
|
+
|
|
148
|
+
Supports all modern browsers: Chrome, Edge, Firefox, and Safari.
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
## TypeScript
|
|
153
|
+
|
|
154
|
+
`photon-grid-react` is written in TypeScript and ships with built-in declaration files. No additional typings are required.
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Ecosystem
|
|
159
|
+
|
|
160
|
+
| Package | Description |
|
|
161
|
+
| ------- | ----------- |
|
|
162
|
+
| [`photon-grid-core`](https://www.npmjs.com/package/photon-grid-core) | Framework-agnostic engine |
|
|
163
|
+
| [`photon-grid-react`](https://www.npmjs.com/package/photon-grid-react) | React wrapper (this package) |
|
|
164
|
+
| [`photon-grid-angular`](https://www.npmjs.com/package/photon-grid-angular) | Angular wrapper |
|
|
165
|
+
| [`photon-grid-vue`](https://www.npmjs.com/package/photon-grid-vue) | Vue 3 wrapper |
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Contributing
|
|
170
|
+
|
|
171
|
+
Contributions are welcome. Please submit issues, feature requests, or pull requests through GitHub.
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
175
|
+
## License
|
|
176
|
+
|
|
177
|
+
MIT License
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## Author
|
|
182
|
+
|
|
183
|
+
**Abdul Wahid**
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## Links
|
|
188
|
+
|
|
189
|
+
- **GitHub** — https://github.com/abdulwahid-csit/photon-grid
|
|
190
|
+
- **Issues** — https://github.com/abdulwahid-csit/photon-grid/issues
|
|
191
|
+
- **NPM** — https://www.npmjs.com/package/photon-grid-react
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
⭐ If you find Photon Grid useful, consider starring the repository.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "photon-grid-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A high-performance React data grid built on Photon Grid Core with virtualization, sorting, filtering, editing, grouping, and custom React renderers.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"*"
|
|
48
48
|
],
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"photon-grid-core": "^1.0.
|
|
50
|
+
"photon-grid-core": "^1.0.2"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"react": ">=18",
|