slickgrid-react 5.12.1 → 5.12.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 +40 -4
- package/package.json +29 -32
package/README.md
CHANGED
|
@@ -24,13 +24,46 @@ Refer to the **[Docs - Quick Start](https://ghiscoding.gitbook.io/slickgrid-reac
|
|
|
24
24
|
### NPM Package
|
|
25
25
|
[slickgrid-react on NPM](https://www.npmjs.com/package/slickgrid-react)
|
|
26
26
|
|
|
27
|
+
|
|
28
|
+
#### Basic Usage
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { type Column, type GridOption, SlickgridReact } from 'slickgrid-react';
|
|
32
|
+
|
|
33
|
+
export default function Example() {
|
|
34
|
+
const [dataset] = useState(getData());
|
|
35
|
+
|
|
36
|
+
const columnDefinitions: Column[] = [
|
|
37
|
+
{ id: 'firstName', name: 'First Name', field: 'firstName', sortable: true },
|
|
38
|
+
{ id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true },
|
|
39
|
+
{ id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true }
|
|
40
|
+
]);
|
|
41
|
+
const gridOptions: GridOption = { /*...*/ }); // optional grid options
|
|
42
|
+
|
|
43
|
+
function getData() {
|
|
44
|
+
return [
|
|
45
|
+
{ id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
|
|
46
|
+
{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 }
|
|
47
|
+
];
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<SlickgridReact gridId="grid1"
|
|
52
|
+
columnDefinitions={columnDefinitions}
|
|
53
|
+
gridOptions={gridOptions}
|
|
54
|
+
dataset={dataset}
|
|
55
|
+
/>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
27
60
|
### Troubleshooting
|
|
28
61
|
|
|
29
62
|
This project **does not** work well with `React.StrictMode`, so please make sure to disable it to avoid pulling your hair for days.
|
|
30
63
|
|
|
31
64
|
### Versions Compatibility
|
|
32
65
|
|
|
33
|
-
> **Note** please be aware that only the latest version of Slickgrid-React
|
|
66
|
+
> **Note** please be aware that only the latest major version of Slickgrid-React will be supported and receive bug fixes (it's already a lot of work to maintain for a single developer like me).
|
|
34
67
|
|
|
35
68
|
| Slickgrid-React | React version | Migration Guide | Notes |
|
|
36
69
|
|-------------------|-----------------|-----------------|------|
|
|
@@ -42,18 +75,19 @@ This project **does not** work well with `React.StrictMode`, so please make sure
|
|
|
42
75
|
### Styling Themes
|
|
43
76
|
|
|
44
77
|
Multiple styling themes are available
|
|
78
|
+
- Default (UI agnostic)
|
|
45
79
|
- Bootstrap (see all Slickgrid-React [live demos](https://ghiscoding.github.io/slickgrid-react/))
|
|
46
80
|
- Material (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example07))
|
|
47
81
|
- Salesforce (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example16))
|
|
48
82
|
|
|
49
|
-
Also note that all of these themes also have **Dark Theme** equivalent and even though Bootstrap
|
|
83
|
+
Also note that all of these themes also have **Dark Theme** equivalent and even though Bootstrap is often used for live demos, it does work as well with any other UI framework like Bulma, Material, ...
|
|
50
84
|
|
|
51
85
|
### Live Demo page
|
|
52
86
|
`Slickgrid-React` works with all `Bootstrap` versions, you can see a demo of each one below. It also works well with any other frameworks like Material or Bulma and there are also couple of extra styling themes based on Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/slickgrid-react/styling/svg-icons)
|
|
53
87
|
- [Bootstrap 5 demo](https://ghiscoding.github.io/slickgrid-react) / [examples repo](https://github.com/ghiscoding/slickgrid-react-demos/tree/main/bootstrap5-i18n-demo)
|
|
54
88
|
|
|
55
89
|
#### Working Demos
|
|
56
|
-
For a complete set of working demos (40+ examples), we strongly suggest you to clone the [Slickgrid-React Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository (instructions are provided
|
|
90
|
+
For a complete set of working demos (40+ examples), we strongly suggest you to clone the [Slickgrid-React Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository (instructions are provided inside it). The repo provides multiple examples and are updated every time a new release is out, so it is updated frequently and is used as the GitHub live demo page.
|
|
57
91
|
|
|
58
92
|
## License
|
|
59
93
|
[MIT License](LICENSE)
|
|
@@ -65,12 +99,14 @@ Check out the [Releases](https://github.com/ghiscoding/slickgrid-react/releases)
|
|
|
65
99
|
Slickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-React Examples are tested with [Cypress](https://www.cypress.io/) as E2E tests.
|
|
66
100
|
|
|
67
101
|
### Like it? ⭐ it
|
|
68
|
-
You like **Slickgrid-React**? Be sure to upvote ⭐, and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) and feel free to contribute. 👷👷♀️
|
|
102
|
+
You like **Slickgrid-React**? Be sure to upvote ⭐, and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) or GitHub sponsoring and feel free to contribute. 👷👷♀️
|
|
69
103
|
|
|
70
104
|
<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
|
|
71
105
|
|
|
72
106
|
## Sponsors
|
|
73
107
|
|
|
108
|
+
Thanks to all my sponsors!
|
|
109
|
+
|
|
74
110
|
<div>
|
|
75
111
|
<span>
|
|
76
112
|
<a href="https://github.com/wundergraph" class="Link" title="Wundergraph" target="_blank"><img src="https://avatars.githubusercontent.com/u/64281914" width="50" height="50" valign="middle" /></a>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "slickgrid-react",
|
|
3
|
-
"version": "5.12.
|
|
3
|
+
"version": "5.12.2",
|
|
4
4
|
"description": "Slickgrid components made available in React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -48,29 +48,27 @@
|
|
|
48
48
|
}
|
|
49
49
|
],
|
|
50
50
|
"scripts": {
|
|
51
|
-
"start": "vite",
|
|
52
|
-
"build:demo": "tsc && vite build",
|
|
53
|
-
"preview": "vite preview",
|
|
54
51
|
"delete:dist": "rimraf dist",
|
|
55
52
|
"lint": "eslint --cache .",
|
|
56
53
|
"lint:no-cache": "eslint .",
|
|
57
54
|
"lint:fix": "eslint --fix .",
|
|
58
55
|
"build:cjs": "tsc --project src/slickgrid-react/tsconfig.build.json --outDir dist/cjs --module commonjs --declaration false",
|
|
59
|
-
"postbuild:cjs": "copyfiles
|
|
56
|
+
"postbuild:cjs": "copyfiles src/slickgrid-react/**/*.html dist/cjs --up 2 --stat",
|
|
60
57
|
"build:esm": "tsc --project src/slickgrid-react/tsconfig.build.json --outDir dist/esm --module esnext --target es2018 --declaration false",
|
|
61
|
-
"postbuild:esm": "copyfiles
|
|
58
|
+
"postbuild:esm": "copyfiles src/slickgrid-react/**/*.html dist/esm --up 2 --stat",
|
|
62
59
|
"build:types": "tsc --project src/slickgrid-react/tsconfig.build.json --emitDeclarationOnly --declarationMap --outDir dist/types",
|
|
63
60
|
"prebuild": "npm-run-all delete:dist lint",
|
|
64
61
|
"build": "npm-run-all build:cjs build:esm build:types",
|
|
65
62
|
"postbuild": "npm-run-all copy-i18n:dist copy-asset-lib",
|
|
66
|
-
"copy-asset-lib": "copyfiles
|
|
67
|
-
"copy-i18n:dist": "copyfiles
|
|
63
|
+
"copy-asset-lib": "copyfiles src/assets/lib/** dist --up 2 --stat",
|
|
64
|
+
"copy-i18n:dist": "copyfiles src/assets/i18n/**/*.* dist/i18n --up 3 --stat",
|
|
68
65
|
"cypress:open": "cypress open --config-file test/cypress.config.ts",
|
|
69
66
|
"cypress:ci": "cypress run --config-file test/cypress.config.ts",
|
|
70
67
|
"preview:release": "release-it --dry-run",
|
|
71
68
|
"release": "release-it --only-version",
|
|
72
|
-
"
|
|
73
|
-
"
|
|
69
|
+
"vite:build": "tsc && vite build",
|
|
70
|
+
"vite:preview": "vite preview",
|
|
71
|
+
"vite:start": "vite",
|
|
74
72
|
"are-type-wrong": "attw --pack ."
|
|
75
73
|
},
|
|
76
74
|
"browserslist": [
|
|
@@ -83,12 +81,12 @@
|
|
|
83
81
|
"/src/slickgrid-react"
|
|
84
82
|
],
|
|
85
83
|
"dependencies": {
|
|
86
|
-
"@slickgrid-universal/common": "~5.12.
|
|
87
|
-
"@slickgrid-universal/custom-footer-component": "~5.12.
|
|
88
|
-
"@slickgrid-universal/empty-warning-component": "~5.12.
|
|
89
|
-
"@slickgrid-universal/event-pub-sub": "~5.12.
|
|
90
|
-
"@slickgrid-universal/pagination-component": "~5.12.
|
|
91
|
-
"@slickgrid-universal/row-detail-view-plugin": "~5.12.
|
|
84
|
+
"@slickgrid-universal/common": "~5.12.2",
|
|
85
|
+
"@slickgrid-universal/custom-footer-component": "~5.12.2",
|
|
86
|
+
"@slickgrid-universal/empty-warning-component": "~5.12.2",
|
|
87
|
+
"@slickgrid-universal/event-pub-sub": "~5.12.2",
|
|
88
|
+
"@slickgrid-universal/pagination-component": "~5.12.2",
|
|
89
|
+
"@slickgrid-universal/row-detail-view-plugin": "~5.12.2",
|
|
92
90
|
"dequal": "^2.0.3",
|
|
93
91
|
"i18next": "^23.16.8",
|
|
94
92
|
"sortablejs": "^1.15.6"
|
|
@@ -97,22 +95,22 @@
|
|
|
97
95
|
"react": ">=18.0.0"
|
|
98
96
|
},
|
|
99
97
|
"devDependencies": {
|
|
100
|
-
"@4tw/cypress-drag-drop": "^2.
|
|
98
|
+
"@4tw/cypress-drag-drop": "^2.3.0",
|
|
101
99
|
"@faker-js/faker": "^9.4.0",
|
|
102
100
|
"@fnando/sparkline": "^0.3.10",
|
|
103
101
|
"@formkit/tempo": "^0.1.2",
|
|
104
102
|
"@popperjs/core": "^2.11.8",
|
|
105
103
|
"@release-it/conventional-changelog": "^10.0.0",
|
|
106
|
-
"@slickgrid-universal/composite-editor-component": "~5.12.
|
|
107
|
-
"@slickgrid-universal/custom-tooltip-plugin": "~5.12.
|
|
108
|
-
"@slickgrid-universal/excel-export": "~5.12.
|
|
109
|
-
"@slickgrid-universal/graphql": "~5.12.
|
|
110
|
-
"@slickgrid-universal/odata": "~5.12.
|
|
111
|
-
"@slickgrid-universal/rxjs-observable": "~5.12.
|
|
112
|
-
"@slickgrid-universal/text-export": "~5.12.
|
|
104
|
+
"@slickgrid-universal/composite-editor-component": "~5.12.2",
|
|
105
|
+
"@slickgrid-universal/custom-tooltip-plugin": "~5.12.2",
|
|
106
|
+
"@slickgrid-universal/excel-export": "~5.12.2",
|
|
107
|
+
"@slickgrid-universal/graphql": "~5.12.2",
|
|
108
|
+
"@slickgrid-universal/odata": "~5.12.2",
|
|
109
|
+
"@slickgrid-universal/rxjs-observable": "~5.12.2",
|
|
110
|
+
"@slickgrid-universal/text-export": "~5.12.2",
|
|
113
111
|
"@types/fnando__sparkline": "^0.3.7",
|
|
114
112
|
"@types/i18next-xhr-backend": "^1.4.2",
|
|
115
|
-
"@types/node": "^22.
|
|
113
|
+
"@types/node": "^22.13.1",
|
|
116
114
|
"@types/react": "^18.3.18",
|
|
117
115
|
"@types/react-dom": "^18.3.5",
|
|
118
116
|
"@types/sortablejs": "^1.15.8",
|
|
@@ -120,12 +118,11 @@
|
|
|
120
118
|
"@vitejs/plugin-react": "^4.3.4",
|
|
121
119
|
"bootstrap": "^5.3.3",
|
|
122
120
|
"concurrently": "^9.1.2",
|
|
123
|
-
"copyfiles": "^2.4.1",
|
|
124
121
|
"custom-event-polyfill": "^1.0.7",
|
|
125
122
|
"cypress": "^14.0.0",
|
|
126
123
|
"cypress-real-events": "^1.14.0",
|
|
127
124
|
"dompurify": "^3.2.3",
|
|
128
|
-
"eslint": "^9.
|
|
125
|
+
"eslint": "^9.20.0",
|
|
129
126
|
"eslint-plugin-cypress": "^4.1.0",
|
|
130
127
|
"eslint-plugin-import": "^2.31.0",
|
|
131
128
|
"eslint-plugin-n": "^17.15.1",
|
|
@@ -135,20 +132,20 @@
|
|
|
135
132
|
"globals": "^15.14.0",
|
|
136
133
|
"i18next-http-backend": "^2.7.3",
|
|
137
134
|
"isomorphic-fetch": "^3.0.0",
|
|
135
|
+
"native-copyfiles": "^0.3.2",
|
|
138
136
|
"npm-run-all2": "^7.0.2",
|
|
139
137
|
"react": "^18.3.1",
|
|
140
138
|
"react-dom": "^18.3.1",
|
|
141
139
|
"react-i18next": "^15.4.0",
|
|
142
|
-
"react-router-dom": "^7.1.
|
|
140
|
+
"react-router-dom": "^7.1.5",
|
|
143
141
|
"regenerator-runtime": "^0.14.1",
|
|
144
142
|
"release-it": "^18.1.2",
|
|
145
143
|
"rimraf": "^5.0.10",
|
|
146
144
|
"rxjs": "^7.8.1",
|
|
147
|
-
"sass": "^1.
|
|
148
|
-
"serve": "^14.2.4",
|
|
145
|
+
"sass": "^1.84.0",
|
|
149
146
|
"typescript": "^5.7.3",
|
|
150
|
-
"typescript-eslint": "^8.
|
|
151
|
-
"vite": "^6.0
|
|
147
|
+
"typescript-eslint": "^8.23.0",
|
|
148
|
+
"vite": "^6.1.0",
|
|
152
149
|
"vite-plugin-svgr": "^4.3.0",
|
|
153
150
|
"vite-tsconfig-paths": "^5.1.4"
|
|
154
151
|
},
|