🚀Extended QuickStart Guide

Setting Up the Project

Prerequisites

• Node.js installed

• A TypeScript project setup (since you're experienced, I'll skip the basic setup steps)

Installing Glide Data Grid

1. In your project directory, run:

   npm install @glideapps/glide-data-grid

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

   npm i lodash marked react-responsive-carousel

3. Don't forget to import mandatory CSS

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

Getting started with data and columns

Glide data grid is a powerful but flexible library requiring very few concepts required to get started. The grid will need data, columns, and a getCellContent callback to convert our data into cells on demand. Because the callback is used, there is no need to pre-format the data in any particular way, so long as it can be transformed into a cell. This example uses a flat array of objects.

const data = [
    {
      "name": "Hines Fowler",
      "company": "BUZZNESS",
      "email": "[e-mail]",
      "phone": "[phone]"
    },
    ...rest
]

The columns of the data grid may contain many options, including icons, menus, theme overrides, however at their most basic they only require a title and an id. The id is technically optional but it is best not to omit it.

const columns: GridColumn[] = [
    {
        title: "Name",
        id: "name"
    },
    {
        title: "Company",
        id: "company"
    },
    {
        title: "Email",
        id: "email"
    },
    {
        title: "Phone",
        id: "phone"
    }
]

Each column will automatically size based on its contents. If desired the sise of each column can be overridden by setting the width parameter.

Finally the data grid requires a cell fetch callback. This callback should be memoized using React.useCallback or be a static function.

const getCellContent = React.useCallback((cell: Item): GridCell => {
    const [col, row] = cell;
    const dataRow = data[row];
    // dumb but simple way to do this
    const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
    const d = dataRow[indexes[col]]
    return {
        kind: GridCellKind.Text,
        allowOverlay: false,
        displayData: d,
        data: d,
    };
}, []);

💡 Avoid excessive changes to the identity of the getCellContent callback as the grid will re-render from scratch every time it changes.

That is all the basic requirements put together, now the DataEditor can be rendered.

return <DataEditor 
        getCellContent={getCellContent} 
        columns={columns} 
        rows={data.length} 
    />;