Basic usage

Here are some basic examples of how to use the package

Destroy

To destroy the instance and release all resources, simply use

import { FastSheets } from 'fast-sheets'

let fastSheets: InstanceType<typeof FastSheets>

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

const destroy = () => {
  fastSheets?.destroy()
}

Columns and rows

You can set column names and widths, as well as the output row numbers

import { FastSheets } from 'fast-sheets'

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'],
      // ...
      ['cell n : 1', 'cell n : 2'],
    ],
    columns: [
      { name: 'Column 1', width: 100 },
      { name: 'Column 2', width: undefined }, // flexible width
    ],
    isRowNumberVisible: true, // output row numbers
  })
}

Columns without a width share the free space. Use minWidth to keep them from getting too narrow (default is 50)

columns: [
  { name: 'Column 1', width: 100 },
  { name: 'Column 2', minWidth: 150 }, // flexible width, at least 150px
]

The header row is shown only when at least one column has a name

Multiline text

Use \n to split the cell text into lines. The row height grows to fit the cell with the most lines

data: [
  ['line 1\nline 2\nline 3', 'cell 1 : 2'],
  ['cell 2 : 1', 'cell 2 : 2'],
]

Update cells

To change cell values after the instance is created, use updateCells. It writes the values to the data array, updates the row heights and renders the grid

import { FastSheets } from 'fast-sheets'

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'],
    ],
  })

  fastSheets.updateCells([
    { rowIndex: 0, columnIndex: 1, value: 'new value' },
    { rowIndex: 1, columnIndex: 0, value: 'one more\nwith two lines' },
  ])
}

To replace the whole data, destroy the instance and create a new one

Options

Option	Description
elContainer	Required. The element to render the grid into. It needs a size
data	Required. Rows of cells, string[][]
columns	Column names and sizes, { name?, width?, minWidth? }[]. Without it, every column is 100px wide
isRowNumberVisible	Output row numbers. Default is false
borderWidth	Width of the cell borders in pixels. Default is 1

The container gets position: relative and overflow: hidden, and the grid fills it. The grid is rendered again when the container size changes

Multiple instances

You can use several instances on one page

<div style="display: flex; width: 100vw">
  <!-- Left column -->
  <div style="width: 45%; height: 70vh">
    <h2>Left</h2>
    <div id="left" style="width: 100%; height: 100%" />
  </div>
  <!-- Right column -->
  <div style="width: 45%; height: 70vh; margin-left: 10%">
    <h2>Right</h2>
    <div id="right" style="width: 100%; height: 100%" />
  </div>
</div>

import { FastSheets } from 'fast-sheets'

const elLeft = document.getElementById('left')
if (elLeft) {
  new FastSheets({
    elContainer: elLeft,
    data: [
      ['cell 1 : 1', 'cell 1 : 2'],
      ['cell 2 : 1', 'cell 2 : 2'],
      // ...
      ['cell n : 1', 'cell n : 2'],
    ],
  })
}

const elRight = document.getElementById('right')
if (elRight) {
  new FastSheets({
    elContainer: elRight,
    data: [
      ['cell 1 : 1', 'cell 1 : 2'],
      ['cell 2 : 1', 'cell 2 : 2'],
      // ...
      ['cell n : 1', 'cell n : 2'],
    ],
  })
}