React-table is an open-source library for creating tables in the React framework. It is an expandable Datagrid built for React that is lightweight, fast, and fully customizable (JSX, templates, state, styles, and callbacks). Many well-known tech businesses, such as Google, Apple, and Microsoft, use it.

Why Is Table in ReactJS Important?

React-table is a popular choice since it's simple to set up, customize, and extend. The sorting, filtering, and pagination features of tables in ReactJS make it a powerful and declarative tool. React-table has its own plugin system that allows us to alter or expand any logical phase, stage, or process behind the scenes. We can also customize its look and appearance until the last component.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

DataTable in ReactJS

Creating Table in ReactJS

To create a table in ReactJS, we need to use a package manager (Yarn or npm) to install a react-table and then import the library into our React app by running the following command. 

import { useTable } from 'react-table';

After the react-table has been installed and imported, we must describe our data and columns.

Example 1:

Like APIs, we have data in the form of an array of objects. You can also use the API.

We start by making a simple component and saving the data in the state.

import React, { Component } from 'react'

class Table extends Component {

   constructor(props) {

      super(props) //since we are extending class Table so we have to use super in order to override Component class constructor

      this.state = { //state is by default an object

         students: [

            { id: 1, name: 'deepak', age: 21, email: 'deepak@email.com' },

            { id: 2, name: 'arsad', age: 19, email: 'arsad@email.com' },

            { id: 3, name: 'raman', age: 16, email: 'raman@email.com' },

            { id: 4, name: 'ajeet', age: 25, email: 'ajeet@email.com' }

         ]

      }

   }

   render() { //Whenever our class runs, the render method will be called automatically. It may have already been defined in the constructor behind the scene.

      return (

         <div>

            <h1>React Dynamic Table</h1>

         </div>

      )

   }

}

export default Table 

Output:

React Dynamic Table

ID

NAME

AGE

EMAIL

1

deepak

21

deepak@email.com

HIDE

2

arsad

19

arsad@email.com

HIDE

3

raman

16

raman@email.com

HIDE

4

ajeet

25

ajeet@email.com

HIDE

In web programs, tables are essential for showing data. Forms on a different page or in a modal are frequently used in conjunction with them. However, when we only need to change one column on a form, it can be time consuming. As a result, editable tables are required to avoid the inconvenience of having to construct a form for the table. This method has the added benefit of improving the user experience (UX) of your program by reducing the number of interfaces a user must engage with. We'll also be able to dynamically populate table rows with data, ensuring that our tables are constantly up to date.

We have four students with id, name, age, and email address, and because our table is dynamic, we can store any number of students.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

  • For Table Data:

Now, we want to publish the data from the students in the DOM (Document Object Model). In react, we frequently use the map function to iterate over an array.

We will create a separate table data function and call it from our render method. Our code will be cleaner and easier to read due to this technique.

Our renderTableData method just returns tr, not the tr inside the table, as you may have noticed. We must surround tr inside table and tbody in our render method since tr cannot be a child of div by itself.

  • For Adding Table Heading:

#title {

  text-align: center;

  font-family: arial, sans-serif;

}

#students {

  text-align: center;

  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

  border-collapse: collapse;

  border: 3px solid #ddd;

  width: 100%;

}

#students td, #students th {

  border: 1px solid #ddd;

  padding: 8px;

}

#students tr:nth-child(even){background-color: #f2f2f2;}

#students tr:hover {background-color: #ddd;}

#students th {

  padding-top: 12px;

  padding-bottom: 12px;

  text-align: center;

  background-color: #4CAF50;

  color: white;

}

We used Object.Keys to get an array of all the students' keys, which we saved in a variable header. As a result, we may use the map method to traverse over the header (array).

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

  • For Adding Style to the Table Using CSS:

#title {

  text-align: center;

  font-family: arial, sans-serif;

}

#students {

  text-align: center;

  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

  border-collapse: collapse;

  border: 3px solid #ddd;

  width: 100%;

}

#students td, #students th {

  border: 1px solid #ddd;

  padding: 8px;

}

#students tr:nth-child(even){background-color: #f2f2f2;}

#students tr:hover {background-color: #ddd;}

#students th {

  padding-top: 12px;

  padding-bottom: 12px;

  text-align: center;

  background-color: #4CAF50;

  color: white;

}

Output:

React Dynamic Table

ID

NAME

AGE

EMAIL

1

deepak

21

deepak@email.com

HIDE

2

arsad

19

raman@email.com

HIDE

3

raman

16

arsad@email.com

HIDE

4

ajeet

25

ajeet@email.com

HIDE

Example 2:

useTable is the most critical Hook for our table. We'll give useTable two arguments:

  • data - data from a table that has been defined with the help of Memo Hook. (data must be customized before it can be sent to another program to save calculation time by eliminating repeats of unchanging data).

const data = React.useMemo(() =>

 [

 {

 name: 'Deepak Kumar',

 address: 'Darbhanga, Bihar',

 date: '07/11/2020',

 branch: 'IT',

 },

 {

 name: 'Shubham Kumar',

 address: 'Telangana',

 date: '07/11/2020',

 branch: 'IT',

 },

 {

 name: 'Anshul Roy',

 address: 'Maharashtra',

 date: '07/10/2020',

 branch:'Computer’,

 },

 {

 name: 'Ravi Kumar',

 address: 'Gujrat',

 date: '07/09/2020',

 order:`Computer’,

 },

 {

 name: 'Chinmay Ranjan',

 address: 'Uttrakhand',

 date: '07/07/2020',

  branch:'Computer’, },

 {

 name: 'Hrithik Ranjan',

 address: 'Uttar pradesh',

 date: '07/07/2020',

  branch:'Computer’,

 },

 ],

 []

)

Output:

Name 

Address

Date

Branch

Deepak Kumar

Darbhanga, Bihar

07/11/202

IT

Shubham Kumar

Talengana

07/11/2020

IT

Anshul Roy

Maharashtra

07/10/2020

Computer

Ravi Kumar 

Gujrat

07/09/2020

Computer

Chinmay Ranjan

Uttrakhand

07/07/2020

Computer

Hrithik Ranjan

Uttar pradesh

07/07/2020

Computer

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!
  • columns - the useMemo Hook's column definitions (column defs must be memoized before they can be passed to useTable)

const columns = React.useMemo(

 () => [

 {

 Header: 'College Student',

 columns: [

 {

 Header: 'Name',

 accessor: 'name',

 },

 {

 Header: 'Address',

 accessor: 'address',

 },

 ],

 },

 {

 Header: 'Branch',

 columns: [

 {

 Header: 'Date',

 accessor: 'date',

 },

 {

 Header: 'Branch',

 accessor: 'Branch Info',

 },

 ],

 },

 ],

 []

)

Output:-

College Student

Branch Info

Name 

Address

Date

Branch

Deepak Kumar

Darbhanga, Bihar

07/11/202

IT

Shubham Kumar

Talengana

07/11/2020

IT

Anshul Roy

Maharashtra

07/10/2020

Computer

Ravi Kumar 

Gujrat

07/09/2020

Computer

Chinmay Ranjan

Uttrakhand

07/07/2020

Computer

Hrithik Ranjan

Uttar pradesh

07/07/2020

Computer

Advantages of Table in ReactJS

  • When we click on a column header, ReactTable has built-in capabilities for sorting data in ascending and descending order.
  • Pagination is available on both the client and server sides.
  • It has filters.
  • Minimal design and easily themeable.
Accelerate your career as a skilled MERN Stack Developer by enrolling in a unique Full Stack Developer - MERN Stack Master's program. Get complete development and testing knowledge on the latest technologies by opting for the MERN Stack Developer Course. Contact us TODAY!

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Conclusion

In the React framework, React-table is an open-source library for building tables. It offers several features that make development easy for developers. However, it is not easily customizable and has poor documentation.

If you are interested in learning more about React JS and other related concepts, you can enroll in Simplilearn’s exclusive Full Stack Web Developer - MERN and accelerate your career as a software developer. The program comprises a variety of software development courses, ranging from the fundamentals to advanced topics. 

Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these courses to upgrade your skills and advance your career.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 16 Dec, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 27 Nov, 2024

8 months$ 1,499
Full Stack Java Developer Masters Program

Cohort Starts: 18 Dec, 2024

7 months$ 1,449
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 8 Jan, 2025

6 Months$ 1,449

Recommended Reads