Package Exports

tailwindcss-tables

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-tables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

bootstrap-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>

bootstrap-table-custom

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.