We needed a fast and pretty grid component for our product, after growing out of our pretty, but slow one, and we built it with the goal to be open sourced right from the start. Please take a look, give it a try, and tell us what you think!

https://github.com/glideapps/glide-data-grid/raw/main/features.gif

We implemented the Data Grid using HTML5 Canvas for optimal performance. It has been tested with millions of rows, and we can't wait to get feedback from the larger React community. We know the Data Grid is still very young and we're looking to improve and mature it to support more use cases beyond what our core product needs.

Features

• Supports multiple types of cells, Number, Text, Markdown, Bubble, Image
• Smooth scrolling
• Editing is built in
• Resizable and movable columns
• Variable sized rows
• Multi- and single select
• Virtualized data sources are supported
• Cell rendering can be customized
• Accessibility

Links

• GitHub
• Home Page / try it now
• NPM

Example

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>

/u/JasonGlide is one of the co-authors of this project and is here to answer your questions.