Create customized data Grid using griddle-react
Tags: react
Published: 2018-10-15 22:57:29

---
title: Create customized data Grid using griddle-react
published: true
tags: React 
canonical_url: https://reactninja.io/2018/09/02/create-customized-data-grid-using-griddle-react/
---

The Griddle is an ultra customizable data grid component for React. It has the support for cards, nesting, maps and more. Rather than only relying on default behavior, Griddle also allows having complete control over what’s being displayed. This tutorial attempts to capture the most useful options that can be set when using Griddle.

A few days back, I discussed handling tables using `reactable`, Reactable is fast, flexible and simple.

> [Read the post about reactable here](https://dev.to/kris/create-a-table-in-react-using-reactable-4idn-temp-slug-3689087).

Now, it’s time for `griddle-react`. Griddle also has support for plugins for a higher level of customization. You can also create your own plugin for any project or use an existing one.

Griddle exists as a component that is structured similarly to many React applications.

Griddle documentation also says:

> Griddle is arranged into a series of container and view components. Container components connect to the store, setup logic, and wire up actions to the view components as props.

For a deeper level understanding of the architecture of the package, you can [visit official documentation](http://griddlegriddle.github.io/Griddle/docs/).

I’ll explore you to some situations with examples on what griddle can do.

The repository for the tutorial is on GitHub and all components can be rendered from App.js file, all components will be pre-imported on a final commit. You can just change the component rendered from `App` to change the components according to the tutorial.

All code snippets will also be available on GitHub Gist here. They are embedded wherever necessary.

**Top use cases:**

- Customizable, useful out of the box but still extremely customizable.
- Custom column or column customization without the need of external css.
- Plugins, use existing or create your own and share or use it yourself.

If you need to look at all possible APIs, and I escape some on this tutorial you can [grab those here](http://griddlegriddle.github.io/Griddle/docs/api/).

Griddle has a number of props and configuration options that can be used. This tutorial attempts to capture a few useful options that can be set when using Griddle.

**data** : is an array of objects with column value.

**plugins** : array of plugins, plugins can be a simple export. Components can be enhanced or replaced.

**event** : events being onFilter, onSort, onNext, onPrevious, onGetPage.

**sortProperties** : Takes an object or multiple objects, each with id and sortAscending. id is column’s name.

**styleConfig** : takes icons and predefined classNames and those added by plugins. Also supports custom styles.

**pageProperties** : currentPage and  pageSize (number of records)

#### More Components

Cell, Filter, Layout, NoResults, Pagination, Row, etc

**Follow through the examples below…**

`npm i griddle-react`

`import Griddle from 'griddle-react'`

I’ll re-use the most of the css from the last [tutorial about reactable](https://dev.to/kris/create-a-table-in-react-using-reactable-4idn-temp-slug-3689087), and add some more. You can get the css from the [repository of this tutorial here](https://github.com/therj/griddle-react-tutorial/blob/master/src/index.css).

The App component will render the `MyGriddle`,  the component that has all the code for the  table.

View the code on [Gist](https://gist.github.com/therj/6a7d311785b4c5faf2388d10b59c4c74).

 

In MyGriddle, import fakeData from MOCK\_API and Griddle from `griddle-react`.

`import Griddle from 'griddle-react'`

`import fakeData from './MOCK_DATA'`

For the initial state, I’ll set the `pageSize` to 5 and `currentPage` to 1 (first page). The `recordCount` is to the full length of the data (`fakeData.length`).

Griddle has a few properties passed to it. `data`, `currentPage`, `pageSize`, `recordCount` are required to display the data in the table. Plugins are optional, only two available as of now. One for scrolling instead of paginated, another for the filter and sort like stuffs.

View the code on [Gist](https://gist.github.com/therj/6a7d311785b4c5faf2388d10b59c4c74).

 

**pageProperties:**  defines currentPage, pageSize, and recordCount.  
**events:** defines onNext, onPrevious, onGetPage actions. Next and Previous buttons won’t work without these actions.  
 **components: ** hides or redefines Filter, SettingsToggle option.  
**styleConfig:** contains all the style options, including class names for each component.

![](https://i0.wp.com/reactninja.io/wp-content/uploads/2018/08/img_5b8843791099d.png?ssl=1)

The onNext, onPrevious, onGetPage actions have to be defined for these actions to work.

All these actions are handled through function `fakeLoadDataFromAPI`. It receives the currentPage, pageSize and a callback function. It then sends the next/previous set of data based on the value of pageSize and currentPage to the callback function.  
The callback function is `updateTableState`. It sets the state to whatever data is passed.

**\_onNext: ** fakeLoadDataFromAPI(currentPage + 1, pageSize, this.updateTableState)

**\_onPrevious: ** fakeLoadDataFromAPI(currentPage – 1, pageSize, this.updateTableState)

![](https://i2.wp.com/reactninja.io/wp-content/uploads/2018/08/previous_next.png?resize=1572%2C600&ssl=1)

But if you select the page number instead of Previous/Next, it uses `onGetPage` to load the particular page.

![](https://i0.wp.com/reactninja.io/wp-content/uploads/2018/08/get_page.png?resize=1528%2C360&ssl=1)

Like the next/previous, the data is manipulated from the `fakeLoadAPI` and state is set from `updateTableState`.

Now, we have a working table with pagination and Filter.

![](https://i0.wp.com/reactninja.io/wp-content/uploads/2018/08/img_5b884a4d355b4.png?resize=398%2C281&ssl=1)  ![](https://i2.wp.com/reactninja.io/wp-content/uploads/2018/08/img_5b884b15440aa.png?resize=398%2C196&ssl=1)

<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ --><iframe src="https://codesandbox.io/embed/zzw94k740x?view=preview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" width="100%" height="500" scrolling="yes" frameborder="0"></iframe>

The post [Create customized data Grid using griddle-react](https://reactninja.io/2018/09/02/create-customized-data-grid-using-griddle-react/) appeared first on [ReactNinja](https://reactninja.io).