React Bootstrap Tables are arrangements of data, displayed in rows and columns, they make it easier to compare data and make sense of the data. They are used frequently especially to analyze data as it is a lot less error-prone and a lot more accessible to represent data in a tabular form.
Table of Content
- Prerequisites
- What is Tailwind CSS
- Creating our React project
- Installing Tailwind CSS
- Creating our React Bootstrap Table
- Conclusion
- Resources
Prerequisities
To make the most of this article, it is important that you have the following:
- A basic understanding of HTML.
- A basic understanding of CSS.
- A basic understanding of React.
- Node and it’s 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 developer to use custom-made CSS classes that give the developers access to CSS styles that makes it easier and a lot faster to build applications.
"It's fast, flexible, and reliable".
Creating our React project
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, cd into the project your created earlier
cd project-name
next run
npm install -D tailwindcss postcss autoprefixer
The piece of code above allows us to install the tailwindcss and its peer dependencies in our project, we then generate our tailwind.config.js and postcss.config.js files by running this command:
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: [],
}
Next add the Tailwind directives to your CSS
Add the tailwind directives in your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
After this we run our project
npm run start
You should this in your browser when you go to http://localhost:3000/.
Creating our React Bootstrap Table
Default React Bootstrap Table
This default react bootstrap table allows us to align or arrange content in multiple lines, we also get access to the use of avatars as we can see in the image below:
const people = [
{
name: 'Jane Cooper',
title: 'Regional Paradigm Technician',
department: 'Optimization',
role: 'Admin',
email: 'jane.cooper@example.com',
image:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'John Doe',
title: 'Regional Paradigm Technician',
department: 'Optimization',
role: 'Tester',
email: 'john.doe@example.com',
image:
'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60',
},
{
name: 'Veronica Lodge',
title: 'Regional Paradigm Technician',
department: 'Optimization',
role: ' Software Engineer',
email: 'veronica.lodge@example.com',
image:
'https://media.istockphoto.com/photos/portrait-of-smiling-mixed-race-woman-looking-at-camera-picture-id1319763830?b=1&k=20&m=1319763830&s=170667a&w=0&h=wE44n9yP1nrefeqv5DCl5mE3ouU01FNNHeZPR0yDCWA=',
},
// 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 piece of code below we render the information we get 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: table header, table row, and table data respectively.
The people.map function loops over the people object and renders the information in the object.
This table template however is the free package, to check out the pricing for the pro package go here.
Conclusion
In this article we discussed what tailwind CSS is and why you would need to incorporate the library in your project. We also discussed creating a table with the Tailwind CSS template.
Design and code tailwind css websites 3x faster
We created a tool to visually build Tailwind CSS components, prototypes, websites, and webapps. Ship projects faster using an intuitive tailwind builder and editor.Try Windframe out for free.
Resources
You may also find the following resources useful :
Tailwind grid-How to use tailwind CSS grid templates in your project
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
How to use tailwind CSS padding, margin and border in your project
How to create a beautiful React Bootstrap select with icons.
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind Modal-How to create a React Modal using Tailwind CSS.
How to Implement a React Step Progress Bar Using Tailwind CSS
Top comments (0)