Package Exports

@glideapps/glide-data-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@glideapps/glide-data-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Glide Data Grid

We built Data Grid as the basis for the Glide Data Editor. It's a React component built on top of HTML Canvas.

Glide Data Grid

It scales to millions of rows. Cells are rendered lazily on demand for memory efficiency.
Scrolling is extremely fast. Native scrolling keeps everything buttery smooth.
Fully Free & Open Source. MIT licensed so you can use Grid in commerical projects.

Installation

To add Grid to your own project:

$ npm install @glideapps/glide-data-grid
# Install peer dependencies
$ npm install direction marked react-responsive-carousel styled-components

Usage

First you need to define your columns:

const columns: GridColumn[] = [
    { title: "Number", width: 100 },
    { title: "Square", width: 100 },
];

Next you need a function which, given column and row indexes, returns a cell to display. Here we have two columns, the first of which shows the index of the row, and the second the square of that number:

function getData([col, row]: readonly [number, number]): GridCell {
    let n: number;
    if (col === 0) {
        n = row;
    } else if (col === 1) {
        n = row * row;
    } else {
        throw new Error("This should not happen");
    }
    return {
        kind: GridCellKind.Number,
        data: n,
        displayData: n.toString(),
        allowOverlay: false,
    };
}

Now you can use Data Grid:

<DataEditorContainer width={500} height={300}>
    <DataEditor getCellContent={getData} columns={columns} rows={1000} />
</DataEditorContainer>

Full API documentation

The full API documentation is in the API.md file.

FAQ

Nothing shows up!

Please read the Prerequisites section in the docs.

It crashes when I try to edit a cell!

Please read the Prerequisites section in the docs.