Glide Data Grid
Ask or search…
K
🚀

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. 1.
    In your project directory, run:
    npm install @glideapps/glide-data-grid
  2. 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. 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": "[email protected]",
"phone": "+1 (869) 405-3127"
},
...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}
/>;