Hi,
I am following this link (https://panel.holoviz.org/gallery/external/DataTable.html ) in order to implement a datatable object in my panel. I need to add export buttons (like these ) but I`m not being able to add the necessary Javascript library files in order to make the buttons render.
My tentative code is as follows:
css = ['https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css',
'https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css']
js = {
'$': 'https://code.jquery.com/jquery-3.4.1.slim.min.js',
'DataTable': 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',
'buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js',
'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'
}
pn.extension(css_files=css, js_files=js)
script = """
<script>
if (document.readyState === "complete") {
$('.example').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5'
]
});
} else {
$(document).ready(function () {
$('.example').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5'
]
});
})
}
</script>
"""
How do I add new libraries to the code so that Panel is able to load and apply them to the Datatable widget?
Marc
April 8, 2021, 5:33pm
2
Hi @Germano
Welcome to the community.
Personally I would look into using the Tabulator widget if I would need a table. It’s just the one “supported” in Panel. And it’s awesome.
It has some Downloading capabilities for .csv
and .json
Alternatively I would implement buttons separately for download. Checkout the File Download Example in the gallery for inspiration.
1 Like
Marc
April 8, 2021, 6:02pm
3
But ok @Germano . This works
import panel as pn
from bokeh.sampledata.autompg import autompg
css = ['https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css',
# Below: Needed for export buttons
'https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css'
]
js = {
'$': 'https://code.jquery.com/jquery-3.5.1.js',
'DataTable': 'https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js',
# Below: Needed for export buttons
'buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js',
'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js',
'pdfmake': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js',
'vfsfontsjs': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js',
'buttonshtml5min': 'https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js',
}
pn.extension(css_files=css, js_files=js)
script = """
<script>
function renderTable(){
$('.example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
}
if (document.readyState === "complete") {
renderTable()
} else {
$(document).ready(renderTable);
}
</script>
"""
html = autompg.to_html(classes=['example', 'panel-df'])
table = pn.pane.HTML(html+script, sizing_mode='stretch_width', margin=(10,5,35,5))
pn.template.FastListTemplate(
site="Awesome Panel",
title = "Datatables w. Export Buttons",
main=[table]
).servable()
2 Likes
Marc
April 8, 2021, 6:45pm
4
Added a PR to improve the Datatables gallery example.
Pull Request #2154
2 Likes
Thank you, Mark, it works perfectly!
I`m really enjoying creating things with Panel
1 Like