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
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;
}
// 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;
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;
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Output
Table with Sorting FunctionalityTable 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;
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.
Similar Reads
How to create Tabs in ReactJS ?
Tabs make it easy to explore and switch between different views. Material UI for React has this component available for us and it is very easy to integrate. We can use Tabs Component in ReactJS using the following approach.Prerequisites:NPM & Node.jsReact JSMaterial UIwe have these approaches to
4 min read
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
2 min read
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.jsR
5 min read
How to create Calendar in ReactJS ?
Creating a calendar in React JS can help in React projects like to-do lists, e-commerce sites, Ticket booking sites, and many more apps. It visualizes the day, month, and year data and makes an interacting User interface.PrerequisitesReact JSNode.js & NPMTo create a calendar in React JS we will
2 min read
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.
2 min read
How to Create List Styling in ReactJS ?
React, a declarative, efficient, and flexible JavaScript library for building user interfaces, plays a crucial role as the 'V' in MVC. Specifically, ReactJS, an open-source, component-based front-end library maintained by Facebook, focuses on the view layer of applications. In this article, we will
3 min read
How to Create Store in React Redux ?
React Redux is a JavaScript library that is used to create and maintain state in React Applications efficiently. Here React Redux solves the problem by creating a redux store that stores the state and provides methods to use the state inside any component directly or to manipulate the state in a def
4 min read
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
3 min read
How to Create Table in HTML?
HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element def
3 min read
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
2 min read