postImage

How to create Tailwind Tables using React.

blogImage

By Amarachi Iheanacho

Technical Writer

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.

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.

cd project-name

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

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:

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.

js
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

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. The react table using Tailwind CSS will look like the image below.

NameTitleStatusRoleEdit
Jane Cooper
jane.cooper@example.com
Regional Paradigm Technician
Optimization
ActiveAdminEdit
John Doe
john.doe@example.com
Regional Paradigm Technician
Optimization
ActiveTesterEdit
Veronica Lodge
veronica.lodge@example.com
Regional Paradigm Technician
Optimization
Active Software EngineerEdit

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>
);
};

The Tailwind table should look like the image below.

IDNameEmailEditDelete
1Jone Doejonne62@gmail.comEditDelete
2Jone Doejonne62@gmail.comEditDelete
3Jone Doejonne62@gmail.comEditDelete
4Mary Poppinsmarypoppins@gmail.comEditDelete

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 :

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner

Related Posts

Comments

...