Table in ReactJS
To store and display data in a structured format, an arrangement is created which organizes information into rows and columns. This arrangement is called a table.
Features of React Table:
- Lightweight at 11kb and only need 2kb more for styles.
- Fully customizable with JSX, templates, state, styles and callbacks.
- Fully controllable via optional props and callbacks.
- Includes client-side & Server-side pagination.
- Includes filters.
- Pivoting & Aggregation.
- Minimal design & easily themeable.
Installation:
To create a React app.
Command:
$ npx create-react-app myApp
To install react-table.
Command:
$ npm install react-table
To import the react-table into the react component, add the following snippet to the src/App.js file.
import ReactTable from "react-table";
To render data using react-table.
const data = [{ msg: 'Hello', num: 1 },{ msg: 'Hey', num: 2 },{ msg: 'Hi', num: 3 },{ msg: 'Bye', num: 4 },{ msg: 'Welcome', num: 5 },{ msg: 'Thanks', num: 6 }] |
To specify the column info with column attributes.
const columns = [{ Header: 'Message', accessor: 'msg' },{ Header: 'Number', accessor: 'num' }] |
To bind this data with react-table, inside the render method and then to return the react-table.
return ( <div> <ReactTable data={data} columns={columns} defaultPageSize = {2} pageSizeOptions = {[2,4, 6]} /> </div> ) |
Ultimately the src/App.js will look similar to the below code.
src/App.js:
import React, { Component } from 'react'; import ReactTable from "react-table"; import "react-table/react-table.css"; class App extends Component { render() { const data = [{ msg: 'Hello', num: 1 },{ msg: 'Hey', num: 2 },{ msg: 'Hi', num: 3 },{ msg: 'Bye', num: 4 },{ msg: 'Welcome', num: 5 },{ msg: 'Thanks', num: 6 }] const columns = [{ Header: 'Message', accessor: 'msg' },{ Header: 'Number', accessor: 'num' }] return ( <div> <ReactTable data={data} columns={columns} defaultPageSize = {2} pageSizeOptions = {[2,4, 6]} /> </div> ) } } export default App; |
Output 1:
The output will be similar to:
MESSAGE NUMBER Hello 1 Hey 2 Page 1 of 3 2 rows
Output 2: On changing the rows dropdown menu.
MESSAGE NUMBER Hello 1 Hey 2 Hi 3 Bye 4 Welcome 5 Thanks 6 Page 1 of 1 6 rows
