@crystallize/grid-renderer v2.1.1

Grid Renderer

crystallize/grid-renderer is a package that makes it easy to render Crystallize grids with React.

Installation

npm install --save @crystallize/grid-renderer
# or
yarn add @crystallize/grid-renderer

Usage

In order to use the grid renderer you'll need to have fetched your grid model. This can be fetched fairly easily from Crystallize's API via GraphQL.

At the minimum you will need to fetch layout of each column and some properties on the item. Your query might look something like this:

query grid($id: Int!, $language: String!) {
  grid(id: $id, language: $language) {
    rows {
      columns {
        layout {
          rowspan
          colspan
        }
        item {
          name
        }
      }
    }
  }
}

React

Import the GridRenderer from the react module:

import Grid from '@crystallize/grid-renderer/react';

Then, inside your component, render the Grid, passing through the grid model as a prop. By default, the grid is rendered using CSS grid.

return (
  <Grid
    model={gridModel}
    cellComponent={({ cell }) => <div>{cell.item.name}</div>}
  />
);

type

If you prefer to use a traditional <table> instead of CSS grid, you can do so easily:

return (
  <Grid
    model={gridModel}
    type="table"
    cellComponent={({ cell }) => <div>{cell.item.name}</div>}
  />
);

children

If you want full control over each of the cells, you can instead supply a function as the children of the grid component. This will allow you to iterate over each of the cells and mutate them as you please.

import Grid from '@crystallize/grid-renderer/react';

const children = ({ cells }) => {
  return cells.map((cell) => (
    <div
      style={{
        gridColumn: `span ${cell.layout.colspan}`,
        gridRow: `span ${cell.layout.rowspan}`,
      }}
    >
      {cell.item.name}
    </div>
  ));
};

return <Grid model={gridModel}>{children}</Grid>;

Note: If using <table> the children will receive an array of rows instead of cells, such as the following:

import Grid from '@crystallize/grid-renderer/react';

const children = ({ rows }) => {
  return rows.map((row) => (
    <tr>
      {row.columns.map((cell) => (
        <td rowSpan={cell.layout.rowspan} colSpan={cell.layout.colspan}>
          {cell.item.name}
        </td>
      ))}
    </tr>
  ));
};

return (
  <Grid model={gridModel} type="table">
    {children}
  </Grid>
);