Griddle is an ultra customizable datagrid component for React.

0Mayer LeonardKapowsinHawaiiUnited KingdomOvolo7
1Koch BeckerJohnsonburgNew JerseyMadagascarEventage2
2Lowery HopkinsBlancoArizonaUkraineComtext3
3Walters MaysGlendaleIllinoisNew ZealandCorporana6
4Shaw LoweCoultervillleWyomingEcuadorIsologica2

Reimagined with customization in mind

The new Griddle 1.0 has been re-built with customization in mind. It ships with some basic conventions and functionality but gives you the ability to customize just about anything (components, methods, etc). To encourage customization reuse, Griddle now has plugin support!


Plugins are packaged Griddle customizations that can be reused or shared. Want to group styles and behavior that are shared throughout your organization or have some great idea you want to share with the world through npm? Plugins are the way to achieve this!

What's new

  1. New module architecture
  2. First class plugin support
  3. Customize just about anything

Griddle is not just a data grid

By default, Griddle is a datagrid -- however, it's a bit more than a datagrid. Through its customizable and pluggable architecture, Griddle turns into a component for rendering lists of data.

This is Griddle

(you can still filter using Griddle's filter component and state management -- e.g. search for 'simpson')
Learn how to configure Griddle to render as a map

This is too!

Mayer Leonard

  • State: Hawaii
  • Company: Ovolo

Koch Becker

  • State: New Jersey
  • Company: Eventage

Lowery Hopkins

  • State: Arizona
  • Company: Comtext

Walters Mays

  • State: Illinois
  • Company: Corporana

Shaw Lowe

  • State: Wyoming
  • Company: Isologica
Learn how to configure Griddle to render as a list

Quick start

Include Griddle in your project:

npm install --save griddle-react

Add Griddle to your project:

import React from 'react';
import Griddle from 'griddle-react';

(or var Griddle = require('griddle-react').default; if using commonjs. See here for example usage)

Define an array of data:

var data = [
  { one: 'one', two: 'two', three: 'three' },
  { one: 'uno', two: 'dos', three: 'tres' },
  { one: 'ichi', two: 'ni', three: 'san' }

Return Griddle in your render method:

  <Griddle data={data} />

We're only scratching the surface of what we can do with Griddle.

Continue to documentation

Looking for version 0.x docs?

Version 0.x docs available here