What do you understand by the HTTP Status Codes ?

How to create a table in ReactJS ?

Last Updated : 07 Apr, 2025

In ReactJS, tables are commonly used to display data in rows and columns. Tables can be static, where data is hardcoded, or dynamic, where data is passed from an array or fetched from an API. React makes it simple to create interactive and dynamic tables, with additional features such as sorting, pagination, and more, all within reusable components.

Prerequisites

Before getting started, ensure you have the following prerequisites:

Steps to create a React application

1. Create a React Project:

To create a new React application, run the following command in the terminal:

npx create-react-app react-table

2. Navigate to the Project Directory:

Change to the project directory by running:

cd react-table

Project Structure:

Approaches for Creating Tables in ReactJS

React allows different approaches for creating tables, ranging from static tables with hardcoded data to dynamic tables with features like sorting and pagination.

Approach 1. Static Table with Hardcoded Data

In this approach, we manually define the table structure and hardcode the data. Here’s how to do it:

JavaScript

// Filename - App.js
import './App.css';

function App() {
return (
<div className="App">
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
        <tr>
            <td>Anom</td>
            <td>19</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Megha</td>
            <td>19</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Subham</td>
            <td>25</td>
            <td>Male</td>
        </tr>
    </table>
</div>
);
}

export default App;

Output

Screenshot-from-2023-10-17-16-28-30

Approach 2: Dynamic Table from an Array of Objects

This approach dynamically generates table rows by iterating over an array of objects using JavaScript’s Array.map() method. This is ideal for rendering data stored in arrays.

CSS

/* Filename - App.css*/
.App {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    border: 2px solid forestgreen;
    width: 800px;
    height: 200px;
}

th {
    border-bottom: 1px solid black;
}

td {
    text-align: center;
}

JavaScript

// Filename - App.js
import './App.css';

// Example of a data array that
// you might receive from an API
const data = [
    { name: "Anom", age: 19, gender: "Male" },
    { name: "Megha", age: 19, gender: "Female" },
    { name: "Subham", age: 25, gender: "Male" },
]

function App() {
    return (
        <div className="App">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Gender</th>
                </tr>
                {data.map((val, key) => {
                    return (
                        <tr key={key}>
                            <td>{val.name}</td>
                            <td>{val.age}</td>
                            <td>{val.gender}</td>
                        </tr>
                    )
                })}
            </table>
        </div>
    );
}

export default App;

Output

More Examples on React Tables

To enhance the user experience with large data sets, we often add functionalities like sorting and pagination to React tables.

Table with Sorting Functionality

Sorting is commonly implemented by maintaining a state that tracks the sorting configuration. By clicking on the column headers, users can change the order of the data.

App.js

import React from 'react';
import './App.css';
import './index.css';
import SortableTable from './SortableTable';

function App() {
  return (
    <div className="App">
      <h1 className="text-2xl font-bold text-center mt-4">Sortable User Data Table</h1>
      <SortableTable />
    </div>
  );
}

export default App;

SortableTable.js

import React, { useState } from 'react';

const SortableTable = () => {
    const [sortConfig, setSortConfig] = useState({ key: 'name', direction: 'ascending' });
    const data = [
        { name: 'Amit Sharma', age: 28 },
        { name: 'Priya Singh', age: 34 },
        { name: 'Ravi Kumar', age: 23 },
        { name: 'Anjali Patel', age: 45 },
        { name: 'Vikram Yadav', age: 40 },
    ];

    const sortedData = [...data].sort((a, b) => {
        if (sortConfig !== null) {
            const { key, direction } = sortConfig;
            if (a[key] < b[key]) {
                return direction === 'ascending' ? -1 : 1;
            }
            if (a[key] > b[key]) {
                return direction === 'ascending' ? 1 : -1;
            }
        }
        return 0;
    });

    const handleSort = (key) => {
        let direction = 'ascending';
        if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
            direction = 'descending';
        }
        setSortConfig({ key, direction });
    };

    return (
        <div>
            <h2>Sortable Table</h2>
            <table border="1" style={{ width: '50%', margin: '20px auto', textAlign: 'left' }}>
                <thead>
                    <tr>
                        <th onClick={() => handleSort('name')} style={{ cursor: 'pointer' }}>
                            Name {sortConfig.key === 'name' && (sortConfig.direction === 'ascending' ? '🔼' : '🔽')}
                        </th>
                        <th onClick={() => handleSort('age')} style={{ cursor: 'pointer' }}>
                            Age {sortConfig.key === 'age' && (sortConfig.direction === 'ascending' ? '🔼' : '🔽')}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {sortedData.map((person, index) => (
                        <tr key={index}>
                            <td>{person.name}</td>
                            <td>{person.age}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default SortableTable;

postcss.config.js

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

Output

sorted-table-

Table with Sorting Functionality

Table with Pagination

Pagination divides the data into smaller chunks, making it easier for users to navigate through large datasets.

PaginatedTables.js

import React, { useState } from 'react';

const PaginatedTable = () => {
  const data = [
    { id: 1, name: 'Amit Sharma', age: 28, job: 'Software Developer' },
    { id: 2, name: 'Priya Singh', age: 34, job: 'Product Manager' },
    { id: 3, name: 'Ravi Kumar', age: 23, job: 'UI/UX Designer' },
    { id: 4, name: 'Anjali Patel', age: 45, job: 'Project Manager' },
    { id: 5, name: 'Vikram Yadav', age: 40, job: 'Engineer' },
    { id: 6, name: 'Neha Gupta', age: 32, job: 'Data Scientist' },
    { id: 7, name: 'Suresh Reddy', age: 38, job: 'Scientist' },
    { id: 8, name: 'Pooja Desai', age: 35, job: 'Architect' },
    { id: 9, name: 'Rahul Mehta', age: 29, job: 'Manager' },
    { id: 10, name: 'Sonia Kapoor', age: 31, job: 'HR Specialist' },
  ];
  const itemsPerPage = 5;
  const [currentPage, setCurrentPage] = useState(1);

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;

  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div className="max-w-4xl mx-auto my-8 p-4 shadow-lg rounded-lg bg-white">
      <table className="table-auto w-full text-left border-collapse border border-gray-300">
        <thead className="bg-blue-100">
          <tr>
            <th className="px-6 py-3 font-medium text-gray-700">ID</th>
            <th className="px-6 py-3 font-medium text-gray-700">Name</th>
            <th className="px-6 py-3 font-medium text-gray-700">Age</th>
            <th className="px-6 py-3 font-medium text-gray-700">Job</th>
          </tr>
        </thead>
        <tbody>
          {currentItems.map((person) => (
            <tr key={person.id} className="border-b hover:bg-gray-50">
              <td className="px-6 py-3">{person.id}</td>
              <td className="px-6 py-3">{person.name}</td>
              <td className="px-6 py-3">{person.age}</td>
              <td className="px-6 py-3">{person.job}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Pagination Controls */}
      <div className="mt-4 flex justify-between items-center">
        <button
          onClick={() => handlePageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-700 disabled:opacity-50"
        >
          Previous
        </button>
        <div className="text-gray-700">
          Page {currentPage} of {Math.ceil(data.length / itemsPerPage)}
        </div>
        <button
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === Math.ceil(data.length / itemsPerPage)}
          className="px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-700 disabled:opacity-50"
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default PaginatedTable;

App.js

import React from 'react';
import PaginatedTable from './PaginatedTable';

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-semibold text-center mt-8">Paginated User Data Table</h1>
      <PaginatedTable />
    </div>
  );
}

export default App;

Output

Conclusion

Creating tables in ReactJS is straightforward and can be customized based on the complexity and dynamic nature of the data. Whether you’re working with static data, dynamic data from arrays, or adding interactive features like sorting and pagination, React’s component-based architecture makes it easy to build and manage tables.

What do you understand by the HTTP Status Codes ?

anomic30

Improve

Article Tags :

Similar Reads

How to create a table in react-native ?

React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m

How To Create a Website in ReactJS?

ReactJS is one of the most popular JavaScript libraries for building user interfaces. It allows you to create dynamic, reusable UI components and efficiently manage state and events. In this article, we'll walk through the steps to create a basic website using ReactJS. PrerequisitesNPM & Node.js

How to create SpreadSheet in ReactJS ?

In this article, we are going to learn how we can create SpreadSheet in ReactJs. A spreadsheet is a file that exists of cells in rows and columns and can help arrange, calculate and sort data. React is a free and open-source front-end JavaScript library for building user interfaces or UI components.

How to use Table Component in ReactJS ?

Tables display sets of data. They can be fully customized. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Table Component in React JS using the following approach. Prerequisites:NodeJS or NPMReact JSMaterial UIApproach:Data Formatting:Use

How to create components in ReactJS ?

Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C

How to add Table in React Native ?

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities. In this article, we will

How to get cell value on React-Table ?

React-Table is a powerful library that allows you to create flexible and feature-rich tables in your React applications. It provides various functionalities to manipulate and interact with table data. One common requirement is to retrieve the value of a specific cell in React-Table. In this article,

How to use map() to Create Lists in ReactJS ?

The map function is generally used to render the list items dynamically in react. This function iterates over the array and each iteration returns the JSX for respective item. It helps to render and display the list efficiently. Prerequisites:React JSJavaScript Array.mapApproachTo create and render

How to create a table row using HTML?

Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody

How to create a Dictionary App in ReactJS ?

In this article, we will be building a very simple Dictionary app with the help of an API. This is a perfect project for beginners as it will teach you how to fetch information from an API and display it and some basics of how React actually works. Also, we will learn about how to use React icons. L