Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • How do I create a table in ReactJS
  • Learn React

How do I create a table in ReactJS

Spoke Right December 16, 2022 2 min read

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

Continue Reading

Previous: What is code splitting in ReactJs
Next: What is higher-order component in Reactjs

Related Stories

Which is Difference Between AngularJS And ReactJS
1 min read
  • Learn React

Which is Difference Between AngularJS And ReactJS

December 16, 2022
What is higher-order component in Reactjs
2 min read
  • Learn React

What is higher-order component in Reactjs

December 16, 2022
What is code splitting in ReactJs
3 min read
  • Learn React

What is code splitting in ReactJs

December 16, 2022

This AD Will support Us

Support Us

Coding Ustad LTD Support
Coding Ustad LTD Support

Coding Ustad LTD

Coding Ustad LTD
Coding Ustad LTD

Recent Posts

  • How to Install Node.js and npm on CentOS 7
  • How to Install Node.js and npm on CentOS 7
  • How to Install CentOS Web Panel (CWP) on CentOS 7
  • The Power of Marketing in Real Estate: A Guide to Boost Your Business
  • Vehicle Verification in Pakistan

Get free Hosting

Hostens.com - A home for your website

You may have missed

How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 3, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 2, 2023
How to Install CentOS Web Panel (CWP) on CentOS 7
3 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install CentOS Web Panel (CWP) on CentOS 7

May 2, 2023
The Power of Marketing in Real Estate: A Guide to Boost Your Business https://thaikadar.com/secureinvestment/
2 min read
  • Article By Spoke Right
  • Blog By Spoke Right
  • Circular Byte Private Limited

The Power of Marketing in Real Estate: A Guide to Boost Your Business

January 30, 2023
  • Home
  • Our Services
  • Free Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
  • Contact Us
Copyright © All rights reserved. | MoreNews by AF themes.