react-excel-lite 0.2.0 → 0.3.0
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 +45 -1
- package/dist/components/excel-grid.d.ts.map +1 -1
- package/dist/react-excel-lite.js +470 -469
- package/dist/react-excel-lite.umd.cjs +2 -2
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
|
|
9
9
|
A lightweight, Excel-like editable grid component for React.
|
|
10
10
|
|
|
11
|
+
## Demo
|
|
12
|
+
[react-excel-lite-demo](https://prkgnt.github.io/react-excel-lite/)
|
|
13
|
+
|
|
11
14
|
## Features
|
|
12
15
|
|
|
13
16
|
- Excel-like cell selection (click & drag)
|
|
@@ -107,6 +110,47 @@ function App() {
|
|
|
107
110
|
}
|
|
108
111
|
```
|
|
109
112
|
|
|
113
|
+
## Simple Headers (Without Group Labels)
|
|
114
|
+
|
|
115
|
+
When all HeaderGroups have no `label`, the grid displays a single header row/column instead of two levels:
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
const colHeaders: HeaderGroup[] = [
|
|
119
|
+
{
|
|
120
|
+
// No label - single header row
|
|
121
|
+
headers: [
|
|
122
|
+
{ key: "jan", label: "Jan" },
|
|
123
|
+
{ key: "feb", label: "Feb" },
|
|
124
|
+
],
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
headers: [
|
|
128
|
+
{ key: "mar", label: "Mar" },
|
|
129
|
+
{ key: "apr", label: "Apr" },
|
|
130
|
+
],
|
|
131
|
+
},
|
|
132
|
+
];
|
|
133
|
+
|
|
134
|
+
const rowHeaders: HeaderGroup[] = [
|
|
135
|
+
{
|
|
136
|
+
// No label - single header column
|
|
137
|
+
headers: [
|
|
138
|
+
{ key: "row1", label: "Row 1" },
|
|
139
|
+
{ key: "row2", label: "Row 2" },
|
|
140
|
+
],
|
|
141
|
+
},
|
|
142
|
+
];
|
|
143
|
+
|
|
144
|
+
<ExcelGrid
|
|
145
|
+
data={data}
|
|
146
|
+
onChange={setData}
|
|
147
|
+
colHeaders={colHeaders}
|
|
148
|
+
rowHeaders={rowHeaders}
|
|
149
|
+
/>;
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
If at least one group has a `label`, the grid shows the two-level layout (group labels + individual headers).
|
|
153
|
+
|
|
110
154
|
## Styling
|
|
111
155
|
|
|
112
156
|
The component comes with sensible default styles built-in. You can customize styles using the `styles` prop with CSS class strings from any styling solution.
|
|
@@ -289,7 +333,7 @@ interface Header {
|
|
|
289
333
|
}
|
|
290
334
|
|
|
291
335
|
interface HeaderGroup {
|
|
292
|
-
label
|
|
336
|
+
label?: string;
|
|
293
337
|
headers: Header[];
|
|
294
338
|
description?: string;
|
|
295
339
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"excel-grid.d.ts","sourceRoot":"","sources":["../../src/components/excel-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,UAAU,CAAC;AAsE1D,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAmB,EACnB,MAAM,GACP,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"excel-grid.d.ts","sourceRoot":"","sources":["../../src/components/excel-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,UAAU,CAAC;AAsE1D,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAmB,EACnB,MAAM,GACP,EAAE,cAAc,2CAiThB"}
|