mirror of https://github.com/apache/superset.git
[vis] fix pivot table scrolling when using more than 1 groupy col (#2674)
* fix scrolling when more than 1 groupby * generalize function arguments * fix pivot table scrolling in js * add padding rules back * linting
This commit is contained in:
parent
1df37e6e4d
commit
0bdc3010d8
|
@ -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: () => { },
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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`);
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue