postImage

How to create React Tables using TailwindCSS.

blogImage

By Amarachi Iheanacho

Technical Writer

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 alot less error-prone and a lot more accessible to represent data in a tabular form.

Table of Content

  • Prerequisites
  • What is TailwindCSS
  • 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 TailwindCSS

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.

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

Installing Tailwind CSS

Next up you install the tailwindcss library in your project, cd into the project your created earlier

1cd project-name

next run

1npm 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:

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: [
3 "./src/**/*.{js,jsx,ts,tsx}",
4 ],
5 theme: {
6 extend: {},
7 },
8 plugins: [],
9}

Next add the Tailwind directives to your CSS

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

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

After this we run our project

1npm run start

You should this in your browser when you go to http://localhost:3000/.

React Bootstrap Tables

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:

React Bootstrap Tables

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

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 TailwindCSS template.

Resources

You may also find the following resources useful :

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...