| 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'; |
| import './pivot_table.css'; |
| |
| dt(window, $); |
| |
| module.exports = function (slice, payload) { |
| const container = slice.container; |
| const fd = slice.formData; |
| const height = container.height(); |
| const numberFormat = fd.number_format; |
| |
| // payload data is a string of html with a single table element |
| container.html(payload.data); |
| |
| // format number |
| $('td').each(function () { |
| const tdText = $(this)[0].textContent; |
| if (!isNaN(tdText) && tdText !== '') { |
| $(this)[0].textContent = d3.format(numberFormat)(tdText); |
| } |
| }); |
| |
| if (fd.groupby.length === 1) { |
| // 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`, |
| scrollCollapse: true, |
| scrollX: true, |
| }); |
| table.column('-1').order('desc').draw(); |
| 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`); |
| } |
| }; |