Build Editable, Spreadsheet-like Data Grids with Nano Sheets

Nano Sheets is a JavaScript library for creating fast and customizable data grids. It’s lightweight, weighing in at a mere 2.5 KB gzipped, and offers high performance even with large datasets.

Think of it as a spreadsheet built for the web—you can edit each cell directly within the grid, just like in Excel. It supports features like copy-pasting from Excel, an infinite grid for expansive data, and basic mobile editing. And the virtualization feature makes it possible to work with massive datasets without sacrificing performance.

Additionally, Nano Sheets supports common mouse and keyboard shortcuts, which enables a seamless transition for users familiar with traditional spreadsheet software. It directly modifies the underlying data object instead of creating copies. This efficient memory management keeps resource consumption low, which is especially beneficial when dealing with large datasets.

How to use it:

1. Install & download Nano Sheets package using npm:

# NPM
$ npm install nanosheets

// ESM
import {NanoSheets} from "nanosheets"
// Browser
import {NanoSheets} from "./nanosheets.js";
window.NanoSheets = NanoSheets

2. Create an HTML element that will serve as the container for the data grid.

<div id="example" style="height: 300px"></div>

3. Create a simple data grid by passing the container element and data to the NanoSheets function:

const instance = NanoSheets(
  document.getElementById("example"), {
    // data object
    {
      "0_0": "Library Name",
      "1_0": "Gzipped weight",
      "0_1": "handsontable",
      "1_1": "296.2 KB",
      "0_2": "ag-grid-community",
      "1_2": "248 KB",
      "0_3": "@mui/x-data-grid",
      "1_3": "92.7 KB",
      "0_4": "NanoSheets",
      "1_4": "2.5 KB"
    },
    // callback
    onChange(data) {
      console.log(data)
    }
});

4. Synchronize data between two data grids:

// Data Grid A
const instance1 = NanoSheets(
  document.getElementById("container1"), {
    data,
    afterDataChange() {
      instance2.redraw();
    }
});
// Data Grid B
const instance2 = NanoSheets(
  document.getElementById("container2"), {
    data,
    afterDataChange() {
      instance1.redraw();
    },
});

5. Use the readonly option to prevent cell editing:

NanoSheets(
  document.getElementById("example"), {
    data,
    readonly: true
});

6. Customize the appearance of the data grid to match your app’s style.

NanoSheets(
  document.getElementById("example"), {
    data,
    cellWidth: 200,
    cellHeight: 40,
    inputStyle: {
      font: "inherit",
      border: "2px solid #00aae1",
      borderRadius: "2px",
      transition: "left 0.2s, top 0.2s",
      padding: "0 8px",
    },
    cellStyle:  (x, y, value, selected) => ({
      padding: "0 10px",
      borderBottom: "1px solid #dadada",
      borderRight: "1px solid #dadada",
      background: selected ? "#e2f7ff" : "white",
      transition: "background 0.1s",
      color: "black",
      outline: "none",
      whiteSpace: "nowrap",
    }),
    containerStyle:  {
      overflow: "auto",
      position: "relative",
      border: "1px solid #dadada",
    }
});

7. More API methods:

// Destroy the instance
instance.destroy()
// Select cells programmatically
instance.select(x, y)

How it works:

Nano Sheets works by transforming a container element into an editable data grid. It uses a flat hash map of coordinates to string values for data management.

The grid automatically resizes based on the container’s dimensions, and it redraws cells efficiently by only rendering those in view. This approach minimizes memory usage and improves performance, especially with large datasets.

The library handles user interactions, such as selecting and editing cells, using a combination of event listeners and DOM manipulations.

The virtualized display ensures that only the necessary data is shown, which is key to maintaining high performance in demanding web applications.

Changelog:

v0.0.19 (09/02/2024)

• Update