How to create React Tables using Tailwind CSS.
Tags: tailwindcss, webdev, codenewbie
Published: 2022-01-17 09:19:39

---
title: How to create React Tables using Tailwind CSS.
published: True
date: 2021-01-10 01:16:04 UTC
tags: ["tailwindcss", "webdev", 'codenewbie']
canonical_url: https://www.devwares.com/blog//how-to-create-react-tables-using-tailwind-css
---

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](https://nodejs.org/en/).
- Alternatively, we can use another package manager, [Yarn](https://yarnpkg.com/).

## What is Tailwind CSS

[TailwindCSS](https://tailwindcss.com/) 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/`.

![React Bootstrap Tables](https://www.devwares.com/blog/images//blog/images/REACT.png)

## 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](https://www.devwares.com/blog/images/react-tailwindcss-tables.PNG)

```react

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](https://tailwindui.com/pricing).

## 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.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)


## Resources

You may also find the following resources useful :

- [Link to the Github Code](https://github.com/Iheanacho-ai/devwares-tailwind-tables)

- [Link to the Tailwind Tables Docs]
(https://tailwindui.com/components/application-ui/lists/tables)

- [Contrast React Tables](https://www.devwares.com/docs/contrast/react/table/table)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react)

- [ How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table](https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)