Skip to content

Commit

Permalink
add files
Browse files Browse the repository at this point in the history
  • Loading branch information
@drehimself
drehimself committed Mar 28, 2018
1 parent f54ae4e commit 384f5d1
Show file tree
Hide file tree
Showing 5 changed files with 416 additions and 2 deletions.
9 changes: 9 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
package-lock.json
135 changes: 133 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,133 @@
# 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](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
<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](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.

```html
<table class="table">
<thead class="bg-blue 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 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](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)
}),
],
```

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!



243 changes: 243 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
function optionsWithPropertyExists(options, property) {
return typeof options !== 'undefined' && options.hasOwnProperty(property)
}

module.exports = function (options) {
return function({ addComponents }) {
addComponents({
'table': {
borderCollapse: 'collapse',
},
'caption': {
paddingTop: '.75rem',
paddingBottom: '.75rem',
color: '#6c757d',
textAlign: 'left',
captionSide: 'bottom',
},
'th': {
textAlign: 'inherit',
},
'.table': {
width: '100%',
maxWidth: '100%',
marginBottom: '1rem',
backgroundColor: 'transparent',
'td,th': {
padding: optionsWithPropertyExists(options, 'cellPadding') ? options.cellPadding : '.75rem',
verticalAlign: 'top',
borderTop: optionsWithPropertyExists(options, 'tableBorderColor')
? '1px solid ' + options.tableBorderColor
: '1px solid #dee2e6',
},
'thead th': {
verticalAlign: 'bottom',
borderBottom: optionsWithPropertyExists(options, 'tableBorderColor')
? '2px solid ' + options.tableBorderColor
: '2px solid #dee2e6',
},
'tbody+tbody': {
borderTop: optionsWithPropertyExists(options, 'tableBorderColor')
? '2px solid ' + options.tableBorderColor
: '2px solid #dee2e6',
},
'.table': {
backgroundColor: '#fff',
},
},
'.table-sm td,.table-sm th': {
padding: '.3rem',
},
'.table-bordered': {
border: optionsWithPropertyExists(options, 'tableBorderColor')
? '1px solid ' + options.tableBorderColor
: '1px solid #dee2e6',
'td,th': {
border: optionsWithPropertyExists(options, 'tableBorderColor')
? '1px solid ' + options.tableBorderColor
: '1px solid #dee2e6',
},
'thead td,thead th': {
borderBottomWidth: '2px',
},
},
'.table-striped tbody tr:nth-of-type(odd)': {
backgroundColor: optionsWithPropertyExists(options, 'tableStripedBackgroundColor')
? options.tableStripedBackgroundColor
: 'rgba(0,0,0,.05)',
},
'.table-hover tbody tr:hover': {
backgroundColor: optionsWithPropertyExists(options, 'tableHoverBackgroundColor')
? options.tableHoverBackgroundColor
: 'rgba(0,0,0,.075)',
},
'.table-primary,.table-primary>td,.table-primary>th': {
backgroundColor: '#b8daff',
},
'.table-hover .table-primary:hover': {
backgroundColor: '#9fcdff',
},
'.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th': {
backgroundColor: '#9fcdff',
},
'.table-secondary,.table-secondary>td,.table-secondary>th': {
backgroundColor: '#d6d8db',
},
'.table-hover .table-secondary:hover': {
backgroundColor: '#c8cbcf',
},
'.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th': {
backgroundColor: '#c8cbcf',
},
'.table-success,.table-success>td,.table-success>th': {
backgroundColor: '#c3e6cb',
},
'.table-hover .table-success:hover': {
backgroundColor: '#b1dfbb',
},
'.table-hover .table-success:hover>td,.table-hover .table-success:hover>th': {
backgroundColor: '#b1dfbb',
},
'.table-info,.table-info>td,.table-info>th': {
backgroundColor: '#bee5eb',
},
'.table-hover .table-info:hover': {
backgroundColor: '#abdde5',
},
'.table-hover .table-info:hover>td,.table-hover .table-info:hover>th': {
backgroundColor: '#abdde5',
},
'.table-warning,.table-warning>td,.table-warning>th': {
backgroundColor: '#ffeeba',
},
'.table-hover .table-warning:hover': {
backgroundColor: '#ffe8a1',
},
'.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th': {
backgroundColor: '#ffe8a1',
},
'.table-danger,.table-danger>td,.table-danger>th': {
backgroundColor: '#f5c6cb',
},
'.table-hover .table-danger:hover': {
backgroundColor: '#f1b0b7',
},
'.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th': {
backgroundColor: '#f1b0b7',
},
'.table-light,.table-light>td,.table-light>th': {
backgroundColor: '#fdfdfe',
},
'.table-hover .table-light:hover': {
backgroundColor: '#ececf6',
},
'.table-hover .table-light:hover>td,.table-hover .table-light:hover>th': {
backgroundColor: '#ececf6',
},
'.table-dark,.table-dark>td,.table-dark>th': {
backgroundColor: '#c6c8ca',
},
'.table-hover .table-dark:hover': {
backgroundColor: '#b9bbbe',
},
'.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th': {
backgroundColor: '#b9bbbe',
},
'.table-active,.table-active>td,.table-active>th': {
backgroundColor: 'rgba(0,0,0,.075)',
},
'.table-hover .table-active:hover': {
backgroundColor: 'rgba(0,0,0,.075)',
},
'.table-hover .table-active:hover>td,.table-hover .table-active:hover>th': {
backgroundColor: 'rgba(0,0,0,.075)',
},
'.table .thead-dark th': {
color: '#fff',
backgroundColor: '#212529',
borderColor: '#32383e',
},
'.table .thead-light th': {
color: '#495057',
backgroundColor: '#e9ecef',
borderColor: optionsWithPropertyExists(options, 'tableBorderColor')
? options.tableBorderColor
: '#dee2e6',
},
'.table-dark': {
color: '#fff',
backgroundColor: '#212529',
},
'.table-dark td,.table-dark th,.table-dark thead th': {
borderColor: '#32383e',
},
'.table-dark.table-bordered': {
border: '0',
},
'.table-dark.table-striped tbody tr:nth-of-type(odd)': {
backgroundColor: 'rgba(255,255,255,.05)',
},
'.table-dark.table-hover tbody tr:hover': {
backgroundColor: 'rgba(255,255,255,.075)',
},
'.table-responsive': {
display: 'block',
width: '100%',
overflowX: 'auto',
'-webkit-overflow-scrolling': 'touch',
'-ms-overflow-style': '-ms-autohiding-scrollbar',
},
'.table-responsive>.table-bordered': {
border: '0',
},
'@media (max-width:575.98px)': {
'.table-responsive-sm': {
display: 'block',
width: '100%',
overflowX: 'auto',
'-webkit-overflow-scrolling': 'touch',
'-ms-overflow-style': '-ms-autohiding-scrollbar',
},
'.table-responsive-sm>.table-bordered': {
border: '0',
}
},
'@media (max-width:767.98px)': {
'.table-responsive-md': {
display: 'block',
width: '100%',
overflowX: 'auto',
'-webkit-overflow-scrolling': 'touch',
'-ms-overflow-style': '-ms-autohiding-scrollbar',
},
'.table-responsive-sm>.table-bordered': {
border: '0',
}
},
'@media (max-width:991.98px)': {
'.table-responsive-lg': {
display: 'block',
width: '100%',
overflowX: 'auto',
'-webkit-overflow-scrolling': 'touch',
'-ms-overflow-style': '-ms-autohiding-scrollbar',
},
'.table-responsive-sm>.table-bordered': {
border: '0',
}
},
'@media (max-width:1199.98px)': {
'.table-responsive-xl': {
display: 'block',
width: '100%',
overflowX: 'auto',
'-webkit-overflow-scrolling': 'touch',
'-ms-overflow-style': '-ms-autohiding-scrollbar',
},
'.table-responsive-sm>.table-bordered': {
border: '0',
}
},
})
}
}
Loading

0 comments on commit 384f5d1

Please sign in to comment.