Data Science
How do I create a 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 (
|
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 (
|
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
0 comments