Nano Sheets Examples

Download Back To CSSScript.Com

Nano Sheets brings Excel-like data grid functionality to your web projects. Implement now and simplify your data management.

Basic

Simple data model

This example show how data is saved. It's a simple object with cell coordinates as keys and cell content as value. Cells can only contain string value.

Side by side synchronized editors

See changes on the left reflected on the right side. This just uses the same object for both editor's data, and lets them know when to redraw.

Read only

You can initialize the sheet with readOnly:true, or update it later by setting the instance readOnly property.

Large datasets

Nanosheets can easily display and edit large datasets. Below is a 100 000 cells dataset (100x1000). The scroll area adjusts to the current data. There's no penalty for having empty space between the defined values in your dataset, as the cells are accessed as keys of an object.

Create and destroy

to create and then cleaned up an instance with instance.destroy().

Select cells programmatically

to change the selection wiht the instance.select(x,y) method.

Custom styling

There are a few parameters you can change. If that's not enough, you can add css rules, or change the source directly.