@glideapps/glide-data-grid

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.

• 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.
• Supports multiple types of cells. Numbers, text, markdown, bubble, image
• Fully Free & Open Source. MIT licensed so you can use Grid in commerical projects.
• Editing is built in.
• Resizable and movable columns.
• Variable sized rows.
• Single- and multi-select.
• Cell rendering can be customized.

Setting Up Codespaces

If you'd like to set up glide data grid locally and contribute, the easiest way to get up and running is to use Codespaces if you have access to it. If you do not, simply cloning the repo and running npm install also works!

Steps

• Cick the green dropdown labeled code, there should be two tabs: local and codespaces.
• Click on codespaces.
• If this is your first time, then create a new codespace. It will open a new browser tab and build the docker container for it - there will be a button to open the environment in VSCode if you'd prefer to run it that way
• You should see a screen that says Setting up your codespace As soon as that's done, you should see a VSCode like UI with files on the left.
• Open a terminal window (you should find it at the top under terminal) and run .devcontainer/install.sh

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

Simple 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.

Does it work with screen readers and other a11y tools?

Not yet unfortunately. This is on our todo list.

Does it support my data source?

Yes.

Data Grid is agnostic about the way you load/store/generate/mutate your data. What it requires is that you tell it which columns you have, how many rows, and to give it a function it can call to get the data for a cell in a specific row and column.

Does it do sorting, searching, and filtering?

Search is included.

Filtering and sorting are something you would have to implement with your data source. There are hooks for adding column header menus if you want that.

The reason we don't add filtering/sorting in by default is that these are usually very application-specific, and can often also be implemented more efficiently in the data source, via a database query, for example.

Can it do frozen rows/columns?

Not yet, but there is some infrastructure for this internally already, and we accept PRs.

Can I render my own cells?

Yes, but the renderer has to use HTML Canvas.

Why does Data Grid use HTML Canvas?

Originally we had implemented our Grid using virtualized rendering. We virtualized both in the horizontal and vertical direction using react-virtualized. The problem is simply scrolling performance. Once you need to load/unload hundreds of DOM elements per frame nothing can save you.

There are some hacks you can do like setting timers and entering into a "low fidelity" rendering mode where you only render a single element per cell. This works okay until you want to show hundreds of cells and you are right back to choppy scrolling. It also doesn't really look or feel great.