Bundled plugins

Fast-sheet bundled with Editable and Search plugins

WARNING

Please install ^2.0.0 to use these plugins

Editable

The plugin doesn't change your data. It reports the edits with onUpdate, and you apply the accepted ones with fastSheets.updateCells

import { FastSheets } from 'fast-sheets'
import { FastSheetsEditablePlugin } from 'fast-sheets/editable'

const elContainer = document.getElementById('fast-sheets')
if (elContainer) {
  const fastSheets = new FastSheets({
    elContainer,
    data: [
      ['cell 1 : 1', 'cell 1 : 2'],
      ['cell 2 : 1', 'cell 2 : 2'],
    ],
  })

  const editablePlugin = new FastSheetsEditablePlugin({
    onUpdate(changedCells) {
      // validate or save the changes here, then apply them
      fastSheets.updateCells(changedCells)
    },
  })

  fastSheets.use(editablePlugin)
}

updateCells writes the values to the data array, updates the row heights and renders the grid

Options

Option	Description
onUpdate	Required. Called with the changed cells { rowIndex, columnIndex, value }[]
canEditCell	Whether a data cell can be edited. All cells can be edited by default
selectionColor	Color of the selection. Default is 'rgb(26, 115, 232)'

To make some cells read-only, use canEditCell

const editablePlugin = new FastSheetsEditablePlugin({
  onUpdate(changedCells) {
    fastSheets.updateCells(changedCells)
  },
  canEditCell({ columnIndex }) {
    return columnIndex !== 0 // the first column is read-only
  },
})

Controls

• click a cell to focus it, drag to select a range
• double click a cell, press Enter or start typing to edit it
• Enter saves the value, Shift + Enter adds a new line, Escape cancels editing
• arrows and Tab move the focus, Shift + arrows select a range
• Backspace or Delete clears the selected cells
• Ctrl / Cmd + A or a click on the corner cell selects all cells
• copy and paste work with the system clipboard, so you can paste ranges from other spreadsheets

Search

The plugin highlights the cells you pass to highlightResult and scrolls to the first one. Finding the cells is up to you, so you can use any matching logic

import { FastSheets, type Cell } from 'fast-sheets'
import { FastSheetsSearchPlugin } from 'fast-sheets/search'

let fastSheets: InstanceType<typeof FastSheets>
let searchPlugin: InstanceType<typeof FastSheetsSearchPlugin>
const data = [
  ['cell 1 : 1', 'cell 1 : 2'],
  ['cell 2 : 1', 'cell 2 : 2'],
]
const searchQuery = 'cell 1 : 1'

const elContainer = document.getElementById('fast-sheets')
if (elContainer) {
  fastSheets = new FastSheets({
    elContainer,
    data,
  })

  searchPlugin = new FastSheetsSearchPlugin()
  fastSheets.use(searchPlugin)
}

const search = () => {
  const cells: Cell[] = []
  data.forEach((row, rowIndex) => {
    row.forEach((cell, columnIndex) => {
      if (searchQuery && cell.includes(searchQuery)) {
        cells.push({ rowIndex, columnIndex })
      }
    })
  })
  searchPlugin.highlightResult(cells)
}

To clear the result, pass an empty array

searchPlugin.highlightResult([])

Options

Option	Description
selectionColor	Border color of the found cells. Default is 'rgb(8, 197, 0)'

const searchPlugin = new FastSheetsSearchPlugin({ selectionColor: 'orange' })