Welcome to AI Data Grid

Welcome to the official documentation for AI 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 AI Data Grid, helping you to integrate and leverage its capabilities in your projects.

AI Data Grid is forked from Glide Data Grid by Glide (typeguard, Inc.), MIT licensed. Version 7.0.0 is API-compatible with Glide Data Grid 6.x. To migrate, upgrade your app to React 19 first (React 16, 17 and 18 are not supported), then change the package names in your package.json and your imports.

👩‍💻 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...

Lots of fun examples are in our Storybook.

⚡ Quick Start

AI Data Grid requires React 19. Install the data grid:

npm i @specstory/ai-data-grid

You may also need to install the peer dependencies if you don't have them already. marked must be 16.x (the peer range is ^16.0.10), so name the major version:

npm i lodash marked@^16 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 "@specstory/ai-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();
    }
}

Full API documentation

The full API documentation is available in the API section.