gridjs-spreadsheet 23.3.3 → 23.4.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/index.d.ts ADDED
@@ -0,0 +1,199 @@
1
+ declare module 'gridjs-spreadsheet' {
2
+ export interface Options {
3
+ mode?: 'edit' | 'read';
4
+ showToolbar?: boolean;
5
+ showGrid?: boolean;
6
+ showContextmenu?: boolean;
7
+ showFileName?: boolean;
8
+ local?:string;
9
+ view?: {
10
+ height: () => number;
11
+ width: () => number;
12
+ };
13
+ row?: {
14
+ len: number;
15
+ height: number;
16
+ };
17
+ col?: {
18
+ len: number;
19
+ width: number;
20
+ indexWidth: number;
21
+ minWidth: number;
22
+ };
23
+ style?: {
24
+ bgcolor: string;
25
+ align: 'left' | 'center' | 'right';
26
+ valign: 'top' | 'middle' | 'bottom';
27
+ textwrap: boolean;
28
+ strike: boolean;
29
+ underline: boolean;
30
+ color: string;
31
+ font: {
32
+ name: 'Helvetica';
33
+ size: number;
34
+ bold: boolean;
35
+ italic: false;
36
+ };
37
+ };
38
+ }
39
+
40
+ export type CELL_SELECTED = 'cell-selected';
41
+ export type CELLS_SELECTED = 'cells-selected';
42
+ export type CELL_EDITED = 'cell-edited';
43
+
44
+ export type CellMerge = [number, number];
45
+
46
+ export interface SpreadsheetEventHandler {
47
+ (
48
+ envt: CELL_SELECTED,
49
+ callback: (cell: Cell, rowIndex: number, colIndex: number) => void
50
+ ): void;
51
+ (
52
+ envt: CELLS_SELECTED,
53
+ callback: (
54
+ cell: Cell,
55
+ parameters: { sri: number; sci: number; eri: number; eci: number }
56
+ ) => void
57
+ ): void;
58
+ (
59
+ evnt: CELL_EDITED,
60
+ callback: (text: string, rowIndex: number, colIndex: number) => void
61
+ ): void;
62
+ }
63
+
64
+ export interface ColProperties {
65
+ width?: number;
66
+ }
67
+
68
+ /**
69
+ * Data for representing a cell
70
+ */
71
+ export interface CellData {
72
+ text: string;
73
+ style?: number;
74
+ merge?: CellMerge;
75
+ }
76
+ /**
77
+ * Data for representing a row
78
+ */
79
+ export interface RowData {
80
+ cells: {
81
+ [key: number]: CellData;
82
+ }
83
+ }
84
+
85
+ /**
86
+ * Data for representing a sheet
87
+ */
88
+ export interface SheetData {
89
+ name?: string;
90
+ freeze?: string;
91
+ styles?: CellStyle[];
92
+ merges?: string[];
93
+ cols?: {
94
+ len?: number;
95
+ [key: number]: ColProperties;
96
+ };
97
+ rows?: {
98
+ [key: number]: RowData
99
+ };
100
+ }
101
+
102
+ /**
103
+ * Data for representing a spreadsheet
104
+ */
105
+ export interface SpreadsheetData {
106
+ [index: number]: SheetData;
107
+ }
108
+
109
+ export interface CellStyle {
110
+ align?: 'left' | 'center' | 'right';
111
+ valign?: 'top' | 'middle' | 'bottom';
112
+ font?: {
113
+ bold?: boolean;
114
+ }
115
+ bgcolor?: string;
116
+ textwrap?: boolean;
117
+ color?: string;
118
+ border?: {
119
+ top?: string[];
120
+ right?: string[];
121
+ bottom?: string[];
122
+ left?: string[];
123
+ };
124
+ }
125
+ export interface Editor {}
126
+ export interface Element {}
127
+
128
+ export interface Row {}
129
+ export interface Table {}
130
+ export interface Cell {}
131
+ export interface Sheet {}
132
+
133
+ export default class Spreadsheet {
134
+ constructor(container: string | HTMLElement, opts?: Options);
135
+ on: SpreadsheetEventHandler;
136
+ /**
137
+ * retrieve cell
138
+ * @param rowIndex {number} row index
139
+ * @param colIndex {number} column index
140
+ * @param sheetIndex {number} sheet iindex
141
+ */
142
+ cell(rowIndex: number, colIndex: number, sheetIndex: number): Cell;
143
+ /**
144
+ * retrieve cell style
145
+ * @param rowIndex
146
+ * @param colIndex
147
+ * @param sheetIndex
148
+ */
149
+ cellStyle(
150
+ rowIndex: number,
151
+ colIndex: number,
152
+ sheetIndex: number
153
+ ): CellStyle;
154
+ /**
155
+ * get/set cell text
156
+ * @param rowIndex
157
+ * @param colIndex
158
+ * @param text
159
+ * @param sheetIndex
160
+ */
161
+ cellText(
162
+ rowIndex: number,
163
+ colIndex: number,
164
+ text: string,
165
+ sheetIndex?: number
166
+ ): string;
167
+ /**
168
+ * remove current sheet
169
+ */
170
+ deleteSheet(): void;
171
+
172
+ /**
173
+ * load data
174
+ * @param json
175
+ */
176
+ loadData(json: Record<string, any>): void;
177
+ /**
178
+ * get data
179
+ */
180
+ getData(): Record<string, any>;
181
+ /**
182
+ * bind handler to change event, including data change and user actions
183
+ * @param callback
184
+ */
185
+ change(callback: (json: Record<string, any>) => void): void;
186
+ /**
187
+ * set locale
188
+ * @param lang
189
+ * @param message
190
+ */
191
+ locale(lang: string, message: string): void;
192
+ }
193
+ global {
194
+ interface Window {
195
+ x_spreadsheet(container: string | HTMLElement, opts?: Options): Spreadsheet;
196
+ }
197
+ }
198
+ }
199
+
package/index.js ADDED
@@ -0,0 +1 @@
1
+ module.exports = require('./xspreadsheet.js');
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "gridjs-spreadsheet",
3
- "version": "23.3.3",
4
- "description": "A simple library allows you to view and edit spreadsheet documents with ease.",
5
- "main": "xspreadsheet.js",
3
+ "version": "23.4.1",
4
+ "description": "A smart and simple to use Excel-like JavaScript Spreadsheet library allows you to view and edit spreadsheet file with ease and quick.",
5
+ "types": "index.d.ts",
6
+ "main": "index.js",
6
7
  "scripts": {
7
8
  "test": "echo \"Error: no test specified\" && exit 1"
8
9
  },
9
10
  "keywords": [
10
- "Excel",
11
11
  "XLS",
12
12
  "XLSX",
13
13
  "XLSB",
@@ -30,8 +30,17 @@
30
30
  "SVG",
31
31
  "JSON",
32
32
  "SQL",
33
- "XML"
33
+ "XML",
34
+ "Online excel",
35
+ "spread-sheets",
36
+ "javascript spreadsheet",
37
+ "javascript excel",
38
+ "excel io",
39
+ "sheets",
40
+ "sheet",
41
+ "javascript",
42
+ "excel"
34
43
  ],
35
- "author": "Aspose",
44
+ "author": "Aspose Cells Team",
36
45
  "license": "MIT"
37
46
  }
package/readme.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # gridjs-spreadsheet
2
2
 
3
- > A web-based JavaScript spreadsheet for GridJs client side
3
+ > A smart and simple to use Excel-like JavaScript Canvas based Spreadsheet library allows you to view and edit spreadsheet file with ease and quick
4
4
 
5
5
 
6
6
 
@@ -19,8 +19,8 @@
19
19
  <script src="https://unpkg.com/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
20
20
  <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
21
21
  <!-- other dependency end -->
22
- <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@23.3.0/xspreadsheet.css">
23
- <script src="https://unpkg.com/gridjs-spreadsheet@23.3.0/xspreadsheet.js"></script>
22
+ <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@23.4.0/xspreadsheet.css">
23
+ <script src="https://unpkg.com/gridjs-spreadsheet@23.4.0/xspreadsheet.js"></script>
24
24
 
25
25
  <script>
26
26
  const option = {
@@ -29,7 +29,7 @@
29
29
  showToolbar: true,
30
30
  //mode: 'edit' or 'read'
31
31
  mode: 'read',
32
- //support multiple language ,the locale is: en zh es pt de ru nl
32
+ //support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
33
33
  local: 'en',
34
34
  };
35
35
  const sheetstr="[{\"name\":\"Sheet1\",\"sheetid\":\"s0\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"styles\":[{\"textwrap\":true,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}},{\"textwrap\":false,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}}],\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":532},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"3\":{\"height\":122,\"cells\":{\"2\":{\"text\":\"FFF呜呜呜\\n呜我 我我我我\\nnice wwwwww\\nexample work 测的的的的的的的到\\n到手 一级 一季报 击败发发发发发发发发发发发\",\"style\":0,\"rtxt\":[{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"F\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"italic\":false},\"txt\":\"FF呜\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"\\n呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#0070C0\",\"italic\":false},\"txt\":\"我 我我\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"我我\\nni\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":true,\"color\":\"#C00000\",\"italic\":true},\"txt\":\"ce wwwwww\\nexample\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\" work \"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"italic\":false},\"txt\":\"测的的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"的到\\n到手 \"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"一级 一季\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"报 击败发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#9BBB59\",\"italic\":false},\"txt\":\"发发发发发发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"发发发发\"}],\"html\":\"<Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">F</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">FF呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\"><Br>呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #0070c0;\\\">我 我我</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">我我<Br>ni</Font><Font Style=\\\"FONT-WEIGHT: bold;FONT-STYLE: italic;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c00000;\\\">ce wwwwww<Br>example</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">&nbsp;work </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">测的的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的到<Br>到手 </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #000000;\\\">一级 一季</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">报 击败发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #9bbb59;\\\">发发发发发发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">发发发发</Font>\"},\"4\":{\"text\":\"\",\"style\":1}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet2\",\"sheetid\":\"s1\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet3\",\"sheetid\":\"s2\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}}]";
@@ -44,6 +44,31 @@
44
44
  </body>
45
45
  ```
46
46
 
47
+ ## NPM
48
+
49
+ ```shell
50
+ npm install gridjs-spreadsheet
51
+ ```
52
+
53
+ ```html
54
+ <div id="gridjs-demo"></div>
55
+ ```
56
+
57
+ ```javascript
58
+ import Spreadsheet from "gridjs-spreadsheet";
59
+ // If you need to override the default options, you can set the override
60
+ // const options = {};
61
+ // new Spreadsheet('#gridjs-demo', options);
62
+ const s = new Spreadsheet("#gridjs-demo")
63
+ .loadData({}) // load data
64
+ .change(data => {
65
+ // save data to db
66
+ });
67
+
68
+ // data validation
69
+ s.validate()
70
+ ```
71
+
47
72
 
48
73
  ## simple usage
49
74
 
@@ -56,7 +81,7 @@
56
81
  showToolbar: true,
57
82
  //mode: 'edit' or 'read'
58
83
  mode: 'read',
59
- //support multiple language ,the locale is: en zh es pt de ru nl
84
+ //support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
60
85
  local: 'en',
61
86
  };
62
87
 
@@ -135,41 +160,47 @@ xs.cellStyle(ri, ci);
135
160
 
136
161
 
137
162
  ## Features
163
+ - Localization/Multiple language UI
138
164
  - Paint format
139
165
  - Clear format
140
166
  - Format
141
- - Font
142
- - Font size
143
- - Font bold
144
- - Font italic
145
- - Underline
146
- - Strike
167
+ - Font/Font size/ bold/italic/Underline/Strike
147
168
  - Highlight
148
169
  - Shape/Image resize/rotate/position ajustment
149
- - Text color
170
+ - Text color/Align/wrapping
150
171
  - Fill color
172
+ - RichText
151
173
  - Borders
152
174
  - Merge cells
153
- - Align
154
- - Text wrapping
155
175
  - Freeze cell
156
- - Functions
157
- - Resize row-height, col-width
158
176
  - Copy, Cut, Paste
159
177
  - Autofill
160
- - Insert row, column
161
- - Delete row, column
162
- - hide row, column
163
- - multiple sheets
164
- - print
178
+ - Insert/Delete row, column
179
+ - Filter row, column
180
+ - Zoom in/out
181
+ - Sort
182
+ - Search
183
+ - Formula
184
+ - Resize row-height, col-width
185
+ - Switch/add/delete sheets
186
+ - Condition Format
187
+ - Comment
188
+ - add/delete Links
189
+ - Print
165
190
  - Data validations
191
+ - Insert picture from web page
192
+ - Display chart/shapes
193
+ - Display Form Controls /ActiveX Controls(incoming)
166
194
 
167
195
  ## Demo
168
- for more detail ,please check
169
-
196
+ Visit the GridJs demo to find more detail info
170
197
  https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs
171
-
172
-
198
+ You can ask any question using the [Forum](https://forum.aspose.com/c/cells).
199
+
200
+ ## Documentation
201
+ Online documentation is available here:
202
+ - [Developer's Guide](https://docs.aspose.com/cells/net/aspose-cells-gridjs/)
203
+ - [API Reference](https://docs.aspose.com/cells/net/aspose-cells-gridjs/client/)
173
204
 
174
205
  ## Browser Support
175
206