CodesJava

Easy learning with example program codes

Table in ReactJS

React Table

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
Please follow and like us:
error









Copyright © 2019 CodesJava DMCA.com Protection Status