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.
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 |
|
|
|
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.
-
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).
-
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 |
|
|
|
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 |
- 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.
Advance your career as a MEAN stack developer with the Post Graduate Program In Full Stack Web Development. Enroll now!
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 Development Certification Course 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.
