@revolist/svelte-datagrid 4.0.24 → 4.0.26
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 +153 -81
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,84 +1,113 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<a href="https://revolist.github.io/revogrid">
|
|
3
|
-
<img src="
|
|
3
|
+
<img src="./assets/logo.svg" alt="RevoGrid" height="150" />
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
|
-
##
|
|
8
7
|
<p align="center">
|
|
9
|
-
<a href="https://www.npmjs.com/package/@revolist/revogrid"><img src="https://img.shields.io/npm/v/@revolist/
|
|
8
|
+
<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>
|
|
10
9
|
<a href="https://github.com/revolist/revogrid/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@revolist/revogrid" alt="Software License"/></a>
|
|
10
|
+
<img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid@latest" alt="Tree shaking"/>
|
|
11
|
+
<img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid@latest" alt="Tree shaking"/>
|
|
11
12
|
</p>
|
|
12
|
-
|
|
13
|
+
|
|
14
|
+
#
|
|
15
|
+
|
|
16
|
+
<h3 align="center">Powerful data grid component built with <a href="https://stenciljs.com" target="_blank">StencilJS</a>.</h3>
|
|
13
17
|
<p align="center">
|
|
14
|
-
Millions of cells and thousands columns easy and efficiently.
|
|
18
|
+
Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.
|
|
15
19
|
|
|
16
20
|
</p>
|
|
17
21
|
|
|
18
22
|
<p align="center">
|
|
19
23
|
<a href="https://revolist.github.io/revogrid">Demo and API</a> •
|
|
20
|
-
<a href="https://codesandbox.io/s/revogrid-svelte-latest-7g7vo8?file=/Grid.svelte">Svelte demo</a> •
|
|
21
24
|
<a href="#key-features">Key Features</a> •
|
|
22
|
-
<a href="#
|
|
25
|
+
<a href="#basic-usage">How To Use</a> •
|
|
26
|
+
<a href="#installation">Installation</a> •
|
|
23
27
|
<a href="https://github.com/revolist/revogrid/blob/master/src/components/revo-grid/readme.md">Docs</a> •
|
|
24
28
|
<a href="#license">License</a>
|
|
25
29
|
</p>
|
|
26
30
|
|
|
27
|
-
<img src="
|
|
31
|
+
<img src="./assets/material.jpg" alt="Material grid preview" width="100%" />
|
|
28
32
|
<i>RevoGrid material theme.</i>
|
|
29
33
|
<br>
|
|
30
34
|
|
|
31
|
-
|
|
32
35
|
## Key Features
|
|
33
36
|
|
|
34
|
-
-
|
|
35
|
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
-
|
|
44
|
-
|
|
45
|
-
-
|
|
46
|
-
|
|
47
|
-
-
|
|
48
|
-
-
|
|
49
|
-
-
|
|
50
|
-
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
-
|
|
60
|
-
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
|
|
66
|
-
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
-
|
|
70
|
-
-
|
|
71
|
-
-
|
|
72
|
-
-
|
|
73
|
-
-
|
|
74
|
-
|
|
75
|
-
-
|
|
76
|
-
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
37
|
+
- **High Performance**: Handles millions of cells in the viewport with a powerful core built by default.
|
|
38
|
+
|
|
39
|
+
- **Keyboard Support**:
|
|
40
|
+
- Excel-like focus for efficient navigation and editing.
|
|
41
|
+
- Seamless copy/paste from Excel, Google Sheets, or any other sheet format.
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
- **Lightweight**: Minimal initial bundle size . Can be imported with polyfills or as a module for modern browsers.
|
|
45
|
+
|
|
46
|
+
- **Intelligent Virtual DOM**: Smart row recombination to minimize redraws.
|
|
47
|
+
|
|
48
|
+
- **Sorting**: Multiple options, customizable per column, with advanced event handling.
|
|
49
|
+
|
|
50
|
+
- **Filtering**:
|
|
51
|
+
- Predefined system filters.
|
|
52
|
+
- Preserve existing collections.
|
|
53
|
+
- Custom filters to extend system filters with your own set.
|
|
54
|
+
|
|
55
|
+
- **Export**: Export data to file.
|
|
56
|
+
|
|
57
|
+
- **Custom Sizes**: Define custom sizes for columns and rows. Automatic sizing based on content.
|
|
58
|
+
|
|
59
|
+
- **Column Resizing**: Adjust column widths.
|
|
60
|
+
|
|
61
|
+
- **Pinned/Sticky/Freezed Elements**:
|
|
62
|
+
- Columns (define left or right).
|
|
63
|
+
- Rows (define top or bottom).
|
|
64
|
+
|
|
65
|
+
- **Grouping**:
|
|
66
|
+
- Column grouping (nested headers).
|
|
67
|
+
- Row grouping (nested rows).
|
|
68
|
+
|
|
69
|
+
- **Cell Editing**: In-place editing of cell data.
|
|
70
|
+
|
|
71
|
+
- **Customizations**:
|
|
72
|
+
- Column header template.
|
|
73
|
+
- Row header template.
|
|
74
|
+
- Cell template (create your own cell views).
|
|
75
|
+
- Cell editor (use predefined or apply your own custom editors and cell types).
|
|
76
|
+
- Cell properties (define custom properties for rendered cells).
|
|
77
|
+
|
|
78
|
+
- **Column Types**: [More details](https://revolist.github.io/revogrid/guide/column.types.html)
|
|
79
|
+
- Text/String (default).
|
|
80
|
+
- Number.
|
|
81
|
+
- Select.
|
|
82
|
+
- Date.
|
|
83
|
+
- Custom (create extended styles using any template).
|
|
84
|
+
|
|
85
|
+
- **Drag and Drop**: Easily reorder rows.
|
|
86
|
+
|
|
87
|
+
- **Range Operations**:
|
|
88
|
+
- Selection.
|
|
89
|
+
- Editing.
|
|
90
|
+
|
|
91
|
+
- **Theme Packages**:
|
|
92
|
+
- Excel-like (default).
|
|
93
|
+
- Material (compact, dark, or light).
|
|
94
|
+
|
|
95
|
+
- **Extensibility**: Modern VNode features and tsx support for easy extension.
|
|
96
|
+
|
|
97
|
+
- **Trimmed Rows**: Hide rows on demand.
|
|
98
|
+
|
|
99
|
+
- **Plugin System**: Create custom plugins or extend existing ones easily.
|
|
100
|
+
|
|
101
|
+
- **Additional Customizations and Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://revolist.github.io/revogrid).
|
|
102
|
+
|
|
103
|
+
<br>
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
### Usage Svelte [Example](https://codesandbox.io/s/data-vue-test-3wkzi?file=/src/App.vue)
|
|
80
108
|
|
|
81
109
|
With NPM:
|
|
110
|
+
|
|
82
111
|
```bash
|
|
83
112
|
npm i @revolist/svelte-datagrid --save;
|
|
84
113
|
```
|
|
@@ -89,44 +118,87 @@ With Yarn:
|
|
|
89
118
|
yarn add @revolist/svelte-datagrid;
|
|
90
119
|
```
|
|
91
120
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
import {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
121
|
+
```svelte
|
|
122
|
+
// App.svelte
|
|
123
|
+
<script lang="ts">
|
|
124
|
+
import { RevoGrid } from '@revolist/svelte-datagrid';
|
|
125
|
+
import type { ColumnRegular } from '@revolist/revogrid';
|
|
126
|
+
|
|
127
|
+
// This part to makesure revogrid component is loaded and ready
|
|
128
|
+
import { defineCustomElements } from '@revolist/revogrid/loader';
|
|
129
|
+
defineCustomElements();
|
|
130
|
+
|
|
131
|
+
const columns = [
|
|
132
|
+
{
|
|
133
|
+
prop: 'name',
|
|
134
|
+
name: 'First',
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
prop: 'details',
|
|
138
|
+
name: 'Second',
|
|
139
|
+
},
|
|
140
|
+
];
|
|
141
|
+
const source = [
|
|
142
|
+
{
|
|
143
|
+
name: '1',
|
|
144
|
+
details: 'Item 1',
|
|
108
145
|
},
|
|
109
146
|
{
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
name: "1",
|
|
115
|
-
details: "Item 1",
|
|
116
|
-
}];
|
|
117
|
-
});
|
|
147
|
+
name: '2',
|
|
148
|
+
details: 'Item 2',
|
|
149
|
+
},
|
|
150
|
+
];
|
|
118
151
|
</script>
|
|
119
152
|
|
|
153
|
+
<RevoGrid {source} {columns}></RevoGrid>
|
|
120
154
|
|
|
121
|
-
<RevoGrid source={source} resize="true" columns={headers} theme="material"/>
|
|
122
155
|
```
|
|
123
156
|
|
|
157
|
+
|
|
158
|
+
## Versions
|
|
159
|
+
|
|
160
|
+
- **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.
|
|
161
|
+
- **3.0+**: Breaking changes introduced. See the [migration guide](./docs/guide/migration.md).
|
|
162
|
+
This version features new component loading, ESM modules, Bootstrap support, and much [more](./docs/guide/migration.md).
|
|
163
|
+
- **4.0+**: Breaking changes introduced. See the [migration guide](./docs/guide/migration.md). In this version, we rethought our framework approach, updated typings, fixed major issues, updated core and significantly improved overall performance. The grid is now much faster, with better plugin support and full framework support for Angular, React, and Vue, along with partial support for Ember and Svelte. Redesigned the documentation, and added more examples.
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
## Sponsors
|
|
168
|
+
|
|
169
|
+
We would like to extend our heartfelt gratitude to our sponsor for their generous support. Their contributions help us maintain and develop RevoGrid, ensuring continuous improvements and updates. If you are using RevoGrid in your project and would like to support its development, consider becoming a sponsor.
|
|
170
|
+
|
|
171
|
+
### Our Sponsors
|
|
172
|
+
|
|
173
|
+
[](https://altruistiq.com)
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
### Become a Sponsor
|
|
177
|
+
|
|
178
|
+
If you or your company would like to support the ongoing development of RevoGrid, please consider becoming a sponsor. Your support will help us continue to improve the project and provide the best possible tool for the community.
|
|
179
|
+
|
|
180
|
+
[](https://opencollective.com/revogrid)
|
|
181
|
+
|
|
182
|
+
Thank you for supporting RevoGrid! 🙏
|
|
183
|
+
|
|
124
184
|
## Contributing
|
|
125
185
|
|
|
126
|
-
|
|
186
|
+
We invite you to join our vibrant community and contribute to the growth and success of RevoGrid. By getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact on an innovative project.
|
|
187
|
+
|
|
188
|
+
### Why Contribute?
|
|
127
189
|
|
|
190
|
+
- **Expand Your Knowledge**: Working on RevoGrid 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.
|
|
191
|
+
- **Valuable Experience**: Contributing to an open-source project like RevoGrid 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.
|
|
192
|
+
- **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.
|
|
193
|
+
- **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.
|
|
194
|
+
|
|
195
|
+
### Join Us
|
|
196
|
+
|
|
197
|
+
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!
|
|
128
198
|
|
|
129
199
|
## License
|
|
130
200
|
|
|
131
201
|
MIT
|
|
132
202
|
|
|
203
|
+
---
|
|
204
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revolist/svelte-datagrid",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.26",
|
|
4
4
|
"description": "Svelte DataGrid Spreadsheet component with native cell render support",
|
|
5
5
|
"main": "./dist/svelte-datagrid.umd.js",
|
|
6
6
|
"module": "./dist/svelte-datagrid.js",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"vite-plugin-dts": "^3.9.1"
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@revolist/revogrid": "4.0.
|
|
69
|
+
"@revolist/revogrid": "4.0.26"
|
|
70
70
|
},
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|