Build Editable, Spreadsheet-like Data Grids with Nano Sheets

Category: Javascript , Table | May 13, 2024
Author:renanlecaro
Views Total:51 views
Official Page:Go to website
Last Update:May 13, 2024
License:MIT

Preview:

Build Editable, Spreadsheet-like Data Grids with Nano Sheets

Description:

Nano Sheets is a JavaScript library to easily create spreadsheet-like data grids within your web applications. Think MS Excel or Google Sheets, but directly in your web project.

The data grid library, with a minimal footprint of just 2.5kb, provides a fast, efficient way to display and manage tabular data interactively.

It allows your users to work with data through familiar operations, such as copying and pasting directly from Excel, utilizing infinite grid capabilities, and even editing on mobile devices.

Nano Sheets can also efficiently handle large datasets through virtualized display, which means smooth performance even with tons of data.

How to use it:

1. Install & download Nano Sheets using NPM:

npm install nanosheets

2. Import it into your project:

import {NanoSheets} from "nanosheets";

3. Create a container in your HTML to host the spreadsheet:

<div id="example"></div>

4. Define your spreadsheet data using a simple key-value format, where keys represent cell coordinates and values are strings.

const data = {
  "0_0": "CSS",
  "1_0": "Script",
  "0_1": "Com",
  // ...
}

5. Initialize NanoSheets with your data and a callback function to handle changes.

NanoSheets(document.getElementById("example"), {
  data, // initial data
  onChange(data) {
    // new data
    console.log(data)
  }
});

6. Nano Sheets allows you to have multiple synchronized spreadsheets, where editing one updates the others in real-time:

const instance1 = NanoSheets(document.getElementById("container-1"), {
  data,
  onChange() {
    instance2.redraw();
  }
});
const instance2 = NanoSheets(document.getElementById("container-2"), {
  data,
  onChange() {
    instance1.redraw();
  },
});

7. All possible parameters and options:

NanoSheets(
  // The HTML container for the spreadsheet
  node, 
  {
    // The data object for the spreadsheet
    data = {}, 
    // Callback after data change
    afterDataChange = () => null, 
    // Callback before spreadsheet redraw
    beforeRedraw = () => null, 
    // Width of each cell
    cellWidth = 200, 
    // Height of each cell
    cellHeight = 40, 
    // Style for the input field
    inputStyle = { 
      font: 'inherit',
      border: '2px solid #00aae1',
      borderRadius: '2px',
      transition: 'left 0.2s, top 0.2s',
      padding: '0 8px',
    },
    // Style for each cell
    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'
    }),
  },
)

You Might Be Interested In:


Leave a Reply