Luckysheet | Creating Spreadsheet Like Excel Online with JavaScript

Luckysheet is an open-source and powerful JavaScript excel library, it allows us to create and display data like microsoft excel online.

How to create a spreadsheet online using Luckysheet?

1.Import and load luckysheet js and css files in your html page

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

2.Create a div container element to display the spreadsheet

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

3.You can use css to set the style of div container

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

4.Create a new spreadsheet instance with div containner id.

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

5.You also can create a spreadsheet with more 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: []
})