https://github.com/drehimself/tailwindcss-tables

Bootstrap styled tables for Tailwind CSS
https://github.com/drehimself/tailwindcss-tables

bootstrap bootstrap-table bootstrap4 table tailwind tailwindcss tailwindcss-plugin

Last synced: about 1 month ago
JSON representation

Bootstrap styled tables for Tailwind CSS

• Host: GitHub
• URL: https://github.com/drehimself/tailwindcss-tables
• Owner: drehimself
• License: mit
• Created: 2018-03-28T03:43:04.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-06-18T04:38:14.000Z (over 5 years ago)
• Last Synced: 2024-12-08T00:24:10.122Z (about 2 months ago)
• Topics: bootstrap, bootstrap-table, bootstrap4, table, tailwind, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Size: 13.7 KB
• Stars: 100
• Watchers: 6
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tailwind CSS Tables Plugin

This plugin generates bootstrap styled tables in Tailwind CSS. Anything in the [bootstrap tables documentation](https://getbootstrap.com/docs/4.0/content/tables) should work.

## Installation

```bash

# 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.

```js

plugins: [

  // Other plugins...

  require('tailwindcss-tables')(),

  // If pulled in manually...

  require('./plugins/tailwindcss-tables')(),

],

```

You can now use any of [bootstrap's table classes](https://getbootstrap.com/docs/4.0/content/tables) in your project.

## Examples

#### Basic example from bootstrap docs:

```html

  

    

      #

      First

      Last

      Handle

    

  

  

    

      1

      Mark

      Otto

      @mdo

    

    

      2

      Jacob

      Thornton

      @fat

    

    

      3

      Larry

      the Bird

      @twitter

    

  

```

![bootstrap-table](https://user-images.githubusercontent.com/4316355/38008280-d40e1ee0-321b-11e8-8e9f-24d18df4ea25.png)

#### 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.

```html

  

    

      #

      First

      Last

      Handle

    

  

  

    

      1

      Mark

      Otto

      @mdo

    

    

      2

      Jacob

      Thornton

      @fat

    

    

      3

      Larry

      the Bird

      @twitter

    

  

```

![bootstrap-table-custom](https://user-images.githubusercontent.com/4316355/38009083-4f594ff8-3220-11e8-8eaa-9634dd0eaa73.png)

#### Customization

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

```js

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](https://getbootstrap.com/docs/4.0/content/tables) for other options. For example, wrap your table in a `div.table-responsive` class and your table should be responsive.

#### Enjoy!