Skip to content

Commit db89231

Browse files
committed
Add styling settings to DataTable
1 parent f98ddb5 commit db89231

File tree

7 files changed

+684
-450
lines changed

7 files changed

+684
-450
lines changed

classes/Visualizer/Gutenberg/build/block.css

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

classes/Visualizer/Gutenberg/build/block.js

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

classes/Visualizer/Gutenberg/src/Components/Charts.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,6 @@ class Charts extends Component {
108108
}
109109
}
110110

111-
if ( 'dataTable' === chart ) {
112-
return;
113-
}
114-
115111
return (
116112
<div className="visualizer-settings__charts-single">
117113

classes/Visualizer/Gutenberg/src/Components/DataTable.js

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
/**
22
* WordPress dependencies
33
*/
4-
const { Component } = wp.element;
4+
const {
5+
Component,
6+
Fragment
7+
} = wp.element;
58

69
class DataTables extends Component {
710
constructor() {
@@ -22,6 +25,12 @@ class DataTables extends Component {
2225

2326
componentDidUpdate( prevProps ) {
2427
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+
2534
this.table.destroy();
2635
document.getElementById( `dataTable-instances-${ this.props.id }` ).innerHTML = '';
2736
this.initDataTable( this.props.columns, this.props.rows );
@@ -76,17 +85,49 @@ class DataTables extends Component {
7685
paging: 'true' === settings.paging_bool ? true : false,
7786
pageLength: settings.pageLength_int || 10,
7887
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,
8093
searching: false,
81-
ordering: true,
8294
select: false,
83-
responsive: this.props.chartsScreen ? true : false
95+
lengthChange: false,
96+
bFilter: false,
97+
bInfo: false
8498
});
8599
}
86100

87101
render() {
102+
const settings = this.props.options;
103+
88104
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>
90131
);
91132
}
92133
}

classes/Visualizer/Gutenberg/src/Components/Sidebar.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,7 @@ class Sidebar extends Component {
103103

104104
<TableSettings chart={ this.props.chart } edit={ this.props.edit } />
105105

106-
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
107-
<RowCellSettings chart={ this.props.chart } edit={ this.props.edit } />
108-
) }
106+
<RowCellSettings chart={ this.props.chart } edit={ this.props.edit } />
109107

110108
</Fragment>
111109
) }

0 commit comments

Comments
 (0)