Last updated: September 2, 2025

How to create Tailwind Tables using React.

By Amarachi Iheanacho - Technical Content Writer at Windframe

This article will guide you through the process of creating Tailwind Tables using React. Tailwind Tables are an essential part of many web applications, allowing you to present data in a structured and organized manner. We will cover the step-by-step process of building a Tailwind Table with various features like sorting, filtering, and pagination.

Table of Content

Prerequisites
What is Tailwind CSS
Creating our Tailwind Table using React
Installing Tailwind CSS
Creating our React Tailwind CSS Table
Tailwind Tables Examples
Conclusion
Resources

Prerequisities

To make the most of this article, you must have the following:

A basic understanding of HTML.
A basic understanding of CSS.
A basic understanding of React.
Node and its package manager, npm, Run the command node -v && npm -v to verify we have them installed, or install them from here.
Alternatively, we can use another package manager, Yarn.

What is Tailwind CSS

TailwindCSS is a self-proclaimed utility-first CSS framework, that allows the developer to use custom-made CSS classes that give the developers access to CSS styles that make it easier and a lot faster to build applications.

"It's fast, flexible, and reliable".

To start creating our react Tailwind table application we have to first create a react project.

Creating our Tailwind Table using React

To create a new react project, we go to our terminal, cd in the directory we want, and then run this command npx create-react-app project-name.

Bash

1cd Documents
2npx create-react-app project-name

Installing Tailwind CSS

Next up you install the tailwind CSS library in your project, and we change the directory to the project you created earlier.

Bash

1cd project-name

The next thing is to install Tailwind CSS into this directory using "npm install".

Bash

1npm install -D tailwindcss postcss autoprefixer

The piece of code above allows us to install the Tailwind CSS and its peer dependencies in our Tailwind table project, we then generate our tailwind.config.js and postcss.config.js files by running the following command below:

Bash

1npx tailwindcss init -p

Configuring your templates path

To configure your paths go to your tailwind.config.js, and edit your module.exports object, add the paths to your template files in your content array.

1module.exports = {
2	content: ["./src/**/*.{js,jsx,ts,tsx}"],
3	theme: {
4		extend: {},
5	},
6	plugins: [],
7};

Add the Tailwind directives to your CSS

Add the tailwind directives in your ./src/index.css file.

CSS

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

After this, we run our project

Bash

1npm run start

You should see the image below on our browser when you go to http://localhost:3000/.

React Bootstrap Tables

Creating our React Table Using Tailwind CSS

React Table with Tailwind CSS

Building a react table with Tailwind CSS is easy at this stage. so far, we have installed our react and Tailwind CSS into our project. The next step will be to start writing our code on files.

The react Tailwind Table will allow us to align or arrange content in multiple lines, and also add avatars to our tables.

JSX

1const people = [
2	{
3		name: "Jane Cooper",
4		title: "Regional Paradigm Technician",
5		department: "Optimization",
6		role: "Admin",
7		email: "jane.cooper@example.com",
8		image: "https://bit.ly/33HnjK0",
9	},
10	{
11		name: "John Doe",
12		title: "Regional Paradigm Technician",
13		department: "Optimization",
14		role: "Tester",
15		email: "john.doe@example.com",
16		image: "https://bit.ly/3I9nL2D",
17	},
18	{
19		name: "Veronica Lodge",
20		title: "Regional Paradigm Technician",
21		department: "Optimization",
22		role: " Software Engineer",
23		email: "veronica.lodge@example.com",
24		image: "https://bit.ly/3vaOTe1",
25	},
26	// More people...
27];
28
29export default function App() {
30	return (
31		<div className="flex flex-col">
32			<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
33				<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
34					<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
35						<table className="min-w-full divide-y divide-gray-200">
36							<thead className="bg-gray-50">
37								<tr>
38									<th
39										scope="col"
40										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
41									>
42										Name
43									</th>
44									<th
45										scope="col"
46										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
47									>
48										Title
49									</th>
50									<th
51										scope="col"
52										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
53									>
54										Status
55									</th>
56									<th
57										scope="col"
58										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
59									>
60										Role
61									</th>
62									<th scope="col" className="relative px-6 py-3">
63										<span className="sr-only">Edit</span>
64									</th>
65								</tr>
66							</thead>
67							<tbody className="bg-white divide-y divide-gray-200">
68								{people.map((person) => (
69									<tr key={person.email}>
70										<td className="px-6 py-4 whitespace-nowrap">
71											<div className="flex items-center">
72												<div className="flex-shrink-0 h-10 w-10">
73													<img
74														className="h-10 w-10 rounded-full"
75														src={person.image}
76														alt=""
77													/>
78												</div>
79												<div className="ml-4">
80													<div className="text-sm font-medium text-gray-900">
81														{person.name}
82													</div>
83													<div className="text-sm text-gray-500">
84														{person.email}
85													</div>
86												</div>
87											</div>
88										</td>
89										<td className="px-6 py-4 whitespace-nowrap">
90											<div className="text-sm text-gray-900">
91												{person.title}
92											</div>
93											<div className="text-sm text-gray-500">
94												{person.department}
95											</div>
96										</td>
97										<td className="px-6 py-4 whitespace-nowrap">
98											<span
99												className="px-2 inline-flex text-xs leading-5
100                      font-semibold rounded-full bg-green-100 text-green-800"
101											>
102												Active
103											</span>
104										</td>
105										<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
106											{person.role}
107										</td>
108										<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
109											<a
110												href="#"
111												className="text-indigo-600 hover:text-indigo-900"
112											>
113												Edit
114											</a>
115										</td>
116									</tr>
117								))}
118							</tbody>
119						</table>
120					</div>
121				</div>
122			</div>
123		</div>
124	);
125}

In the code above, we rendered the information we got in the people object, which could be named and also contain anything. We use the table element to create the table, and elements like th, tr, td for different parts of the table, these parts are the table header, table row, and table data respectively. The people.map function loops over the people object and renders the information in the object.

Preview

The react table using Tailwind CSS will look like the image below.

Name	Title	Status	Role	Edit
Jane Cooper jane.cooper@example.com	Regional Paradigm Technician Optimization	Active	Admin	Edit
John Doe john.doe@example.com	Regional Paradigm Technician Optimization	Active	Tester	Edit
Veronica Lodge veronica.lodge@example.com	Regional Paradigm Technician Optimization	Active	Software Engineer	Edit

Tailwind Tables Examples

Tailwind Table with a delete button

This table contains some ids and emails along with a good design edit button and deletes button.

JSX

1export const TableExample1 = () => {
2	return (
3		<div className="flex flex-col">
4			<div className="overflow-x-auto">
5				<div className="p-1.5 w-full inline-block align-middle">
6					<div className="overflow-hidden border rounded-lg">
7						<table className="min-w-full divide-y divide-gray-200">
8							<thead className="bg-gray-50">
9								<tr>
10									<th
11										scope="col"
12										className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "
13									>
14										ID
15									</th>
16									<th
17										scope="col"
18										className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "
19									>
20										Name
21									</th>
22									<th
23										scope="col"
24										className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "
25									>
26										Email
27									</th>
28									<th
29										scope="col"
30										className="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase "
31									>
32										Edit
33									</th>
34									<th
35										scope="col"
36										className="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase "
37									>
38										Delete
39									</th>
40								</tr>
41							</thead>
42							<tbody className="divide-y divide-gray-200">
43								<tr>
44									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
45										1
46									</td>
47									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
48										Jone Doe
49									</td>
50									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
51										jonne62@gmail.com
52									</td>
53									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
54										<a className="text-green-500 hover:text-green-700" href="#">
55											Edit
56										</a>
57									</td>
58									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
59										<a className="text-red-500 hover:text-red-700" href="#">
60											Delete
61										</a>
62									</td>
63								</tr>
64								<tr>
65									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
66										2
67									</td>
68									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
69										Jone Doe
70									</td>
71									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
72										jonne62@gmail.com
73									</td>
74									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
75										<a className="text-green-300 hover:text-green-700" href="#">
76											Edit
77										</a>
78									</td>
79									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
80										<a className="text-red-500 hover:text-red-700" href="#">
81											Delete
82										</a>
83									</td>
84								</tr>
85								<tr>
86									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
87										3
88									</td>
89									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
90										Jone Doe
91									</td>
92									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
93										jonne62@gmail.com
94									</td>
95									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
96										<a className="text-green-500 hover:text-green-700" href="#">
97											Edit
98										</a>
99									</td>
100									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
101										<a className="text-red-500 hover:text-red-700" href="#">
102											Delete
103										</a>
104									</td>
105								</tr>
106								<tr>
107									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
108										4
109									</td>
110									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
111										Mary Poppins
112									</td>
113									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
114										marypoppins@gmail.com
115									</td>
116									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
117										<a className="text-green-300 hover:text-green-700" href="#">
118											Edit
119										</a>
120									</td>
121									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
122										<a className="text-red-500 hover:text-red-700" href="#">
123											Delete
124										</a>
125									</td>
126								</tr>
127							</tbody>
128						</table>
129					</div>
130				</div>
131			</div>
132		</div>
133	);
134};

Preview

The Tailwind table should look like the image below.

ID	Name	Email	Edit	Delete
1	Jone Doe	jonne62@gmail.com	Edit	Delete
2	Jone Doe	jonne62@gmail.com	Edit	Delete
3	Jone Doe	jonne62@gmail.com	Edit	Delete
4	Mary Poppins	marypoppins@gmail.com	Edit	Delete

This table template we created here is free using windframe.

which is a lot easier to set up than writing all the codes yourself.

Windframe is a tool created to help you visually build tailwind CSS components, prototypes, websites, and web apps. It also allows you to ship projects faster using an intuitive tailwind builder and editor.

You can check out some of the things you can do with this technology here.

Although there are other Tailwind CSS packages you can use to build this react table using tailwind which is not free. You can check out the pricing here.

Conclusion

In this article, we discussed what tailwind CSS is and why you would need to incorporate the library into your project. We also discussed creating a react table with the Tailwind CSS templates and other tools to make your work faster and easier.

Resources

You may also find the following resources useful :

Back to blog posts

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe