1
1
/**
2
2
* WordPress dependencies
3
3
*/
4
- const { Component } = wp . element ;
4
+ const {
5
+ Component,
6
+ Fragment
7
+ } = wp . element ;
5
8
6
9
class DataTables extends Component {
7
10
constructor ( ) {
@@ -22,6 +25,12 @@ class DataTables extends Component {
22
25
23
26
componentDidUpdate ( prevProps ) {
24
27
if ( this . props !== prevProps ) {
28
+ if ( this . props . options . responsive_bool !== prevProps . options . responsive_bool ) {
29
+ if ( 'true' === prevProps . options . responsive_bool ) {
30
+ document . getElementById ( `dataTable-instances-${ this . props . id } ` ) . classList . remove ( 'collapsed' ) ;
31
+ }
32
+ }
33
+
25
34
this . table . destroy ( ) ;
26
35
document . getElementById ( `dataTable-instances-${ this . props . id } ` ) . innerHTML = '' ;
27
36
this . initDataTable ( this . props . columns , this . props . rows ) ;
@@ -76,17 +85,49 @@ class DataTables extends Component {
76
85
paging : 'true' === settings . paging_bool ? true : false ,
77
86
pageLength : settings . pageLength_int || 10 ,
78
87
pagingType : settings . pagingType ,
79
- lengthChange : 'true' === settings . lengthChange_bool ? true : false ,
88
+ ordering : 'false' === settings . ordering_bool ? false : true ,
89
+ fixedHeader : 'true' === settings . fixedHeader_bool ? true : false ,
90
+ scrollCollapse : this . props . chartsScreen && true || 'true' === settings . scrollCollapse_bool ? true : false ,
91
+ scrollY : this . props . chartsScreen && 180 || ( 'true' === settings . scrollCollapse_bool && Number ( settings . scrollY_int ) || false ) ,
92
+ responsive : this . props . chartsScreen && true || 'true' === settings . responsive_bool ? true : false ,
80
93
searching : false ,
81
- ordering : true ,
82
94
select : false ,
83
- responsive : this . props . chartsScreen ? true : false
95
+ lengthChange : false ,
96
+ bFilter : false ,
97
+ bInfo : false
84
98
} ) ;
85
99
}
86
100
87
101
render ( ) {
102
+ const settings = this . props . options ;
103
+
88
104
return (
89
- < table id = { `dataTable-instances-${ this . props . id } ` } > </ table >
105
+ < Fragment >
106
+ { settings . customcss && (
107
+ < style >
108
+ { `#dataTable-instances-${ this . props . id } tr.odd {
109
+ ${ settings . customcss . oddTableRow . color ? `color: ${ settings . customcss . oddTableRow . color } !important;` : '' }
110
+ ${ settings . customcss . oddTableRow [ 'background-color' ] ? `background-color: ${ settings . customcss . oddTableRow [ 'background-color' ] } !important;` : '' }
111
+ ${ settings . customcss . oddTableRow . transform ? `transform: rotate( ${ settings . customcss . oddTableRow . transform } deg ) !important;` : '' }
112
+ }
113
+
114
+ #dataTable-instances-${ this . props . id } tr.even {
115
+ ${ settings . customcss . evenTableRow . color ? `color: ${ settings . customcss . evenTableRow . color } !important;` : '' }
116
+ ${ settings . customcss . evenTableRow [ 'background-color' ] ? `background-color: ${ settings . customcss . evenTableRow [ 'background-color' ] } !important;` : '' }
117
+ ${ settings . customcss . evenTableRow . transform ? `transform: rotate( ${ settings . customcss . evenTableRow . transform } deg ) !important;` : '' }
118
+ }
119
+
120
+ #dataTable-instances-${ this . props . id } tr td,
121
+ #dataTable-instances-${ this . props . id } _wrapper tr th {
122
+ ${ settings . customcss . tableCell . color ? `color: ${ settings . customcss . tableCell . color } !important;` : '' }
123
+ ${ settings . customcss . tableCell [ 'background-color' ] ? `background-color: ${ settings . customcss . tableCell [ 'background-color' ] } !important;` : '' }
124
+ ${ settings . customcss . tableCell . transform ? `transform: rotate( ${ settings . customcss . tableCell . transform } deg ) !important;` : '' }
125
+ }` }
126
+ </ style >
127
+ ) }
128
+
129
+ < table id = { `dataTable-instances-${ this . props . id } ` } > </ table >
130
+ </ Fragment >
90
131
) ;
91
132
}
92
133
}
0 commit comments