drehimself/tailwindcss-tables

Bootstrap styled tables for Tailwind CSS

Tailwind CSS Tables Plugin

This plugin generates bootstrap styled tables in Tailwind CSS. Anything in the bootstrap tables documentation should work.

Installation

# With NPM
npm install tailwindcss-tables --save

# With Yarn
yarn add tailwindcss-tables

# Manually
# Create a /plugins/tailwindcss-tables folder in your project and drop 'index.js' inside of it.

Usage

To use the plugin, simply require it in your Tailwind config file.

plugins: [
  // Other plugins...
  require('tailwindcss-tables')(),

  // If pulled in manually...
  require('./plugins/tailwindcss-tables')(),
],

You can now use any of bootstrap's table classes in your project.

Examples

Basic example from bootstrap docs:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Using Tailwind's utilities

You are free to use Tailwind's utilities to customize the table. Works with Tailwind v1.0 or pre Tailwind v1.0. Just adjust your class names.

<table class="table">
  <thead class="bg-blue-500 text-white">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td class="bg-red-500 text-white">Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Customization

I've exposed a few options that are a bit cumbersome to change using utilities.

plugins: [
  // Other plugins...
  require('tailwindcss-tables')({
    cellPadding: '.75rem',  // default: .75rem
    tableBorderColor: '#dee2e6',  // default: #dee2e6
    tableStripedBackgroundColor: 'rgba(0,0,0,.05)',  // default: rgba(0,0,0,.05)
    tableHoverBackgroundColor: 'rgba(0,0,0,.075)',  // default: rgba(0,0,0,.075)
    tableBodyBorder: true, // default: true. If set to false, borders for the table body will be removed. Only works for normal tables (i.e. does not apply to .table-bordered)
    verticalAlign: 'top', // default: 'top'
  }),
],

Again, have a look at bootstrap's tables documentation for other options. For example, wrap your table in a div.table-responsive class and your table should be responsive.

Enjoy!

tailwindcss-tables's Issues

Does not seem to be compatible with Tailwind 1.0+

Styles don't seem to work with tailwind 1.0+. Plugin was brought in via yarn.

Borders

Is it possible to still use the tailwind border classes? I can't seem to be able to assign "border-2 border-black" to any table elements to get it to work.

I've hidden all the table borders by setting the color to the same color as my background, but it feels like a dirty hack.

For example I don't want the table to have any borders, but I want there to be a border under the table head.

Change the vertical-align: top;

Thanks for a nice packages.

How can i change the vertical-align: top; to vertical-align: middle;

Breaks Tailwind 2.x

Hi,

Just letting you know that I love the concept but when I pulled this down and added it to my project, I lost all formatting on my application including where there was no tables

Borderless

Love the plugin. Been a huge help.

Would it be possible to get the 'table-borderless' class added to this.
https://getbootstrap.com/docs/4.3/content/tables/#borderless-table

Thank in advance.

Un-wanted Border on top and right side

I found this issue when putting the table on top of a colored background. I was able to remove the top border by applying a border-top: 0; style to each of the header th tags

<th style="border-top: 0" scope="col">#</th>

I was not able to find where the border or space on the right side was coming from. Image below depicts both borders