# gridjs-spreadsheet
 
> this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs

- [API](#api)
- [Preview](#preview)
- [Github Demos](#github-demos)
- [Features](#features)
- [Documentation](#documentation)
- [Support](#support)
- [License](#license)

## About

 It allows you to view and edit spreadsheet files with ease.

 this is developed based on https://github.com/myliang/x-spreadsheet

 Quick online demo: https://products.aspose.app/cells/editor

## Preview

<img alt='demo' src='https://unpkg.com/gridjs-spreadsheet@25.1.0/preview.gif' />


## API

APIs are available on the [API page](https://docs.aspose.com/cells/net/aspose-cells-gridjs/how-to-use-gridjs-client-api/).
 
## CDN
```html
<head>
<!-- other dependency start -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-ui@1.13.2/dist/themes/ui-lightness/jquery-ui.min.css">
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
<!-- other dependency end -->
<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.js"></script>

<script>
     const option = {
                updateMode: 'server',
                updateUrl: '/GridJs2/UpdateCell',
                showToolbar: true,
                //mode: 'edit' or 'read'
                mode: 'read',
                //support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
                local: 'en',
            };
    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}}]";
    xs = x_spreadsheet('#gridjs-demo', option).loadData(JSON.parse(sheetstr)).change((cdata) => {
                console.log(cdata);
                console.log(xs.validate());
            }
</script>
</head>
   <body>
     <div id="gridjs-demo"></div>
   </body>
```

## NPM

```shell
npm install gridjs-spreadsheet
```

```html
<div id="gridjs-demo"></div>
```

```javascript
//includ all the dependencies 
//Including jszip
import JSZip from 'jszip';
window.JSZip = JSZip;
//Including jQuery
import $ from 'jquery';
window.$ = $;
//Including gridjs-spreadsheet
import 'gridjs-spreadsheet/xspreadsheet.css';
import Spreadsheet from "gridjs-spreadsheet";

// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#gridjs-demo', options);
const s = new Spreadsheet("#gridjs-demo")
  .loadData({}) // load data
  .change(data => {
    // save data to db
  });

 
```


## simple usage

```javascript
 
// If you need to override the default options, you can set the override
 const option = {
                updateMode: 'server',
                updateUrl: '/GridJs2/UpdateCell',
                showToolbar: true,
                //mode: 'edit' or 'read'
                mode: 'read',
                //support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
                local: 'en',
            };
 
 xs = x_spreadsheet('#gridjs-demo', option).loadData(sheets).change((cdata) => {
                console.log(cdata);
                
            }

 
```

```javascript
// default options
{
  mode: 'edit', // edit | read
  showToolbar: true,
  showGrid: true,
  showContextmenu: true,
  view: {
    height: () => document.documentElement.clientHeight,
    width: () => document.documentElement.clientWidth,
  },
  row: {
    len: 100,
    height: 25,
  },
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60,
  },
  style: {
    bgcolor: '#ffffff',
    align: 'left',
    valign: 'middle',
    textwrap: false,
    strike: false,
    underline: false,
    color: '#0a0a0a',
    font: {
      name: 'Helvetica',
      size: 10,
      bold: false,
      italic: false,
    },
  },
}
```

 

## Bind events
```javascript
//single selection
xs.on('cell-selected', (cell, ri, ci) => {});
//range selection
xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
//shape/image selection
xs.on('object-selected', (obj) => {  console.log('obj id:', obj.id, ', type: ', obj.type); })
// edited on cell
xs.on('cell-edited', (text, ri, ci) => {});
// cells updated
xs.on('cells-updated', (name, cells) => {
    console.log('cells updated for sheet name:', name);
    cells.forEach((acell, index, array) => {
        console.log('acell got updated:', acell);
    })
})
// cells deleted
xs.on('cells-deleted', (range) => {
    console.log('cells deleted :', range);
})
// rows deleted
xs.on('rows-deleted', (ri, n) => {
    console.log('rows-deleted :', ri, ",size", n);
})
// columns deleted
xs.on('columns-deleted', (ci, n) => {
    console.log('columns-deleted :', ci, ",size", n);
})
// rows inserted
xs.on('rows-inserted', (ri, n) => {
    console.log('rows-inserted :', ri, ",size", n);
})
// columns inserted
xs.on('columns-inserted', (ci, n) => {
    console.log('columns-inserted :', ci, ",size", n);
})

```

## update cell-text
```javascript
 
// cellText(ri, ci, text, sheetIndex = 0)
xs.cellText(5, 5, 'xxxx',0).cellText(6, 5, 'yyy',0).reRender();
```

## get cell and cell-style
```javascript
 
// cell(ri, ci, sheetIndex = 0)
xs.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
xs.cellStyle(ri, ci);
```
 

## Features

  - Localization/Multiple language UI
  - Paint format
  - Clear format
  - Format
  - Number Format
  - Font/Font size/ bold/italic/Underline/Strike
  - Highlight
  - Shape/Image resize/rotate/position ajustment
  - Text color/Align/wrapping
  - Fill color
  - RichText
  - Borders
  - Merge cells
  - Freeze cell
  - Copy, Cut, Paste
  - Autofill
  - Insert/Delete row, column
  - Filter row, column
  - Zoom in/out 
  - Sort 
  - Search 
  - Formula
  - Resize row-height, col-width
  - Switch/add/delete sheets
  - Condition Format
  - Comment
  - Add/delete Links
  - Print
  - Data validations
  - Insert picture from web page
  - Display chart/shapes
  - Display form controls /activeX controls 
  - Insert/Delete form controls
  - Insert/Delete common shapes for autoshape
  - Support display two colors gradient in fill effects 
  - Mobile compatibility


## Github-Demos

Visit the GridJs demo to find more detail info:

https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs

https://github.com/aspose-cells/Aspose.Cells-for-Java/tree/master/Examples.GridJs

https://github.com/aspose-cells/Aspose.Cells-for-Python-via-.NET/tree/main/Examples_GridJs_Python_Net



## Documentation

Online documentation is available here:

- [Developer's Guide C#](https://docs.aspose.com/cells/net/aspose-cells-gridjs/)
- [API Reference C#](https://docs.aspose.com/cells/net/aspose-cells-gridjs/client/)
- [Developer's Guide Python](https://docs.aspose.com/cells/python-net/aspose-cells-gridjs/)
- [API Reference Python](https://docs.aspose.com/cells/python-net/aspose-cells-gridjs/client/)
- [Developer's Guide JAVA](https://docs.aspose.com/cells/java/aspose-cells-gridjs/)
- [API Reference JAVA](https://docs.aspose.com/cells/java/aspose-cells-gridjs/client/)

## Browser Support

Modern browsers(chrome, firefox, Safari).

## Version History

v24.9.1: 

- Fix bug that fail to insert column in the new added worksheet
- Fix bug that fail to rename worksheet
- Support lazy loading

v24.10:

- Support a view option to show formulas

v24.11:

- improve the display of rich text cell values

v24.12:

- Support API to show HTML nodes and interact with HTML nodes at specified cell positions
- Support pre-check event for row/column delete/insert operations
- Support row/column insert/delete events for client APIs
- Support events for updating cells
- Support multiple instances on one page

v25.1: 

- Support copy/paste from MS-Excel

v25.2: 

- Support copy/paste from MS-Excel
- Enhancement for automatic operations for user’s convenience, such as extending blank row/column, page scrolling, …

v25.3: 

- Support more shotcut keys 
- Support pasting the content copied from excel to multiple target areas

v25.4: 

- Support show statistics information in the lower right corner when cells are selected

v25.5: 

- Add support for Polish menus.
- Support APIs for insert/delete rows/columns

v25.6: 

- Support APIs for resize rows/columns
- Support APIs for hide/unhide rows/columns

v25.7: 

- Support APIs to enable /disable editable range  
- Support APIs to add/modify/delete worksheet  
- Support APIs to add/modify/delete comment 
- Support APIs to set attribute for range of cells
- Support APIs to delete for range of cells

v25.8: 

- Support automatic text wrapping 
- Support API to apply font setting in textbox control 

## License

MIT

## Support

You can ask any question or request features or report bugs using the [Forum](https://forum.aspose.com/c/cells).

[Product Page](https://products.aspose.com/cells) | [Product Documentation](https://docs.aspose.com/cells/net/aspose-cells-gridjs/) | [Blog](https://blog.aspose.com/category/cells/) |[API Reference](https://reference.aspose.com/cells/net/aspose.cells.gridjs/) | [Source Code Samples](https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs) | [Free Support](https://forum.aspose.com/c/cells)  