I’m using HT 1.4.0 Pro (now, but this was true for earlier versions also). Structurally, I have this js at the tail end of the body element, after the container div. It’s also wrapped in a jQuery $(document).ready() call.
So when the page renders, (I have up to several hundred rows for the columns below) I get two copies of a HandsonTable, which is to say if I scroll to the bottom I see another instance of the table header row and another complete table.
Worse, the filtering dropdownMenus are unusable as they’re also doubled, eg:
Below is most of the code. I turned off the custom renderers and the problem persists, so I have not included the rendering code.
EDIT data is being rendered from a Python Flask app so the {{ data }} syntax is actually yielding an array of objects.
var data = {{ data }};
var container = document.getElementById("jqxgrid");
var htable = new Handsontable(container, {
//data: data,
rowHeaders: true,
filters: true,
renderAllRows: true,
columns: [
{ data: 'studyID'},
{ data: 'subjid'},
{ data: 'screeningID'},
{ data: 'accession', type: 'text'},
{ data: 'visit'},
{ data: 'assayDate'}, //renderer: dateRenderer},
{ data: 'inventoryDate'},// renderer: dateRenderer},
{ data: 'countsByAssay'},// renderer: countRenderer},
{ data: 'inventoryErrors'}, //renderer: errorRenderer},
{ data: 'vendorErrors'},
{ data: 'filePaths'}//, renderer: pathRenderer}
],
colHeaders: [
'Study ID',
'Subject',
'Screening ID',
'Accession',
'Visit',
'Assay Date',
'Inventory Date',
'Counts by Assay',
'Inventory Errors',
'Vendor Errors',
'Files'
],
columnSorting: true,
sortIndicator: true,
autoWrapRow: true,
dropdownMenu: true
//fixedColumnsLeft: 4,
//dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
});
var expButton = document.getElementById('excelExport');
var expPlugin = htable.getPlugin('exportFile');
expButton.addEventListener('mousedown', function(e){
e.preventDefault();
expPlugin.downloadFile('csv', {filename: '{{study_id}}' });
});
htable.loadData(data);
htable.render();
)