1771 Technologies Logo

Introduction

Quick Start Guide for Graphite Grid

Graphite Grid is a versatile React Data Grid that integrates seamlessly with any React-based framework or library.

Getting Started

Follow these straightforward steps within your preferred framework to begin using Graphite Grid.

Info

Need help deciding which framework to choose?

The team at 1771 Technologies recommends Vite for its fast and efficient build tooling. However, Graphite Grid is compatible with any framework that supports React.

Step 1: Install Graphite Grid

Run the following command in your terminal to install the Graphite Grid package:

npm install @1771technologies/graphite-grid-react

Step 2: Activate Your License (Optional)

import { activateLicense } from "@1771technologies/graphite-grid-react";
 
activateLicense("<my-license-key>");

You can use Graphite Grid without a license in development, but a watermark will be displayed until you activate a valid license. For more information, see the license activation guide.

Step 3: Create Your Component

Create a new component to configure and display Graphite Grid. Here's a simple example:

"use client"; // Only necessary when using React Server Components
import { useGraphiteGrid, GraphiteGridDom } from "@1771technologies/graphite-grid-react";
 
// Some row data for the Grid. An array is used here,
// but row data can be anything.
const rowData = [
  ["Rob Co", 1884, 3002],
  ["Cats R Us", 1993, 112],
  ["Carl Inc", 2024, 1],
];
 
export function MyGrid() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "company-name", headerLabel: "Company Name", field: 0 },
        { id: "founded", headerLabel: "Founded", field: 1 },
        { id: "employee-count", headerLabel: "No. Employees", field: 2 },
      ],
      baseColumnDefinition: {
        freeWidthRatio: 1,
      },
      rowHeight: { kind: "fill", min: 30 },
      rowDataSource: {
        kind: "client",
        data: rowData,
      },
    },
  });
 
  return <GraphiteGridDom state={state} />;
}

Tip

The code example above uses GraphiteGridDom, a Grid Renderer powered by the DOM. If you prefer, you may import GraphiteGridCanvas to use a Grid Renderer powered by HTML Canvas instead.

Step 4: Include the Graphite Grid CSS

Load this CSS before rendering any grid component to avoid styling issues.

import "@1771technologies/graphite-grid-react/css";

Step 5: Render in Your App

Integrate the MyGrid component into your main application file as shown below:

import { MyGrid } from "./mygrid.js";
 
export default function App() {
  return (
    <div style={{ width: 200, height: 200 }}>
      <MyGrid />
    </div>
  );
}

Graphite Grid optimizes rendering based on the container's dimensions. Ensure the container is sized correctly (width and height) even when initially empty.

Final Rendered Output

Exploring Graphite Grid Further

This quick start guide demonstrates the basic features of Graphite Grid. To delve deeper into its capabilities, consider exploring the following resources:

  • Column Definitions: Learn how to configure and customize the grid columns.
  • Row Data Sources: Understand the different sources of row data and how to use them.
  • Row Height: Explore the various row height options to enhance the grid's appearance and functionality.
Next
Installation