Published on January 16, 2021

How to create Tailwind Tables using React.

Tailwind React Table

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

cd Documents
npx 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

cd project-name

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

bash

npm 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

npx 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.

module.exports = {
	content: ["./src/**/*.{js,jsx,ts,tsx}"],
	theme: {
		extend: {},
	},
	plugins: [],
};

Add the Tailwind directives to your CSS

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

css

@tailwind base;
@tailwind components;
@tailwind utilities;

After this, we run our project

bash

npm 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

const people = [
	{
		name: "Jane Cooper",
		title: "Regional Paradigm Technician",
		department: "Optimization",
		role: "Admin",
		email: "jane.cooper@example.com",
		image: "https://bit.ly/33HnjK0",
	},
	{
		name: "John Doe",
		title: "Regional Paradigm Technician",
		department: "Optimization",
		role: "Tester",
		email: "john.doe@example.com",
		image: "https://bit.ly/3I9nL2D",
	},
	{
		name: "Veronica Lodge",
		title: "Regional Paradigm Technician",
		department: "Optimization",
		role: " Software Engineer",
		email: "veronica.lodge@example.com",
		image: "https://bit.ly/3vaOTe1",
	},
	// More people...
];

export default function App() {
	return (
		<div className="flex flex-col">
			<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
				<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
					<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
						<table className="min-w-full divide-y divide-gray-200">
							<thead className="bg-gray-50">
								<tr>
									<th
										scope="col"
										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
									>
										Name
									</th>
									<th
										scope="col"
										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
									>
										Title
									</th>
									<th
										scope="col"
										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
									>
										Status
									</th>
									<th
										scope="col"
										className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
									>
										Role
									</th>
									<th scope="col" className="relative px-6 py-3">
										<span className="sr-only">Edit</span>
									</th>
								</tr>
							</thead>
							<tbody className="bg-white divide-y divide-gray-200">
								{people.map((person) => (
									<tr key={person.email}>
										<td className="px-6 py-4 whitespace-nowrap">
											<div className="flex items-center">
												<div className="flex-shrink-0 h-10 w-10">
													<img
														className="h-10 w-10 rounded-full"
														src={person.image}
														alt=""
													/>
												</div>
												<div className="ml-4">
													<div className="text-sm font-medium text-gray-900">
														{person.name}
													</div>
													<div className="text-sm text-gray-500">
														{person.email}
													</div>
												</div>
											</div>
										</td>
										<td className="px-6 py-4 whitespace-nowrap">
											<div className="text-sm text-gray-900">
												{person.title}
											</div>
											<div className="text-sm text-gray-500">
												{person.department}
											</div>
										</td>
										<td className="px-6 py-4 whitespace-nowrap">
											<span
												className="px-2 inline-flex text-xs leading-5
                      font-semibold rounded-full bg-green-100 text-green-800"
											>
												Active
											</span>
										</td>
										<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
											{person.role}
										</td>
										<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
											<a
												href="#"
												className="text-indigo-600 hover:text-indigo-900"
											>
												Edit
											</a>
										</td>
									</tr>
								))}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	);
}

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

export const TableExample1 = () => {
	return (
		<div className="flex flex-col">
			<div className="overflow-x-auto">
				<div className="p-1.5 w-full inline-block align-middle">
					<div className="overflow-hidden border rounded-lg">
						<table className="min-w-full divide-y divide-gray-200">
							<thead className="bg-gray-50">
								<tr>
									<th
										scope="col"
										className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "
									>
										ID
									</th>
									<th
										scope="col"
										className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "
									>
										Name
									</th>
									<th
										scope="col"
										className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "
									>
										Email
									</th>
									<th
										scope="col"
										className="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase "
									>
										Edit
									</th>
									<th
										scope="col"
										className="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase "
									>
										Delete
									</th>
								</tr>
							</thead>
							<tbody className="divide-y divide-gray-200">
								<tr>
									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
										1
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										Jone Doe
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										jonne62@gmail.com
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-green-500 hover:text-green-700" href="#">
											Edit
										</a>
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-red-500 hover:text-red-700" href="#">
											Delete
										</a>
									</td>
								</tr>
								<tr>
									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
										2
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										Jone Doe
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										jonne62@gmail.com
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-green-300 hover:text-green-700" href="#">
											Edit
										</a>
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-red-500 hover:text-red-700" href="#">
											Delete
										</a>
									</td>
								</tr>
								<tr>
									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
										3
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										Jone Doe
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										jonne62@gmail.com
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-green-500 hover:text-green-700" href="#">
											Edit
										</a>
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-red-500 hover:text-red-700" href="#">
											Delete
										</a>
									</td>
								</tr>
								<tr>
									<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
										4
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										Mary Poppins
									</td>
									<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
										marypoppins@gmail.com
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-green-300 hover:text-green-700" href="#">
											Edit
										</a>
									</td>
									<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
										<a className="text-red-500 hover:text-red-700" href="#">
											Delete
										</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	);
};

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 a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe