diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx index 0d6b3cfa2f..716638082f 100644 --- a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx +++ b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx @@ -81,11 +81,8 @@ class ChartContainer extends React.PureComponent { // this should be a callback to clear the contents of the slice container $(this.state.selector).html(data); }, - css: (dim, size) => { - // dimension can be 'height' - // pixel string can be '300px' - // should call callback to adjust height of chart - $(this.state.selector).css(dim, size); + css: (property, value) => { + $(this.state.selector).css(property, value); }, height: getHeight, show: () => { }, diff --git a/superset/assets/visualizations/pivot_table.css b/superset/assets/visualizations/pivot_table.css index 7d94f85344..43b94878d8 100644 --- a/superset/assets/visualizations/pivot_table.css +++ b/superset/assets/visualizations/pivot_table.css @@ -1,17 +1,4 @@ -.slice-grid .widget.pivot_table .slice_container { - overflow: auto !important; -} - -.widget.pivot_table table { - margin: 0px !important; -} - -.widget.pivot_table tr>th { - padding: 1px 5px !important; - font-size: small !important; -} - -.widget.pivot_table tr>td { - padding: 1px 5px !important; - font-size: small !important; +.widget.pivot_table tr > th, +.widget.pivot_table tr > td { + padding: 1px 5px; } diff --git a/superset/assets/visualizations/pivot_table.js b/superset/assets/visualizations/pivot_table.js index a3b6bc9278..d1abace071 100644 --- a/superset/assets/visualizations/pivot_table.js +++ b/superset/assets/visualizations/pivot_table.js @@ -1,31 +1,41 @@ import 'datatables.net'; import dt from 'datatables.net-bs'; - +import $ from 'jquery'; +import 'datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css'; import { fixDataTableBodyHeight } from '../javascripts/modules/utils'; - -const $ = require('jquery'); - -require('./pivot_table.css'); -require('datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css'); +import './pivot_table.css'; dt(window, $); module.exports = function (slice, payload) { const container = slice.container; const fd = slice.formData; + const height = container.height(); + + // payload data is a string of html with a single table element container.html(payload.data); + if (fd.groupby.length === 1) { - const height = container.height(); + // When there is only 1 group by column, + // we use the DataTable plugin to make the header fixed. + // The plugin takes care of the scrolling so we don't need + // overflow: 'auto' on the table. + container.css('overflow', 'hidden'); const table = container.find('table').DataTable({ paging: false, searching: false, bInfo: false, - scrollY: height + 'px', + scrollY: `${height}px`, scrollCollapse: true, scrollX: true, }); table.column('-1').order('desc').draw(); - fixDataTableBodyHeight( - container.find('.dataTables_wrapper'), height); + fixDataTableBodyHeight(container.find('.dataTables_wrapper'), height); + } else { + // When there is more than 1 group by column we just render the table, without using + // the DataTable plugin, so we need to handle the scrolling ourselves. + // In this case the header is not fixed. + container.css('overflow', 'auto'); + container.css('height', `${height + 10}px`); } };