@revolist/react-datagrid 4.11.16 → 4.11.17
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 +77 -82
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
### 🚨 Repository Notice
|
|
2
2
|
|
|
3
|
-
Post issues [here](https://github.com/revolist/revogrid). Happy coding!
|
|
3
|
+
Post new issues [here](https://github.com/revolist/revogrid). Happy coding! 💻
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
8
|
<a href="https://rv-grid.com">
|
|
9
|
-
<img src="./assets/logo.svg" alt="RevoGrid" height="150" />
|
|
9
|
+
<img src="./assets/logo.svg" alt="RevoGrid Data Grid" height="150" />
|
|
10
10
|
</a>
|
|
11
11
|
</p>
|
|
12
12
|
|
|
13
13
|
<p align="center">
|
|
14
14
|
<a href="https://www.npmjs.com/package/@revolist/revogrid"><img src="https://img.shields.io/npm/v/@revolist/revogrid" alt="Latest Version on NPM"/></a>
|
|
15
15
|
<a href="https://github.com/revolist/revogrid/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@revolist/revogrid" alt="Software License"/></a>
|
|
16
|
-
<img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid
|
|
17
|
-
<img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid
|
|
16
|
+
<img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid" alt="Dependency count"/>
|
|
17
|
+
<img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid" alt="Tree shaking"/>
|
|
18
|
+
<img src="https://img.shields.io/bundlephobia/min/@revolist/revogrid" alt="Bundle size"/>
|
|
18
19
|
<img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/>
|
|
19
20
|
</p>
|
|
20
21
|
|
|
@@ -44,80 +45,79 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
|
|
|
44
45
|
|
|
45
46
|
- **High Performance**: Handles millions of cells in the viewport with a powerful core built by default.
|
|
46
47
|
|
|
47
|
-
- **Accessibility**: Follows WAI-ARIA best practices.
|
|
48
|
+
- **[Accessibility](https://rv-grid.com/guide/wcag)**: Follows WAI-ARIA best practices.
|
|
48
49
|
|
|
49
|
-
- **Keyboard Support**:
|
|
50
|
+
- **[Keyboard Support](https://rv-grid.com/guide/defs#Keyboard)**:
|
|
50
51
|
- Excel-like focus for efficient navigation and editing.
|
|
51
52
|
- Seamless copy/paste from Excel, Google Sheets, or any other sheet format.
|
|
52
53
|
|
|
53
54
|
|
|
54
55
|
- **Lightweight**: Minimal initial bundle size . Can be imported with polyfills or as a module for modern browsers.
|
|
55
56
|
|
|
56
|
-
- **Intelligent Virtual DOM**: Smart row recombination to minimize redraws.
|
|
57
|
+
- **[Intelligent Virtual DOM](https://rv-grid.com/guide/overview#VNode-Reactive-DOM)**: Smart row recombination to minimize redraws.
|
|
57
58
|
|
|
58
|
-
- **Virtual Scroll**: Handles large datasets with infinite scroll.
|
|
59
|
+
- **[Virtual Scroll](https://rv-grid.com/guide/viewports)**: Handles large datasets with infinite scroll.
|
|
59
60
|
|
|
60
|
-
- **
|
|
61
|
+
- **[Drag and Drop](https://rv-grid.com/guide/row/order)**: Drag and drop in [rows](https://rv-grid.com/guide/row/order) and [columns](https://rv-grid.com/guide/column/order).
|
|
61
62
|
|
|
62
|
-
- **
|
|
63
|
+
- **[Sorting](https://rv-grid.com/guide/sorting)**: Multiple options, customizable per column, with advanced event handling.
|
|
63
64
|
|
|
64
|
-
- **
|
|
65
|
-
|
|
66
|
-
- **Filtering**:
|
|
65
|
+
- **[Filtering](https://rv-grid.com/guide/filters)**:
|
|
67
66
|
- Predefined system filters.
|
|
67
|
+
- Multi column filters.
|
|
68
|
+
- Conditional filters.
|
|
68
69
|
- Preserve existing collections.
|
|
69
70
|
- Custom filters to extend system filters with your own set.
|
|
70
71
|
|
|
71
|
-
- **Export**: Export data to file.
|
|
72
|
+
- **[Export](https://rv-grid.com/guide/export.plugin)**: Export data to file.
|
|
72
73
|
|
|
73
|
-
- **Custom Sizes**: Define custom sizes for columns and rows. Automatic sizing based on content.
|
|
74
|
+
- **Custom Sizes**: Define custom sizes for [columns](https://rv-grid.com/guide/column/#Column-Size) and [rows](https://rv-grid.com/guide/row/height). Automatic sizing based on content.
|
|
74
75
|
|
|
75
|
-
- **Column Resizing**: Adjust column widths.
|
|
76
|
+
- **[Column Resizing](https://rv-grid.com/guide/column/resize)**: Adjust column widths.
|
|
76
77
|
|
|
77
78
|
- **Pinned/Sticky/Freezed Elements**:
|
|
78
|
-
- Columns (define left or right).
|
|
79
|
-
- Rows (define top or bottom).
|
|
79
|
+
- [Columns](https://rv-grid.com/guide/column/pin) (define left or right).
|
|
80
|
+
- [Rows](https://rv-grid.com/guide/row/pin) (define top or bottom).
|
|
80
81
|
|
|
81
82
|
- **Grouping**:
|
|
82
|
-
- Column grouping (nested headers).
|
|
83
|
-
- Row grouping (nested rows).
|
|
84
|
-
|
|
85
|
-
- **Cell Editing**: In-place editing of cell data.
|
|
86
|
-
|
|
87
|
-
- **Cell Merging**: Merge cells to form groups.
|
|
88
|
-
|
|
89
|
-
- **Customizations**:
|
|
90
|
-
- Column header template.
|
|
91
|
-
- Row header template.
|
|
92
|
-
- Cell template (create your own cell views).
|
|
93
|
-
- Cell editor (use predefined or apply your own custom editors and cell types).
|
|
94
|
-
- Cell properties (define custom properties for rendered cells).
|
|
83
|
+
- [Column grouping](https://rv-grid.com/guide/column/grouping) (nested headers).
|
|
84
|
+
- [Row grouping](https://rv-grid.com/guide/row/grouping) (nested rows).
|
|
95
85
|
|
|
96
86
|
- **Column Types**: [More details](https://rv-grid.com/guide/column/#Column-Formats)
|
|
97
|
-
- Text/String (default).
|
|
98
|
-
- Number.
|
|
99
|
-
- Select.
|
|
100
|
-
- Date.
|
|
87
|
+
- [Text/String](https://rv-grid.com/guide/column/types#String) (default).
|
|
88
|
+
- [Number](https://rv-grid.com/guide/column/types#Number).
|
|
89
|
+
- [Select/Dropdown](https://rv-grid.com/guide/column/types#Select-Dropdown).
|
|
90
|
+
- [Date](https://rv-grid.com/guide/column/types#Date).
|
|
101
91
|
- Custom (create extended styles using any template).
|
|
102
92
|
|
|
103
93
|
- **Range Operations**:
|
|
104
|
-
- Selection.
|
|
105
|
-
- Editing.
|
|
94
|
+
- [Selection](https://rv-grid.com/guide/defs#Range).
|
|
95
|
+
- [Editing](https://rv-grid.com/guide/defs#Range-Autofill).
|
|
106
96
|
|
|
107
|
-
- **Theme Packages**:
|
|
97
|
+
- **[Theme Packages](https://rv-grid.com/guide/theme)**:
|
|
108
98
|
- Excel-like (default).
|
|
109
99
|
- Material (compact, dark, or light).
|
|
110
100
|
|
|
111
|
-
- **Extensibility**: Modern VNode features and tsx support for easy extension.
|
|
101
|
+
- **[Extensibility](https://rv-grid.com/guide/jsx.template)**: Modern VNode features and tsx support for easy extension.
|
|
112
102
|
|
|
113
|
-
- **Trimmed Rows**: Hide rows on demand.
|
|
103
|
+
- **[Trimmed Rows](https://rv-grid.com/guide/row/#Trimmed-Rows)**: Hide rows on demand.
|
|
114
104
|
|
|
115
|
-
- **Plugin System**: Create custom plugins or extend existing ones easily.
|
|
105
|
+
- **[Plugin System](https://rv-grid.com/guide/plugin/)**: Create custom plugins or extend existing ones easily.
|
|
116
106
|
|
|
117
|
-
- **
|
|
107
|
+
- **[Formula Support](https://rv-grid.com/guide/cell/formula)**: Evaluate formulas in cell data.
|
|
118
108
|
|
|
119
|
-
|
|
109
|
+
- **[Master Detail/Subtables/Forms](https://rv-grid.com/guide/row/master.pro)**: Expand rows to reveal child data.
|
|
110
|
+
- **[Cell/Column/Row Span/Merge](https://rv-grid.com/guide/cell/merge)**: Merge cells to form groups.
|
|
111
|
+
|
|
112
|
+
- **Customizations**:
|
|
113
|
+
- [Column header template](https://rv-grid.com/guide/column/header.template).
|
|
114
|
+
- [Row header template](https://rv-grid.com/guide/row/headers).
|
|
115
|
+
- [Cell properties](https://rv-grid.com/guide/cell/) (define custom properties for rendered cells).
|
|
120
116
|
|
|
117
|
+
- [Cell template](https://rv-grid.com/guide/react/renderer) (create your own cell views).
|
|
118
|
+
- [Cell editor](https://rv-grid.com/guide/react/editor) (use predefined or apply your own custom editors and cell types).
|
|
119
|
+
|
|
120
|
+
- **Rich API & Additional Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://rv-grid.com/).
|
|
121
121
|
|
|
122
122
|
|
|
123
123
|
### Usage React
|
|
@@ -136,6 +136,7 @@ yarn add @revolist/react-datagrid;
|
|
|
136
136
|
|
|
137
137
|
```tsx
|
|
138
138
|
// App.tsx
|
|
139
|
+
import { useState } from 'react';
|
|
139
140
|
import { RevoGrid, Template, Editor, type EditorType, type ColumnDataSchemaModel, type Editors } from '@revolist/react-datagrid';
|
|
140
141
|
|
|
141
142
|
/**
|
|
@@ -152,31 +153,30 @@ const Button = ({ close } : EditorType) => {
|
|
|
152
153
|
return <button onClick={close}>Close</button>
|
|
153
154
|
};
|
|
154
155
|
|
|
156
|
+
const MY_EDITOR = 'custom-editor';
|
|
157
|
+
const gridEditors: Editors = { [MY_EDITOR]: Editor(Button) };
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* note: columns & source need a "stable" reference in order to prevent infinite re-renders
|
|
161
|
+
*/
|
|
162
|
+
const columns = [
|
|
163
|
+
{
|
|
164
|
+
prop: 'name',
|
|
165
|
+
name: 'First',
|
|
166
|
+
editor: MY_EDITOR,
|
|
167
|
+
cellTemplate: Template(Cell),
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
prop: 'details',
|
|
171
|
+
name: 'Second',
|
|
172
|
+
},
|
|
173
|
+
];
|
|
174
|
+
|
|
155
175
|
function App() {
|
|
156
|
-
const
|
|
157
|
-
|
|
158
|
-
{
|
|
159
|
-
|
|
160
|
-
name: 'First',
|
|
161
|
-
editor: MY_EDITOR,
|
|
162
|
-
cellTemplate: Template(Cell),
|
|
163
|
-
},
|
|
164
|
-
{
|
|
165
|
-
prop: 'details',
|
|
166
|
-
name: 'Second',
|
|
167
|
-
},
|
|
168
|
-
];
|
|
169
|
-
const source = [
|
|
170
|
-
{
|
|
171
|
-
name: '1',
|
|
172
|
-
details: 'Item 1',
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
name: '2',
|
|
176
|
-
details: 'Item 2',
|
|
177
|
-
},
|
|
178
|
-
];
|
|
179
|
-
const gridEditors: Editors = { [MY_EDITOR]: Editor(Button) };
|
|
176
|
+
const [source] = useState([
|
|
177
|
+
{ name: '1', details: 'Item 1' },
|
|
178
|
+
{ name: '2', details: 'Item 2' },
|
|
179
|
+
]);
|
|
180
180
|
return (
|
|
181
181
|
<>
|
|
182
182
|
<RevoGrid columns={columns} source={source} editors={gridEditors} />
|
|
@@ -210,11 +210,11 @@ export default App
|
|
|
210
210
|
|
|
211
211
|
- Redesigned type support:
|
|
212
212
|
- Removed deprecated namespaces:
|
|
213
|
-
- **Before**: `RevoGrid.
|
|
214
|
-
- **Now**: `
|
|
213
|
+
- **Before**: `RevoGrid.ColumnRegular`
|
|
214
|
+
- **Now**: `ColumnRegular`;
|
|
215
215
|
- Improved type import:
|
|
216
216
|
- **Before**: `import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'`
|
|
217
|
-
- **Now**: `import {
|
|
217
|
+
- **Now**: `import { ColumnRegular } from '@revolist/revogrid'`.
|
|
218
218
|
- Changed viewport type names everywhere. For example, before: `rowDefinitions: [{ type: "row", index: 0, size: 145 }]`, after: `rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]`.
|
|
219
219
|
- Updated [event](https://rv-grid.com/guide/api/revoGrid.html#Events) naming convention. Review your [event](https://rv-grid.com/guide/api/revoGrid.html#Events) usage. [Event names](https://rv-grid.com/guide/api/revoGrid.html#Events) are all lowercase now and are aligned with modern event naming conventions. For example, `afterEdit` -> `afteredit`.
|
|
220
220
|
- Multiple event breaking changes introduced: beforerowrender now returns `BeforeRowRenderEvent`. Check all events for details.
|
|
@@ -236,33 +236,28 @@ export default App
|
|
|
236
236
|
|
|
237
237
|
## Our Sponsors
|
|
238
238
|
|
|
239
|
-
We would like to extend our heartfelt gratitude to our sponsors for their generous support. Their contributions help us maintain and develop RevoGrid
|
|
239
|
+
We would like to extend our heartfelt gratitude to our sponsors for their generous support. Their contributions help us maintain and develop RevoGrid.
|
|
240
240
|
|
|
241
241
|
[](https://altruistiq.com)
|
|
242
242
|
|
|
243
243
|
|
|
244
244
|
### Become a Sponsor
|
|
245
245
|
|
|
246
|
-
If you or your company would like to support the ongoing development of RevoGrid, please consider
|
|
247
|
-
|
|
248
|
-
[](https://opencollective.com/revogrid)
|
|
246
|
+
If you or your company would like to support the ongoing development of RevoGrid, please consider [](https://opencollective.com/revogrid) or use a [Pro version](https://rv-grid.com/pro/). Your support will help us continue to improve the project and provide the best possible tool for the community.
|
|
249
247
|
|
|
250
248
|
Thank you for supporting RevoGrid! 🙏
|
|
251
249
|
|
|
250
|
+
|
|
252
251
|
## Contributing
|
|
253
252
|
|
|
254
|
-
|
|
253
|
+
By getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact on an innovative project. Your contribution, no matter how big or small, is valuable.
|
|
255
254
|
|
|
256
255
|
### Why Contribute?
|
|
257
256
|
|
|
258
|
-
- **Expand Your Knowledge**: Working on
|
|
259
|
-
- **
|
|
260
|
-
- **Professional Growth**: By contributing, you become part of a network of talented developers. This can lead to mentorship opportunities, collaborations, and professional connections that can benefit your career.
|
|
261
|
-
- **Make a Difference**: Your contributions can help improve RevoGrid, making it more powerful and user-friendly for developers around the world. Your input can shape the future of the project and drive innovation.
|
|
262
|
-
|
|
263
|
-
### Join Us
|
|
257
|
+
- **Expand Your Knowledge**: Working on complex libraries allows you to dive deep into modern web technologies, improve your coding skills, and learn best practices in performance optimization, data handling, and component-based architecture.
|
|
258
|
+
- **Experience**: Contributing to an open-source project like provides you with practical experience that can be a great addition to your portfolio. It demonstrates your ability to work collaboratively, solve complex problems, and contribute to a project's success.
|
|
259
|
+
- **Professional Growth**: By contributing, you become part of a network of talented developers. This can lead to mentorship opportunities, collaborations, and professional connections that can benefit your career.
|
|
264
260
|
|
|
265
|
-
Your contribution, no matter how big or small, is valuable. By working on RevoGrid, you'll be part of an exciting project that's making a difference in the world of data grids. Join us today and let's build something amazing together!
|
|
266
261
|
|
|
267
262
|
## License
|
|
268
263
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revolist/react-datagrid",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "4.11.
|
|
4
|
+
"version": "4.11.17",
|
|
5
5
|
"description": "React DataGrid Spreadsheet component with native cell render support",
|
|
6
6
|
"main": "./dist/react-datagrid.umd.cjs",
|
|
7
7
|
"module": "./dist/react-datagrid.js",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"homepage": "https://github.com/revolist/revogrid#readme",
|
|
65
65
|
"license": "MIT",
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@revolist/revogrid": "4.11.
|
|
67
|
+
"@revolist/revogrid": "4.11.17"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@types/react": "^18.3.2",
|