👋Welcome to Glide Data Grid

Welcome to the official documentation for Glide Data Grid, the powerful, flexible, and efficient data grid designed for modern web applications. Whether you're a seasoned developer or just starting out, our documentation will guide you through the features and functionalities of Glide Data Grid, helping you to integrate and leverage its capabilities in your projects.

Lots of fun examples are in our Storybook.

You can also visit our main site.

👩‍💻 Features at a Glance

• 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, drilldown, uri

• Fully Free & Open Source. MIT licensed, so you can use Grid in commercial projects.

• Editing is built in.

• Resizable and movable columns.

• Variable sized rows.

• Merged cells.

• Single and multi-select rows, cells, and columns.

• Cell rendering can be fully customized.

• Much much more...

⚡ Quick Start

First make sure you are using React 16 or greater. Then install the data grid:

npm i @glideapps/glide-data-grid

You may also need to install the peer dependencies if you don't have them already:

npm i lodash marked react-responsive-carousel

Create a new DataEditor wherever you need to display lots and lots of data

<DataEditor getCellContent={getData} columns={columns} rows={numRows} />

Don't forget to import mandatory CSS

import "@glideapps/glide-data-grid/dist/index.css";

Making your columns is easy

// Grid columns may also provide icon, overlayIcon, menu, style, and theme overrides
const columns: GridColumn[] = [
    { title: "First Name", width: 100 },
    { title: "Last Name", width: 100 },
];

Last provide data to the grid

// If fetching data is slow you can use the DataEditor ref to send updates for cells
// once data is loaded.
function getData([col, row]: Item): GridCell {
    const person = data[row];

    if (col === 0) {
        return {
            kind: GridCellKind.Text,
            data: person.firstName,
            allowOverlay: false,
            displayData: person.firstName,
        };
    } else if (col === 1) {
        return {
            kind: GridCellKind.Text,
            data: person.lastName,
            allowOverlay: false,
            displayData: person.lastName,
        };
    } else {
        throw new Error();
    }
}

You can edit this example live on CodeSandbox

Full API documentation

The full API documentation is available on GitBook.