Griddle is an ultra customizable datagrid component for React.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 Next id name city state country company favoriteNumber 0 Mayer Leonard Kapowsin Hawaii United Kingdom Ovolo 7 1 Koch Becker Johnsonburg New Jersey Madagascar Eventage 2 2 Lowery Hopkins Blanco Arizona Ukraine Comtext 3 3 Walters Mays Glendale Illinois New Zealand Corporana 6 4 Shaw Lowe Coultervillle Wyoming Ecuador Isologica 2

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 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!

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')

This is too!

Mayer Leonard State : Hawaii

: Hawaii Company : Ovolo Koch Becker State : New Jersey

: New Jersey Company : Eventage Lowery Hopkins State : Arizona

: Arizona Company : Comtext Walters Mays State : Illinois

: Illinois Company : Corporana Shaw Lowe State : Wyoming

: Wyoming Company : Isologica 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 Next

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.

Looking for version 0.x docs?