@candidstartup/react-spreadsheet 0.7.0 → 0.7.1
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 +48 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,4 +1,51 @@
|
|
|
1
|
+
[](https://www.npmjs.com/package/@candidstartup/react-spreadsheet)
|
|
2
|
+
[](https://www.npmjs.com/package/@candidstartup/react-spreadsheet)
|
|
3
|
+
[](https://www.npmjs.com/package/@candidstartup/react-spreadsheet)
|
|
4
|
+
[](https://github.com/TheCandidStartup/infinisheet/actions/workflows/build.yml)
|
|
5
|
+
|
|
6
|
+
[GitHub](https://github.com/TheCandidStartup/infinisheet/tree/main/packages/react-spreadsheet) | [NPM](https://www.npmjs.com/package/@candidstartup/react-spreadsheet) | [Storybook](https://www.thecandidstartup.org/infinisheet/storybook/?path=/docs/react-spreadsheet--docs) | [API](https://www.thecandidstartup.org/infinisheet/modules/_candidstartup_react-spreadsheet.html)
|
|
7
|
+
|
|
1
8
|
# @candidstartup/react-spreadsheet
|
|
2
9
|
|
|
3
|
-
|
|
10
|
+
React based spreadsheet frontend. Written in TypeScript using modern React. Scalable to trillions of rows and columns.
|
|
11
|
+
|
|
12
|
+
## Interface
|
|
13
|
+
|
|
14
|
+
The package provides a combined `VirtualSpreadsheet` component that includes a spreadsheet grid, row and column headers and input bar. The component is virtualized with data retrieved on demand via a `SpreadsheetData` interface. The component supports data sources that change independently.
|
|
15
|
+
|
|
16
|
+
The package includes `VirtualSpreadsheet.css` which provides basic styling using the BEM convention. The stylesheet can be imported directly or as a CSS module for isolation. Use your own CSS if you prefer.
|
|
17
|
+
|
|
18
|
+
A [theming system](https://www.thecandidstartup.org/2024/08/26/css-react-components.html) allows you to map the component's local BEM style class names to whatever class names the consuming app would like to use. This allows you to use `VirtualSpreadsheet` with other CSS conventions, Atomic CSS, or CSS in JS.
|
|
19
|
+
|
|
20
|
+
`VirtualSpreadsheet` can be combined with `AutoSizer` from [react-virtual-scroll](https://github.com/TheCandidStartup/infinisheet/tree/main/packages/react-virtual-scroll) to fill the available space.
|
|
21
|
+
|
|
22
|
+
## Implementation
|
|
23
|
+
|
|
24
|
+
`VirtualSpreadsheet` is built using components from the [react-virtual-scroll](https://github.com/TheCandidStartup/infinisheet/tree/main/packages/react-virtual-scroll) package. It uses [numfmt](https://github.com/borgar/numfmt) for ECMA-376 compatible number formatting.
|
|
25
|
+
|
|
26
|
+
## VirtualSpreadsheet Example
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { VirtualSpreadsheet, VirtualSpreadsheetDefaultTheme as theme } from '@candidstartup/react-spreadsheet';
|
|
30
|
+
import '@candidstartup/react-spreadsheet/VirtualSpreadsheet.css';
|
|
31
|
+
import { BoringData } from './BoringData';
|
|
32
|
+
|
|
33
|
+
const data = new BoringData;
|
|
34
|
+
|
|
35
|
+
...
|
|
36
|
+
|
|
37
|
+
<VirtualSpreadsheet
|
|
38
|
+
data={data}
|
|
39
|
+
theme={theme}
|
|
40
|
+
height={380}
|
|
41
|
+
width={700}>
|
|
42
|
+
</VirtualSpreadsheet>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Check out the [full sample](https://github.com/TheCandidStartup/infinisheet/blob/main/apps/spreadsheet-sample/src/App.tsx) or [try it out on Storybook](https://www.thecandidstartup.org/infinisheet/storybook/?path=/story/react-spreadsheet-virtualspreadsheet--boring-data)
|
|
46
|
+
|
|
47
|
+
# More
|
|
48
|
+
|
|
49
|
+
Want to know more? Check out my [blog](https://www.thecandidstartup.org/topics/react-spreadsheet.html)
|
|
50
|
+
|
|
4
51
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@candidstartup/react-spreadsheet",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.7.
|
|
4
|
+
"version": "0.7.1",
|
|
5
5
|
"description": "Modern React Spreadsheet Frontend",
|
|
6
6
|
"author": "Tim Wiegand <tim.wiegand@thecandidstartup.org>",
|
|
7
7
|
"license": "BSD-3-Clause",
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"react": "^18.2.0"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@candidstartup/infinisheet-types": "^0.7.
|
|
62
|
-
"@candidstartup/react-virtual-scroll": "^0.7.
|
|
61
|
+
"@candidstartup/infinisheet-types": "^0.7.1",
|
|
62
|
+
"@candidstartup/react-virtual-scroll": "^0.7.1",
|
|
63
63
|
"numfmt": "^3.1.2"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "4562f19bca50106d58aba0c76abe7d09267e0c5d"
|
|
66
66
|
}
|