Full-feature Online Spreadsheet In Vanilla JavaScript – Luckysheet

Luckysheet is an open-source, dependency-free JavaScript library to create a full-featured, Google Sheets-like online spreadsheet app.

It allows you to manipulate tabular data just like you’re running Microsoft Excel app on the web. A full feature list can be found here.

Basic usage:

1. Load the necessary JavaScript and CSS files in the document.

<link rel="stylesheet" href="./plugins/css/pluginsCss.css" />
<link rel="stylesheet" href="./plugins/plugins.css" />
<link rel="stylesheet" href="./css/luckysheet.css" />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

2. Create a container element to hold the spreadsheet.

<div id="luckysheet"></div>

3. Make the spreadsheet fullscreen.

#luckysheet {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

4. Create a new spreadsheet instance and done.

luckysheet.create({
  container: 'luckysheet'
})

5. All default configuration options.

luckysheet.create({
  // container ID
  container: "luckysheet",
  // number of columns
  column: 60,
  // number or rows
  row: 84,
  // enables copy to clipboard
  allowCopy: true, 
  // shows toolbar
  showtoolbar: true,
  // shows top bar
  showinfobar: true,
  // shows bottom sheet bar
  showsheetbar: true, 
  // shows statistic bar
  showstatisticBar: true,
  // table options
  pointEdit: false, 
  pointEditUpdate: null, 
  pointEditZoom: 1,
  // default data
  data: [{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1  }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2  }],
  // speadsheet title
  title: "Luckysheet Demo",
  // user info
  userInfo: ' rabbit', 
  // popup menu items
  userMenuItem: [{url:"www.baidu.com", "icon":'', "name":"My Sheet"}, {url:"www.baidu.com", "icon":'', "name":"Exit"}]
  // back button URL
  myFolderUrl: "www.baidu.com",
  // configs of cell height, width, formula, etc.
  config: {},
  // fullscreen mode
  fullscreenmode: true,
  // device pixel ratio
  devicePixelRatio: window.devicePixelRatio,
  // allows the user to edit
  allowEdit: true,
  // load data via AJAX
  loadUrl: "", 
  loadSheetUrl: "", 
  // unique ID
  gridKey: "",
  // update URL
  updateUrl: "",
  // image url
  updateImageUrl: "",
  // allows to update on the back end
  allowUpdate: false,
  // function buttons
  functionButton: "",
  showConfigWindowResize: true, 
  // enables add row
  enableAddRow: true,
  // enables add column
  enableAddCol: true,
  // enables load the next page
  enablePage: false,
  // auto format numbers
  autoFormatw: false,
  // "0" or 0
  accuracy: undefined, 
  pageInfo:{
    'queryExps':'',
    'reportId':'',
    'fields':'',
    'mobile':'',
    'frezon':'',
    'currentPage':'',
    "totalPage":10,
    "pageUrl":"",
  },
  // is edit mode
  editMode: false,
  // custom functions
  chartConfigChange: null,
  beforeCreateDom: null,
  fireMousedown: null,
  // language
  lang: 'en',
  //plugins, e.g. ['chart']
  plugins: []
})

6. For advanced usage, check out the documentation site for information.

Changelog:

v2.1.11 (12/19/2020)

• Bug Fixes

v2.1.7 (12/03/2020)

• Update

v2.1.0 (10/11/2020)

• Lots of features added
• Bugs fixed