DOCSEARCHbyAlgolia
Submit Docs

Glide Data Grid

repository·main·Indexed 26 days ago

https://github.com/glideapps/glide-data-grid

A high-performance, canvas-based data grid for React (16+) designed to handle millions of rows with rapid updates and native scrolling. It features a data-agnostic architecture and a customizable DataEditor component. The library includes support for extended cell types via @glideapps/glide-data-grid-cells (such as Star, Sparklines, Dropdown, and Multi-select) and a simplified data source implementation via @glideapps/glide-data-grid-source for managing sorting and menus.

Tokens
20.8K
Snippets
57
Records
110
Agent score
90%

What's inside glide-data-grid

  1. Overview of Glide Data Grid Source

    main
    The @glideapps/glide-data-grid-source package provides an easy-to-use data source implementation for the Glide Data Grid. It simplifies data management by providing built-in support for features like sorting and menus out of the box, reducing the manual implementation required to connect raw data to the grid.

  2. Use Glide Data Grid with Next.js

    main

    To avoid SSR (Server Side Rendering) errors in Next.js, wrap the grid in a component and import it using next/dynamic with ssr: false.

    // grid.tsx
import React from "react";
import DataEditor from "@glideapps/glide-data-grid";

export default function Grid() {
    return <DataEditor {...args} />;
}

// home.tsx
import type { NextPage } from "next";
import dynamic from "next/dynamic";
import styles from "../styles/Home.module.css";

const Grid = dynamic(
    () => {
        return import("../components/Grid");
    },
    { ssr: false }
);

export const Home: NextPage = () => {
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <h1 className={styles.title}>Hi</h1>
                <Grid />
            </main>
        </div>
    );
};

  3. Eject the cra5-gdg configuration

    main

    If you need full control over the build tool and configuration (webpack, Babel, ESLint, etc.), you can run npm run eject.

    Warning: This is a one-way operation. Once you eject, you cannot go back.

    This command removes the single build dependency and copies all configuration files and transitive dependencies directly into your project.

    npm run eject

  5. Implement Search, Sorting, and Filtering

    main

    Glide Data Grid provides built-in support for Search; you provide the trigger, and the grid handles the search.

    Filtering and Sorting are not included by default because they are application-specific and often more efficient when implemented at the data source level (e.g., via database queries). However, the library provides hooks for adding column header menus to facilitate these implementations.

  6. Quick Start with DataEditor

    main

    To display data, use the DataEditor component. You must import the mandatory CSS and provide getCellContent, columns, and rows props.

    Note: getCellContent is a function that receives [col, row] and returns a GridCell object.

    import DataEditor, { GridCell, GridCellKind, Item } from "@glideapps/glide-data-grid";
import "@glideapps/glide-data-grid/dist/index.css";

// 1. Define columns
const columns = [
    { title: "First Name", width: 100 },
    { title: "Last Name", width: 100 },
];

// 2. Provide data via getCellContent
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();
    }
}

// 3. Render the component
<DataEditor getCellContent={getData} columns={columns} rows={numRows} />

  8. Use additional cells in Glide Data Grid

    main

    To use the extended cell types provided by @glideapps/glide-data-grid-cells (such as Star, Sparklines, Article, Dropdown, Range, User profile, and Tags), you must perform two steps:

    1. Register Renderers: Import allCells from @glideapps/glide-data-grid-cells and pass them to the customRenderers prop of your DataEditor component.
    2. Define Cell Content: In your getCellContent callback, return a cell object with kind: GridCellKind.Custom and a data object containing the specific cell configuration.

    Available cell types include:

    • Star (Rating)
    • Sparklines
    • Article
    • Dropdown
    • Range
    • User profile
    • Tags
    import { allCells } from "@glideapps/glide-data-grid-cells";
import { DataEditor, GridCellKind } from "@glideapps/glide-data-grid";
import type { StarCell } from "@glideapps/glide-data-grid-cells";

const Grid = () => {
    const getCellContent = React.useCallback(() => {
        const starCell: StarCell = {
            kind: GridCellKind.Custom,
            allowOverlay: true,
            copyData: "4 out of 5",
            data: {
                kind: "star-cell",
                label: "Test",
                rating: 4,
            },
        };
        // ... return logic for other cells
    }, []);

    return <DataEditor customRenderers={allCells} getCellContent={getCellContent} {...rest} />;
};

  9. Configure HTML/CSS Prerequisites for DataEditor

    main

    The DataEditor requires a root-level portal div in your HTML to handle overlays. You can either insert a static div as the last child of your <body> tag, or create one dynamically using React's createPortal and pass it to the DataEditor via the portalElementRef prop.

    To use the default Image overlay preview, you must also import the react-responsive-carousel CSS file.