wms-spreadsheet 0.1.0 → 0.2.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 +15 -15
- package/dist/index.d.ts +7 -2
- package/dist/index.js +2483 -2326
- package/dist/spreadsheet.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# wms-spreadsheet
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React Spreadsheet library — Google Sheets-like UI, smoothly handles **10,000+ rows** via a virtual window.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install wms-spreadsheet
|
|
9
|
-
#
|
|
9
|
+
# or
|
|
10
10
|
pnpm add wms-spreadsheet
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
**Peer dependencies:** `react`
|
|
13
|
+
**Peer dependencies:** `react` and `react-dom` (^18 or ^19).
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Quick start
|
|
16
16
|
|
|
17
17
|
```tsx
|
|
18
18
|
import { useRef } from "react";
|
|
@@ -24,9 +24,9 @@ import {
|
|
|
24
24
|
import "wms-spreadsheet/style.css";
|
|
25
25
|
|
|
26
26
|
const COLUMNS: ISpreadsheetColumn[] = [
|
|
27
|
-
{ colName: "sku", colText: "
|
|
28
|
-
{ colName: "qty", colText: "
|
|
29
|
-
{ colName: "active", colText: "
|
|
27
|
+
{ colName: "sku", colText: "SKU", width: 120, showFilter: true },
|
|
28
|
+
{ colName: "qty", colText: "Qty", width: 80 },
|
|
29
|
+
{ colName: "active", colText: "Active", width: 90, meta: { type: "switch" } },
|
|
30
30
|
];
|
|
31
31
|
|
|
32
32
|
const INITIAL_DATA = [
|
|
@@ -50,17 +50,17 @@ function App() {
|
|
|
50
50
|
}
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
##
|
|
53
|
+
## Features
|
|
54
54
|
|
|
55
|
-
-
|
|
56
|
-
- API
|
|
55
|
+
- Two-dimensional virtual window — only renders cells in the viewport
|
|
56
|
+
- Imperative API via `ref` — `setCellValue`, `loadData`, `mergeCells`, …
|
|
57
57
|
- Cell types: `text`, `select`, `multiSelect`, `boolean`, `switch`, `date`, `custom`
|
|
58
|
-
- Copy/paste range (Ctrl+C / Ctrl+V), filter & sort
|
|
59
|
-
- Merge cells, resize
|
|
58
|
+
- Copy/paste range (Ctrl+C / Ctrl+V), column filter & sort, frozen columns
|
|
59
|
+
- Merge cells, column/row resize, internationalization (`locale` prop)
|
|
60
60
|
|
|
61
|
-
##
|
|
61
|
+
## Full documentation
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
See the [README on GitHub](https://github.com/truongnguyen5x/wms-spreadsheet#readme) for ref API, cell meta, custom cells, locale, error handling, and more.
|
|
64
64
|
|
|
65
65
|
## License
|
|
66
66
|
|
package/dist/index.d.ts
CHANGED
|
@@ -71,6 +71,10 @@ export declare interface ICellMeta {
|
|
|
71
71
|
minDate?: string;
|
|
72
72
|
/** Ngày muộn nhất được chọn (chuỗi theo dateFormat của cell/cột) */
|
|
73
73
|
maxDate?: string;
|
|
74
|
+
/** Giá trị tối đa được nhập (số không âm) */
|
|
75
|
+
maxValue?: number;
|
|
76
|
+
/** Số chữ số thập phân. Mặc định 0 (số nguyên) */
|
|
77
|
+
decimalPlaces?: number;
|
|
74
78
|
customKey?: string;
|
|
75
79
|
customProps?: Record<string, unknown>;
|
|
76
80
|
invalid?: boolean;
|
|
@@ -264,7 +268,7 @@ export declare interface ISpreadsheetRef {
|
|
|
264
268
|
getCellMeta(row: number, col: number | null, colName?: string): ICellMeta;
|
|
265
269
|
setCellsMeta(cells: ICellMetaInput[]): void;
|
|
266
270
|
mergeCells(range?: INormalizedRange): boolean;
|
|
267
|
-
unmergeCells(
|
|
271
|
+
unmergeCells(range?: INormalizedRange): boolean;
|
|
268
272
|
getMergedRanges(): IMergedRange[];
|
|
269
273
|
hasMergedCells(): boolean;
|
|
270
274
|
}
|
|
@@ -291,6 +295,7 @@ export declare class MergeStore {
|
|
|
291
295
|
canMerge(range: INormalizedRange): boolean;
|
|
292
296
|
merge(range: INormalizedRange, store: CellStore, metaStore: MetaStore): boolean;
|
|
293
297
|
unmerge(row: number, col: number): boolean;
|
|
298
|
+
unmergeInRange(range: INormalizedRange): number;
|
|
294
299
|
clear(): void;
|
|
295
300
|
}
|
|
296
301
|
|
|
@@ -310,7 +315,7 @@ export declare const ROW_HEADER_WIDTH = 46;
|
|
|
310
315
|
|
|
311
316
|
export declare const Spreadsheet: ForwardRefExoticComponent<ISpreadsheetProps & RefAttributes<ISpreadsheetRef>>;
|
|
312
317
|
|
|
313
|
-
export declare type TCellType = "text" | "select" | "multiSelect" | "boolean" | "switch" | "date" | "custom";
|
|
318
|
+
export declare type TCellType = "text" | "select" | "multiSelect" | "boolean" | "switch" | "date" | "number" | "custom";
|
|
314
319
|
|
|
315
320
|
export declare type TCellValue = string | string[];
|
|
316
321
|
|