Skip to content

Commit 384f5d1

Browse files
drehimselfdrehimself
committed
add files
1 parent f54ae4e commit 384f5d1

File tree

5 files changed

+416
-2
lines changed

5 files changed

+416
-2
lines changed

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
package-lock.json

‎README.md‎

Lines changed: 133 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,133 @@
1-
# tailwindcss-tables
2-
Bootstrap styled tables for Tailwind CSS
1+
# Tailwind CSS Tables Plugin
2+
3+
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.
4+
5+
## Installation
6+
7+
```bash
8+
# With NPM
9+
npm install tailwindcss-tables --save
10+
11+
# With Yarn
12+
yarn add tailwindcss-tables
13+
14+
# Manually
15+
# Create a /plugins/tailwindcss-tables folder in your project and drop 'index.js' inside of it.
16+
```
17+
18+
## Usage
19+
20+
To use the plugin, simply require it in your Tailwind config file.
21+
22+
```js
23+
plugins: [
24+
// Other plugins...
25+
require('tailwindcss-tables')(),
26+
27+
// If pulled in manually...
28+
require('./plugins/tailwindcss-tables')(),
29+
],
30+
```
31+
32+
You can now use any of [bootstrap's table classes](https://getbootstrap.com/docs/4.0/content/tables) in your project.
33+
34+
## Examples
35+
36+
#### Basic example from bootstrap docs:
37+
38+
```html
39+
<table class="table">
40+
<thead>
41+
<tr>
42+
<th scope="col">#</th>
43+
<th scope="col">First</th>
44+
<th scope="col">Last</th>
45+
<th scope="col">Handle</th>
46+
</tr>
47+
</thead>
48+
<tbody>
49+
<tr>
50+
<th scope="row">1</th>
51+
<td>Mark</td>
52+
<td>Otto</td>
53+
<td>@mdo</td>
54+
</tr>
55+
<tr>
56+
<th scope="row">2</th>
57+
<td>Jacob</td>
58+
<td>Thornton</td>
59+
<td>@fat</td>
60+
</tr>
61+
<tr>
62+
<th scope="row">3</th>
63+
<td>Larry</td>
64+
<td>the Bird</td>
65+
<td>@twitter</td>
66+
</tr>
67+
</tbody>
68+
</table>
69+
```
70+
71+
![bootstrap-table](https://user-images.githubusercontent.com/4316355/38008280-d40e1ee0-321b-11e8-8e9f-24d18df4ea25.png)
72+
73+
#### Using Tailwind's utilities
74+
75+
You are free to use Tailwind's utilities to customize the table.
76+
77+
```html
78+
<table class="table">
79+
<thead class="bg-blue text-white">
80+
<tr>
81+
<th scope="col">#</th>
82+
<th scope="col">First</th>
83+
<th scope="col">Last</th>
84+
<th scope="col">Handle</th>
85+
</tr>
86+
</thead>
87+
<tbody>
88+
<tr>
89+
<th scope="row">1</th>
90+
<td>Mark</td>
91+
<td>Otto</td>
92+
<td>@mdo</td>
93+
</tr>
94+
<tr>
95+
<th scope="row">2</th>
96+
<td>Jacob</td>
97+
<td class="bg-red text-white">Thornton</td>
98+
<td>@fat</td>
99+
</tr>
100+
<tr>
101+
<th scope="row">3</th>
102+
<td>Larry</td>
103+
<td>the Bird</td>
104+
<td>@twitter</td>
105+
</tr>
106+
</tbody>
107+
</table>
108+
```
109+
110+
![bootstrap-table-custom](https://user-images.githubusercontent.com/4316355/38009083-4f594ff8-3220-11e8-8eaa-9634dd0eaa73.png)
111+
112+
#### Customization
113+
114+
I've exposed a few options that are a bit cumbersome to change using utilities.
115+
116+
```js
117+
plugins: [
118+
// Other plugins...
119+
require('tailwindcss-tables')({
120+
cellPadding: '.75rem', // default: .75rem
121+
tableBorderColor: '#dee2e6', // default: #dee2e6
122+
tableStripedBackgroundColor: 'rgba(0,0,0,.05)', // default: rgba(0,0,0,.05)
123+
tableHoverBackgroundColor: 'rgba(0,0,0,.075)', // default: rgba(0,0,0,.075)
124+
}),
125+
],
126+
```
127+
128+
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.
129+
130+
#### Enjoy!
131+
132+
133+

‎index.js‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
function optionsWithPropertyExists(options, property) {
2+
return typeof options !== 'undefined' && options.hasOwnProperty(property)
3+
}
4+
5+
module.exports = function (options) {
6+
return function({ addComponents }) {
7+
addComponents({
8+
'table': {
9+
borderCollapse: 'collapse',
10+
},
11+
'caption': {
12+
paddingTop: '.75rem',
13+
paddingBottom: '.75rem',
14+
color: '#6c757d',
15+
textAlign: 'left',
16+
captionSide: 'bottom',
17+
},
18+
'th': {
19+
textAlign: 'inherit',
20+
},
21+
'.table': {
22+
width: '100%',
23+
maxWidth: '100%',
24+
marginBottom: '1rem',
25+
backgroundColor: 'transparent',
26+
'td,th': {
27+
padding: optionsWithPropertyExists(options, 'cellPadding') ? options.cellPadding : '.75rem',
28+
verticalAlign: 'top',
29+
borderTop: optionsWithPropertyExists(options, 'tableBorderColor')
30+
? '1px solid ' + options.tableBorderColor
31+
: '1px solid #dee2e6',
32+
},
33+
'thead th': {
34+
verticalAlign: 'bottom',
35+
borderBottom: optionsWithPropertyExists(options, 'tableBorderColor')
36+
? '2px solid ' + options.tableBorderColor
37+
: '2px solid #dee2e6',
38+
},
39+
'tbody+tbody': {
40+
borderTop: optionsWithPropertyExists(options, 'tableBorderColor')
41+
? '2px solid ' + options.tableBorderColor
42+
: '2px solid #dee2e6',
43+
},
44+
'.table': {
45+
backgroundColor: '#fff',
46+
},
47+
},
48+
'.table-sm td,.table-sm th': {
49+
padding: '.3rem',
50+
},
51+
'.table-bordered': {
52+
border: optionsWithPropertyExists(options, 'tableBorderColor')
53+
? '1px solid ' + options.tableBorderColor
54+
: '1px solid #dee2e6',
55+
'td,th': {
56+
border: optionsWithPropertyExists(options, 'tableBorderColor')
57+
? '1px solid ' + options.tableBorderColor
58+
: '1px solid #dee2e6',
59+
},
60+
'thead td,thead th': {
61+
borderBottomWidth: '2px',
62+
},
63+
},
64+
'.table-striped tbody tr:nth-of-type(odd)': {
65+
backgroundColor: optionsWithPropertyExists(options, 'tableStripedBackgroundColor')
66+
? options.tableStripedBackgroundColor
67+
: 'rgba(0,0,0,.05)',
68+
},
69+
'.table-hover tbody tr:hover': {
70+
backgroundColor: optionsWithPropertyExists(options, 'tableHoverBackgroundColor')
71+
? options.tableHoverBackgroundColor
72+
: 'rgba(0,0,0,.075)',
73+
},
74+
'.table-primary,.table-primary>td,.table-primary>th': {
75+
backgroundColor: '#b8daff',
76+
},
77+
'.table-hover .table-primary:hover': {
78+
backgroundColor: '#9fcdff',
79+
},
80+
'.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th': {
81+
backgroundColor: '#9fcdff',
82+
},
83+
'.table-secondary,.table-secondary>td,.table-secondary>th': {
84+
backgroundColor: '#d6d8db',
85+
},
86+
'.table-hover .table-secondary:hover': {
87+
backgroundColor: '#c8cbcf',
88+
},
89+
'.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th': {
90+
backgroundColor: '#c8cbcf',
91+
},
92+
'.table-success,.table-success>td,.table-success>th': {
93+
backgroundColor: '#c3e6cb',
94+
},
95+
'.table-hover .table-success:hover': {
96+
backgroundColor: '#b1dfbb',
97+
},
98+
'.table-hover .table-success:hover>td,.table-hover .table-success:hover>th': {
99+
backgroundColor: '#b1dfbb',
100+
},
101+
'.table-info,.table-info>td,.table-info>th': {
102+
backgroundColor: '#bee5eb',
103+
},
104+
'.table-hover .table-info:hover': {
105+
backgroundColor: '#abdde5',
106+
},
107+
'.table-hover .table-info:hover>td,.table-hover .table-info:hover>th': {
108+
backgroundColor: '#abdde5',
109+
},
110+
'.table-warning,.table-warning>td,.table-warning>th': {
111+
backgroundColor: '#ffeeba',
112+
},
113+
'.table-hover .table-warning:hover': {
114+
backgroundColor: '#ffe8a1',
115+
},
116+
'.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th': {
117+
backgroundColor: '#ffe8a1',
118+
},
119+
'.table-danger,.table-danger>td,.table-danger>th': {
120+
backgroundColor: '#f5c6cb',
121+
},
122+
'.table-hover .table-danger:hover': {
123+
backgroundColor: '#f1b0b7',
124+
},
125+
'.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th': {
126+
backgroundColor: '#f1b0b7',
127+
},
128+
'.table-light,.table-light>td,.table-light>th': {
129+
backgroundColor: '#fdfdfe',
130+
},
131+
'.table-hover .table-light:hover': {
132+
backgroundColor: '#ececf6',
133+
},
134+
'.table-hover .table-light:hover>td,.table-hover .table-light:hover>th': {
135+
backgroundColor: '#ececf6',
136+
},
137+
'.table-dark,.table-dark>td,.table-dark>th': {
138+
backgroundColor: '#c6c8ca',
139+
},
140+
'.table-hover .table-dark:hover': {
141+
backgroundColor: '#b9bbbe',
142+
},
143+
'.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th': {
144+
backgroundColor: '#b9bbbe',
145+
},
146+
'.table-active,.table-active>td,.table-active>th': {
147+
backgroundColor: 'rgba(0,0,0,.075)',
148+
},
149+
'.table-hover .table-active:hover': {
150+
backgroundColor: 'rgba(0,0,0,.075)',
151+
},
152+
'.table-hover .table-active:hover>td,.table-hover .table-active:hover>th': {
153+
backgroundColor: 'rgba(0,0,0,.075)',
154+
},
155+
'.table .thead-dark th': {
156+
color: '#fff',
157+
backgroundColor: '#212529',
158+
borderColor: '#32383e',
159+
},
160+
'.table .thead-light th': {
161+
color: '#495057',
162+
backgroundColor: '#e9ecef',
163+
borderColor: optionsWithPropertyExists(options, 'tableBorderColor')
164+
? options.tableBorderColor
165+
: '#dee2e6',
166+
},
167+
'.table-dark': {
168+
color: '#fff',
169+
backgroundColor: '#212529',
170+
},
171+
'.table-dark td,.table-dark th,.table-dark thead th': {
172+
borderColor: '#32383e',
173+
},
174+
'.table-dark.table-bordered': {
175+
border: '0',
176+
},
177+
'.table-dark.table-striped tbody tr:nth-of-type(odd)': {
178+
backgroundColor: 'rgba(255,255,255,.05)',
179+
},
180+
'.table-dark.table-hover tbody tr:hover': {
181+
backgroundColor: 'rgba(255,255,255,.075)',
182+
},
183+
'.table-responsive': {
184+
display: 'block',
185+
width: '100%',
186+
overflowX: 'auto',
187+
'-webkit-overflow-scrolling': 'touch',
188+
'-ms-overflow-style': '-ms-autohiding-scrollbar',
189+
},
190+
'.table-responsive>.table-bordered': {
191+
border: '0',
192+
},
193+
'@media (max-width:575.98px)': {
194+
'.table-responsive-sm': {
195+
display: 'block',
196+
width: '100%',
197+
overflowX: 'auto',
198+
'-webkit-overflow-scrolling': 'touch',
199+
'-ms-overflow-style': '-ms-autohiding-scrollbar',
200+
},
201+
'.table-responsive-sm>.table-bordered': {
202+
border: '0',
203+
}
204+
},
205+
'@media (max-width:767.98px)': {
206+
'.table-responsive-md': {
207+
display: 'block',
208+
width: '100%',
209+
overflowX: 'auto',
210+
'-webkit-overflow-scrolling': 'touch',
211+
'-ms-overflow-style': '-ms-autohiding-scrollbar',
212+
},
213+
'.table-responsive-sm>.table-bordered': {
214+
border: '0',
215+
}
216+
},
217+
'@media (max-width:991.98px)': {
218+
'.table-responsive-lg': {
219+
display: 'block',
220+
width: '100%',
221+
overflowX: 'auto',
222+
'-webkit-overflow-scrolling': 'touch',
223+
'-ms-overflow-style': '-ms-autohiding-scrollbar',
224+
},
225+
'.table-responsive-sm>.table-bordered': {
226+
border: '0',
227+
}
228+
},
229+
'@media (max-width:1199.98px)': {
230+
'.table-responsive-xl': {
231+
display: 'block',
232+
width: '100%',
233+
overflowX: 'auto',
234+
'-webkit-overflow-scrolling': 'touch',
235+
'-ms-overflow-style': '-ms-autohiding-scrollbar',
236+
},
237+
'.table-responsive-sm>.table-bordered': {
238+
border: '0',
239+
}
240+
},
241+
})
242+
}
243+
}

0 commit comments

Comments
 (0)