Luckysheet: Full-feature Online Spreadsheet In Vanilla JavaScript

Authormengshukeji

Last UpdateSeptember 1, 2026

LicenseMIT

Features

Excel-style cell editing and formatting.
Formulas, conditional formatting, and data validation.
Multiple worksheets with tab management.
Row and column insertion, deletion, hiding, freezing, and resizing.
Sorting, filtering, find and replace, and range selection.
Pivot tables, charts, comments, images, and screenshots.
Copy, paste, cut, undo, redo, and keyboard shortcuts.
Workbook, worksheet, range, and cell APIs.
Hooks for cell changes, selections, sheet actions, and workbook lifecycle.
Remote workbook loading and collaborative update endpoints.

How To Use Luckysheet

1. Load Luckysheet From a CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/css/pluginsCss.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/plugins.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/luckysheet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/iconfont/iconfont.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/luckysheet.umd.js"></script>

2. Create the Spreadsheet Container

Give the Luckysheet container an explicit height and width. A fixed-height workspace is easier to embed in dashboards, admin pages, and application panels than a forced full-screen layout.

<div id="luckysheet"></div>
<style>
#luckysheet {
  width: 100%;
  height: 640px;
  position: relative;
}
</style>

3. Initialize a Workbook

The browser build exposes the public API through window.luckysheet. Initialize the workbook after the container exists in the DOM.

<script>
document.addEventListener('DOMContentLoaded', function () {
  luckysheet.create({
    container: 'luckysheet',
    title: 'Inventory Workbook',
    lang: 'en'
  });
});
</script>

4. Load Initial Worksheet Data

Pass worksheet data through data when the workbook does not use remote loading. Luckysheet initialization data uses a celldata array with zero-based row and column indexes.

luckysheet.create({
  container: 'luckysheet',
  title: 'Inventory Workbook',
  data: [
    {
      name: 'Inventory',
      index: 'sheet_inventory',
      status: '1',
      order: '0',
      config: {},
      celldata: [
        {
          r: 0,
          c: 0,
          v: { v: 'Product', m: 'Product', ct: { fa: 'General', t: 'g' } }
        },
        {
          r: 0,
          c: 1,
          v: { v: 'Stock', m: 'Stock', ct: { fa: 'General', t: 'g' } }
        },
        {
          r: 1,
          c: 0,
          v: { v: 'Keyboard', m: 'Keyboard', ct: { fa: 'General', t: 'g' } }
        },
        {
          r: 1,
          c: 1,
          v: { v: 24, m: '24', ct: { fa: 'General', t: 'n' } }
        }
      ]
    }
  ]
});

5. Customize the Toolbar and Sheet Controls

The top-level visibility flags control complete UI regions. The corresponding configuration objects control individual items inside the toolbar, sheet bar, and statistic bar.

luckysheet.create({
  container: 'luckysheet',
  showtoolbar: true,
  showtoolbarConfig: {
    image: false,
    print: false,
    pivotTable: true,
    sortAndFilter: true,
    dataVerification: true
  },
  showsheetbar: true,
  showsheetbarConfig: {
    add: true,
    menu: true,
    sheet: true
  },
  showstatisticBar: true,
  showstatisticBarConfig: {
    count: true,
    view: false,
    zoom: true
  }
});

6. Load Workbook Data From a Server

loadUrl requests workbook data, and loadSheetUrl retrieves cell data for worksheets loaded later. Collaborative updates use allowUpdate and updateUrl. The server endpoints must follow Luckysheet’s workbook and update data formats.

luckysheet.create({
  container: 'luckysheet',
  gridKey: 'inventory-workbook',
  loadUrl: '/api/luckysheet/workbook',
  loadSheetUrl: '/api/luckysheet/sheets',
  allowUpdate: true,
  updateUrl: 'wss://example.com/luckysheet-updates'
});

Configuration Options

Workbook and Data Options

Option	Description
`container`	DOM container ID.
`title`	Workbook name shown in the top information area.
`lang`	UI language. Supported values include `en`, `zh`, `zh_tw`, and `es`.
`gridKey`	Unique workbook identifier for remote loading and updates.
`data`	Worksheet configuration array used for local initialization.
`plugins`	Plugin list. The archived build supports the `chart` plugin.
`column`	Default column count for an empty workbook.
`row`	Default row count for an empty workbook.
`autoFormatw`	Automatic large-number formatting.
`accuracy`	Decimal precision for numeric values.

Remote Data and Update Options

Option	Description
`loadUrl`	Endpoint used to load workbook data.
`loadSheetUrl`	Endpoint used to load cell data for other worksheets.
`allowUpdate`	Enables back-end updates after workbook operations.
`updateUrl`	Update and shared-editing endpoint.
`updateImageUrl`	Thumbnail update endpoint.

Toolbar and Navigation Options

Option	Description
`allowCopy`	Controls copy operations.
`showtoolbar`	Shows or hides the toolbar.
`showtoolbarConfig`	Controls individual toolbar items.
`showinfobar`	Shows or hides the top information area.
`showsheetbar`	Shows or hides the worksheet tab area.
`showsheetbarConfig`	Controls worksheet tab controls.
`showstatisticBar`	Shows or hides the bottom statistic bar.
`showstatisticBarConfig`	Controls count, print view, and zoom items.

Editing and Layout Options

Option	Description
`enableAddRow`	Controls row insertion from the workbook UI.
`enableAddBackTop`	Controls the back-to-top control.
`userInfo`	User information shown in the upper-right area.
`userMenuItem`	Menu entries attached to the user information control.
`myFolderUrl`	Destination for the upper-left back control.
`devicePixelRatio`	Rendering pixel ratio.
`functionButton`	Custom HTML for upper-right function controls.
`showConfigWindowResize`	Controls workbook resizing when chart or pivot configuration panels open.

Advanced UI and Formula Options

Option	Description
`forceCalculation`	Recalculates formulas during initialization.
`cellRightClickConfig`	Controls cell and header context-menu items.
`sheetRightClickConfig`	Controls worksheet-tab context-menu items.
`rowHeaderWidth`	Row-header width. Set to `0` to hide row headers.
`columnHeaderHeight`	Column-header height. Set to `0` to hide column headers.
`sheetFormulaBar`	Shows or hides the formula bar.
`defaultFontSize`	Default cell font size.
`pager`	Pagination control configuration.

API Methods

Cell and Range Methods

Method	Description
`getCellValue(row, column, setting)`	Gets the value of a cell.
`setCellValue(row, column, value, setting)`	Sets a cell value or cell object.
`clearCell(row, column, setting)`	Clears cell content.
`deleteCell(move, row, column, setting)`	Deletes a cell and shifts neighboring cells.
`setCellFormat(row, column, attr, value, setting)`	Changes a cell format attribute.
`find(content, setting)`	Searches worksheet content.
`replace(content, replacement, setting)`	Replaces matching worksheet content.
`setRangeValue(data, setting)`	Writes a two-dimensional data array to a range.
`setRangeMerge(type, setting)`	Merges cells in the selected range.
`clearRange(setting)`	Clears data from a selected range.

Row, Column, and Freeze Methods

Method	Description
`setHorizontalFrozen(isRange, setting)`	Freezes rows.
`setVerticalFrozen(isRange, setting)`	Freezes columns.
`setBothFrozen(isRange, setting)`	Freezes rows and columns.
`cancelFrozen(setting)`	Removes the freeze state.
`insertRow(row, setting)`	Inserts one or more rows.
`insertColumn(column, setting)`	Inserts one or more columns.
`deleteRow(rowStart, rowEnd, setting)`	Deletes a row range.
`deleteColumn(columnStart, columnEnd, setting)`	Deletes a column range.

Worksheet and Workbook Methods

Method	Description
`getAllSheets()`	Returns worksheet configurations that can be reused for initialization.
`getSheet(setting)`	Returns a worksheet by index, order, or name.
`getSheetData(setting)`	Returns worksheet cell data.
`getConfig(setting)`	Returns worksheet configuration.
`setConfig(setting)`	Updates worksheet configuration.
`setSheetAdd(setting)`	Creates a worksheet.
`setSheetDelete(setting)`	Deletes a worksheet.
`setSheetActive(order, setting)`	Activates a worksheet.
`setSheetName(name, setting)`	Renames a worksheet.
`setSheetOrder(orderList, setting)`	Reorders worksheets.

Workbook Utility Methods

Method	Description
`create(options, setting)`	Initializes a workbook.
`refresh(setting)`	Refreshes the workbook canvas.
`scroll(setting)`	Changes the worksheet scroll position.
`resize(setting)`	Resizes the workbook canvas to its current container.
`destroy(setting)`	Releases the current workbook instance.
`undo(setting)`	Runs the previous undo action.
`redo(setting)`	Runs the previous redo action.
`getScreenshot(setting)`	Returns a screenshot of a selected range.
`setWorkbookName(name, setting)`	Changes the workbook name.
`getWorkbookName(setting)`	Returns the current workbook name.
`transToCellData(data, setting)`	Converts two-dimensional sheet data to `celldata`.
`transToData(celldata, setting)`	Converts `celldata` to a two-dimensional data array.
`toJson()`	Exports workbook configuration as initialization-ready JSON.

Read and Write Cells Programmatically

Cell coordinates are zero-based. This example writes a value to B2, reads it back, and writes a formula to C2.

luckysheet.setCellValue(1, 1, 125);
const stock = luckysheet.getCellValue(1, 1);
console.log(stock);
luckysheet.setCellValue(1, 2, '=B2*2');

Hooks

Hook	Runs When
`cellEditBefore`	Before a cell enters edit mode.
`cellUpdateBefore`	Before a cell value changes.
`cellUpdated`	After a cell value changes.
`cellRenderBefore`	Before a cell is rendered.
`cellRenderAfter`	After a cell is rendered.
`rangeSelect`	After the selection range changes.
`sheetCreateAfter`	After a worksheet is created.
`sheetDeleteAfter`	After a worksheet is deleted.
`workbookCreateBefore`	Before workbook creation.
`workbookCreateAfter`	After workbook creation.

Validate Cell Updates

cellUpdateBefore receives the row, column, proposed value, and refresh flag. Returning false cancels the update.

luckysheet.create({
  container: 'luckysheet',
  hook: {
    cellUpdateBefore: function (row, column, value) {
      if (column === 1 && Number(value) < 0) {
        return false;
      }
    },
    cellUpdated: function (row, column, oldValue, newValue) {
      console.log('Updated cell:', row, column, newValue);
    }
  }
});

Alternatives and Related Resources

Changelog

2.1.13 (January 19, 2021)

Bug fixes for range formatting, text wrapping, hooks, and pivot tables.

2.1.12 (December 22, 2020)

Find API and additional bug fixes.