m9-react-data-grid 7.0.0-beta.7.11
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/LICENSE +24 -0
- package/README.md +322 -0
- package/lib/bundle.cjs +2637 -0
- package/lib/bundle.cjs.map +1 -0
- package/lib/bundle.js +2624 -0
- package/lib/bundle.js.map +1 -0
- package/lib/index.d.ts +336 -0
- package/package.json +117 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Original work Copyright (c) 2014 Prometheus Research
|
|
4
|
+
Modified work Copyright 2015 Adazzle
|
|
5
|
+
|
|
6
|
+
For the original source code please see https://github.com/prometheusresearch-archive/react-grid
|
|
7
|
+
|
|
8
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
9
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
10
|
+
in the Software without restriction, including without limitation the rights
|
|
11
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
12
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
13
|
+
furnished to do so, subject to the following conditions:
|
|
14
|
+
|
|
15
|
+
The above copyright notice and this permission notice shall be included in
|
|
16
|
+
all copies or substantial portions of the Software.
|
|
17
|
+
|
|
18
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
19
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
20
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
21
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
22
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
23
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
24
|
+
THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
# react-data-grid
|
|
2
|
+
|
|
3
|
+
[![npm-badge]][npm-url]
|
|
4
|
+
[![type-badge]][npm-url]
|
|
5
|
+
[![size-badge]][size-url]
|
|
6
|
+
[![codecov-badge]][codecov-url]
|
|
7
|
+
[![ci-badge]][ci-url]
|
|
8
|
+
|
|
9
|
+
[npm-badge]: https://img.shields.io/npm/v/react-data-grid
|
|
10
|
+
[npm-url]: https://www.npmjs.com/package/react-data-grid
|
|
11
|
+
[size-badge]: https://img.shields.io/bundlephobia/minzip/react-data-grid
|
|
12
|
+
[size-url]: https://bundlephobia.com/package/react-data-grid
|
|
13
|
+
[type-badge]: https://img.shields.io/npm/types/react-data-grid
|
|
14
|
+
[codecov-badge]: https://codecov.io/gh/adazzle/react-data-grid/branch/main/graph/badge.svg?token=cvrRSWiz0Q
|
|
15
|
+
[codecov-url]: https://app.codecov.io/gh/adazzle/react-data-grid/branch/main
|
|
16
|
+
[ci-badge]: https://github.com/adazzle/react-data-grid/workflows/CI/badge.svg
|
|
17
|
+
[ci-url]: https://github.com/adazzle/react-data-grid/actions
|
|
18
|
+
|
|
19
|
+
## Features
|
|
20
|
+
|
|
21
|
+
- [React 16.14+ & 17.0+](package.json) support
|
|
22
|
+
- [Evergreen browsers and server-side rendering](browserslist) support
|
|
23
|
+
- Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim
|
|
24
|
+
- Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
|
|
25
|
+
- Strictly typed with TypeScript
|
|
26
|
+
- [Keyboard accessibility](<(https://adazzle.github.io/react-data-grid/#/common-features)>)
|
|
27
|
+
- Light and dark mode support out of the box. The light or dark themes can be enforced using the `rdg-light` or `rdg-dark` classes.
|
|
28
|
+
- [Frozen columns](https://adazzle.github.io/react-data-grid/#/common-features)
|
|
29
|
+
- [Column resizing](https://adazzle.github.io/react-data-grid/#/common-features)
|
|
30
|
+
- [Multi-column sorting](https://adazzle.github.io/react-data-grid/#/common-features)
|
|
31
|
+
- Click on a sortable column header to toggle between its ascending/descending sort order
|
|
32
|
+
- Ctrl+Click / Meta+Click to sort an additional column
|
|
33
|
+
- [Column spanning](https://adazzle.github.io/react-data-grid/#/column-spanning)
|
|
34
|
+
- [Row selection](https://adazzle.github.io/react-data-grid/#/common-features)
|
|
35
|
+
- [Row grouping](https://adazzle.github.io/react-data-grid/#/grouping)
|
|
36
|
+
- [Summary rows](https://adazzle.github.io/react-data-grid/#/common-features)
|
|
37
|
+
- [Dynamic row heights](https://adazzle.github.io/react-data-grid/#/variable-row-height)
|
|
38
|
+
- [No rows fallback](https://adazzle.github.io/react-data-grid/#/no-rows)
|
|
39
|
+
- [Cell formatting](https://adazzle.github.io/react-data-grid/#/common-features)
|
|
40
|
+
- [Cell editing](https://adazzle.github.io/react-data-grid/#/common-features)
|
|
41
|
+
- [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/all-features)
|
|
42
|
+
- [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/all-features)
|
|
43
|
+
|
|
44
|
+
## Links
|
|
45
|
+
|
|
46
|
+
- [Examples website](https://adazzle.github.io/react-data-grid/)
|
|
47
|
+
- [Source code](website)
|
|
48
|
+
- [Old website for react-data-grid v6](https://adazzle.github.io/react-data-grid/old/)
|
|
49
|
+
- [Changelog](CHANGELOG.md)
|
|
50
|
+
- [Contributing](CONTRIBUTING.md)
|
|
51
|
+
|
|
52
|
+
## Install
|
|
53
|
+
|
|
54
|
+
```sh
|
|
55
|
+
npm install react-data-grid
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
`react-data-grid` is published as ECMAScript modules for evergreen browsers / bundlers, and CommonJS for server-side rendering / Jest.
|
|
59
|
+
|
|
60
|
+
## Quick start
|
|
61
|
+
|
|
62
|
+
```jsx
|
|
63
|
+
import DataGrid from 'react-data-grid';
|
|
64
|
+
|
|
65
|
+
const columns = [
|
|
66
|
+
{ key: 'id', name: 'ID' },
|
|
67
|
+
{ key: 'title', name: 'Title' }
|
|
68
|
+
];
|
|
69
|
+
|
|
70
|
+
const rows = [
|
|
71
|
+
{ id: 0, title: 'Example' },
|
|
72
|
+
{ id: 1, title: 'Demo' }
|
|
73
|
+
];
|
|
74
|
+
|
|
75
|
+
function App() {
|
|
76
|
+
return <DataGrid columns={columns} rows={rows} />;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## API
|
|
81
|
+
|
|
82
|
+
### Components
|
|
83
|
+
|
|
84
|
+
#### `<DataGrid />`
|
|
85
|
+
|
|
86
|
+
##### Props
|
|
87
|
+
|
|
88
|
+
###### `columns: readonly Column<R, SR>[]`
|
|
89
|
+
|
|
90
|
+
See [`Column`](#column).
|
|
91
|
+
|
|
92
|
+
An array describing the grid's columns.
|
|
93
|
+
|
|
94
|
+
:warning: Passing a new `columns` array will trigger a re-render for the whole grid, avoid changing it as much as possible for optimal performance.
|
|
95
|
+
|
|
96
|
+
###### `rows: readonly R[]`
|
|
97
|
+
|
|
98
|
+
An array of rows, the rows data can be of any type.
|
|
99
|
+
|
|
100
|
+
###### `summaryRows?: Maybe<readonly SR[]>`
|
|
101
|
+
|
|
102
|
+
An optional array of summary rows, usually used to display total values for example.
|
|
103
|
+
|
|
104
|
+
###### `rowKeyGetter?: Maybe<(row: R) => K>`
|
|
105
|
+
|
|
106
|
+
A function returning a unique key/identifier per row. `rowKeyGetter` is required for row selection to work.
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import DataGrid from 'react-data-grid';
|
|
110
|
+
|
|
111
|
+
interface Row {
|
|
112
|
+
id: number;
|
|
113
|
+
name: string;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
function rowKeyGetter(row: Row) {
|
|
117
|
+
return row.id;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function MyGrid() {
|
|
121
|
+
return <DataGrid columns={columns} rows={rows} rowKeyGetter={rowKeyGetter} />;
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
:bulb: While optional, setting this prop is recommended for optimal performance as the returned value is used to set the `key` prop on the row elements.
|
|
126
|
+
|
|
127
|
+
###### `onRowsChange?: Maybe<(rows: R[], data: RowsChangeData<R, SR>) => void>`
|
|
128
|
+
|
|
129
|
+
A function receiving row updates.
|
|
130
|
+
The first parameter is a new rows array with both the updated rows and the other untouched rows.
|
|
131
|
+
The second parameter is an object with an `indexes` array highlighting which rows have changed by their index, and the `column` where the change happened.
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
import { useState } from 'react';
|
|
135
|
+
import DataGrid from 'react-data-grid';
|
|
136
|
+
|
|
137
|
+
function MyGrid() {
|
|
138
|
+
const [rows, setRows] = useState(initialRows);
|
|
139
|
+
|
|
140
|
+
return <DataGrid columns={columns} rows={rows} onRowsChange={setRows} />;
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
###### `rowHeight?: Maybe<number | ((args: RowHeightArgs<R>) => number)>`
|
|
145
|
+
|
|
146
|
+
**Default:** `35` pixels
|
|
147
|
+
|
|
148
|
+
Either a number defining the height of row in pixels, or a function returning dynamic row heights.
|
|
149
|
+
|
|
150
|
+
###### `headerRowHeight?: Maybe<number>`
|
|
151
|
+
|
|
152
|
+
**Default:** `35` pixels
|
|
153
|
+
|
|
154
|
+
A number defining the height of the header row.
|
|
155
|
+
|
|
156
|
+
###### `summaryRowHeight?: Maybe<number>`
|
|
157
|
+
|
|
158
|
+
**Default:** `35` pixels
|
|
159
|
+
|
|
160
|
+
A number defining the height of summary rows.
|
|
161
|
+
|
|
162
|
+
###### `selectedRows?: Maybe<ReadonlySet<K>>`
|
|
163
|
+
|
|
164
|
+
###### `onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>`
|
|
165
|
+
|
|
166
|
+
###### `sortColumns?: Maybe<readonly SortColumn[]>`
|
|
167
|
+
|
|
168
|
+
###### `onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>`
|
|
169
|
+
|
|
170
|
+
###### `defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>`
|
|
171
|
+
|
|
172
|
+
###### `groupBy?: Maybe<readonly string[]>`
|
|
173
|
+
|
|
174
|
+
###### `rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record<string, readonly R[]>>`
|
|
175
|
+
|
|
176
|
+
###### `expandedGroupIds?: Maybe<ReadonlySet<unknown>>`
|
|
177
|
+
|
|
178
|
+
###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set<unknown>) => void>`
|
|
179
|
+
|
|
180
|
+
###### `onFill?: Maybe<(event: FillEvent<R>) => R>`
|
|
181
|
+
|
|
182
|
+
###### `onPaste?: Maybe<(event: PasteEvent<R>) => R>`
|
|
183
|
+
|
|
184
|
+
###### `onRowClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>`
|
|
185
|
+
|
|
186
|
+
###### `onRowDoubleClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>`
|
|
187
|
+
|
|
188
|
+
###### `onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>`
|
|
189
|
+
|
|
190
|
+
###### `onColumnResize?: Maybe<(idx: number, width: number) => void>`
|
|
191
|
+
|
|
192
|
+
###### `cellNavigationMode?: Maybe<CellNavigationMode>`
|
|
193
|
+
|
|
194
|
+
###### `enableVirtualization?: Maybe<boolean>`
|
|
195
|
+
|
|
196
|
+
###### <span name="rowRenderer">`rowRenderer?: Maybe<React.ComponentType<RowRendererProps<R, SR>>>`</span>
|
|
197
|
+
|
|
198
|
+
The default `<Row />` component can be wrapped via the `rowRenderer` prop to add context providers or tweak props for example.
|
|
199
|
+
|
|
200
|
+
```tsx
|
|
201
|
+
import DataGrid, { Row, RowRendererProps } from 'react-data-grid';
|
|
202
|
+
|
|
203
|
+
function MyRowRenderer(props: RowRendererProps<Row>) {
|
|
204
|
+
return (
|
|
205
|
+
<MyContext.Provider value={123}>
|
|
206
|
+
<Row {...props} />
|
|
207
|
+
</MyContext.Provider>
|
|
208
|
+
);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
function MyGrid() {
|
|
212
|
+
return <DataGrid columns={columns} rows={rows} rowRenderer={MyRowRenderer} />;
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
:warning: To prevent all rows from being unmounted on re-renders, make sure to pass a static or memoized component to `rowRenderer`.
|
|
217
|
+
|
|
218
|
+
###### `noRowsFallback?: React.ReactNode`
|
|
219
|
+
|
|
220
|
+
###### `rowClass?: Maybe<(row: R) => Maybe<string>>`
|
|
221
|
+
|
|
222
|
+
###### `className?: string | undefined`
|
|
223
|
+
|
|
224
|
+
###### `style?: CSSProperties | undefined`
|
|
225
|
+
|
|
226
|
+
###### `'aria-label'?: string | undefined`
|
|
227
|
+
|
|
228
|
+
###### `'aria-labelledby'?: string | undefined`
|
|
229
|
+
|
|
230
|
+
###### `'aria-describedby'?: string | undefined`
|
|
231
|
+
|
|
232
|
+
###### `'data-testid'?: Maybe<string>`
|
|
233
|
+
|
|
234
|
+
#### `<TextEditor />`
|
|
235
|
+
|
|
236
|
+
##### Props
|
|
237
|
+
|
|
238
|
+
See [`EditorProps`](#editorprops)
|
|
239
|
+
|
|
240
|
+
#### `<Row />`
|
|
241
|
+
|
|
242
|
+
See [`rowRenderer`](#rowRenderer)
|
|
243
|
+
|
|
244
|
+
##### Props
|
|
245
|
+
|
|
246
|
+
See [`RowRendererProps`](#rowrendererprops)
|
|
247
|
+
|
|
248
|
+
The `ref` prop is supported.
|
|
249
|
+
|
|
250
|
+
#### `<SortableHeaderCell />`
|
|
251
|
+
|
|
252
|
+
##### Props
|
|
253
|
+
|
|
254
|
+
###### `onSort: (ctrlClick: boolean) => void`
|
|
255
|
+
|
|
256
|
+
###### `sortDirection: SortDirection | undefined`
|
|
257
|
+
|
|
258
|
+
###### `priority: number | undefined`
|
|
259
|
+
|
|
260
|
+
###### `isCellSelected: boolean`
|
|
261
|
+
|
|
262
|
+
###### `children: React.ReactNode`
|
|
263
|
+
|
|
264
|
+
#### `<ValueFormatter />`
|
|
265
|
+
|
|
266
|
+
##### Props
|
|
267
|
+
|
|
268
|
+
See [`FormatterProps`](#formatterprops)
|
|
269
|
+
|
|
270
|
+
#### `<SelectCellFormatter />`
|
|
271
|
+
|
|
272
|
+
##### Props
|
|
273
|
+
|
|
274
|
+
###### `value: boolean`
|
|
275
|
+
|
|
276
|
+
###### `isCellSelected: boolean`
|
|
277
|
+
|
|
278
|
+
###### `disabled?: boolean | undefined`
|
|
279
|
+
|
|
280
|
+
###### `onChange: (value: boolean, isShiftClick: boolean) => void`
|
|
281
|
+
|
|
282
|
+
###### `onClick?: MouseEventHandler<T> | undefined`
|
|
283
|
+
|
|
284
|
+
###### `'aria-label'?: string | undefined`
|
|
285
|
+
|
|
286
|
+
###### `'aria-labelledby'?: string | undefined`
|
|
287
|
+
|
|
288
|
+
#### `<ToggleGroupFormatter />`
|
|
289
|
+
|
|
290
|
+
##### Props
|
|
291
|
+
|
|
292
|
+
See [`GroupFormatterProps`](#groupformatterprops)
|
|
293
|
+
|
|
294
|
+
### Hooks
|
|
295
|
+
|
|
296
|
+
#### `useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void]`
|
|
297
|
+
|
|
298
|
+
### Other
|
|
299
|
+
|
|
300
|
+
#### `SelectColumn: Column<any, any>`
|
|
301
|
+
|
|
302
|
+
#### `SELECT_COLUMN_KEY = 'select-row'`
|
|
303
|
+
|
|
304
|
+
### Types
|
|
305
|
+
|
|
306
|
+
#### `Column`
|
|
307
|
+
|
|
308
|
+
#### `DataGridHandle`
|
|
309
|
+
|
|
310
|
+
#### `EditorProps`
|
|
311
|
+
|
|
312
|
+
#### `FormatterProps`
|
|
313
|
+
|
|
314
|
+
#### `GroupFormatterProps`
|
|
315
|
+
|
|
316
|
+
#### `RowRendererProps`
|
|
317
|
+
|
|
318
|
+
### Generics
|
|
319
|
+
|
|
320
|
+
- `R`, `TRow`: Row type
|
|
321
|
+
- `SR`, `TSummaryRow`: Summary row type
|
|
322
|
+
- `K`: Row key type
|