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.
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.
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.
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, and add some more. You can get the css from the repository of this tutorial here.
The App component will render the MyGriddle, the component that has all the code for the table.
View the code on Gist.
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.
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.
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)
But if you select the page number instead of Previous/Next, it uses onGetPage to load the particular page.
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.
<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
The post Create customized data Grid using griddle-react appeared first on ReactNinja.
Top comments (0)