dataTables.tailwindcss.js
3.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
/*! DataTables Tailwind CSS integration
*/
(function( factory ){
if ( typeof define === 'function' && define.amd ) {
// AMD
define( ['jquery', 'datatables.net'], function ( $ ) {
return factory( $, window, document );
} );
}
else if ( typeof exports === 'object' ) {
// CommonJS
var jq = require('jquery');
var cjsRequires = function (root, $) {
if ( ! $.fn.dataTable ) {
require('datatables.net')(root, $);
}
};
if (typeof window === 'undefined') {
module.exports = function (root, $) {
if ( ! root ) {
// CommonJS environments without a window global must pass a
// root. This will give an error otherwise
root = window;
}
if ( ! $ ) {
$ = jq( root );f
}
cjsRequires( root, $ );
return factory( $, root, root.document );
};
}
else {
cjsRequires( window, jq );
module.exports = factory( jq, window, window.document );
}
}
else {
// Browser
factory( jQuery, window, document );
}
}(function( $, window, document ) {
'use strict';
var DataTable = $.fn.dataTable;
/*
* This is a tech preview of Tailwind CSS integration with DataTables.
*/
// Set the defaults for DataTables initialisation
$.extend( true, DataTable.defaults, {
renderer: 'tailwindcss'
} );
// Default class modification
$.extend( true, DataTable.ext.classes, {
container: "dt-container dt-tailwindcss",
search: {
input: "form-control py-2"
},
length: {
select: ""
},
processing: {
container: "dt-processing"
},
paging: {
active: 'bg-lightprimary dark:bg-darkprimary',
notActive: '',
button: 'h-10 w-10 justify-center inline-block items-center text-center text-dark bg-hover py-2 px-3 text-sm rounded-lg focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-darklink',
},
table: 'dataTable min-w-full',
thead: { cell: 'p-4 text-base text-start font-semibold text-link dark:text-white capitalize' },
tbody: {
cell: 'text-dark dark:text-darklink p-4 border-b border-light-dark whitespace-nowrap'
},
tfoot: {
cell: 'p-3 text-left hidden '
},
} );
DataTable.ext.renderer.pagingButton.tailwindcss = function (settings, buttonType, content, active, disabled) {
var classes = settings.oClasses.paging;
var btnClasses = [classes.button];
btnClasses.push(active ? classes.active : classes.notActive);
btnClasses.push(disabled ? classes.notEnabled : classes.enabled);
var a = $('<a>', {
'href': disabled ? null : '#',
'class': btnClasses.join(' ')
})
.html(content);
return {
display: a,
clicker: a
};
};
DataTable.ext.renderer.pagingContainer.tailwindcss = function (settings, buttonEls) {
var classes = settings.oClasses.paging;
buttonEls[0].addClass(classes.first);
buttonEls[buttonEls.length -1].addClass(classes.last);
return $('<ul/>').addClass('pagination sm:flex sm:mt-0 mt-4 items-center gap-x-1 ').append(buttonEls);
};
DataTable.ext.renderer.layout.tailwindcss = function ( settings, container, items ) {
var row = $( '<div/>', {
"class": items.full ?
'grid grid-cols-1 gap-4' :
'gap-4 sm:flex justify-between p-4 items-center'
} )
.appendTo( container );
$.each( items, function (key, val) {
var klass;
// Apply start / end (left / right when ltr) margins
if (val.table) {
klass = 'col-span-2';
}
else if (key === 'start') {
klass = 'justify-self-start';
}
else if (key === 'end') {
klass = 'justify-end';
}
else {
klass = 'col-span-2 justify-self-center';
}
$( '<div/>', {
id: val.id || null,
"class": klass + ' ' + (val.className || '')
} )
.append( val.contents )
.appendTo( row );
} );
};
return DataTable;
}));