DataTable#

Download this notebook from GitHub (right-click to download).

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',
    'vfsfonts': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js',
    'html5buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js',
}

pn.extension(css_files=css, js_files=js)

Panel - Datatable#

This example demonstrates how to load the jQuery DataTable extension and use it to render a pandas DataFrame.

script = """
<script>
if (document.readyState === "complete") {
  $('.example').DataTable();
} else {
  $(document).ready(function () {
    $('.example').DataTable();
  })
}
</script>
"""

html = autompg.to_html(classes=['example', 'panel-df'])
pn.pane.HTML(html+script, sizing_mode='stretch_width')

Panel - Datatable with Export Buttons#

This example demonstrates how to add export buttons as requested in Discourse 2079

script = """
<script>
function renderTable(){
  $('.example2').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
    ]
} );
}

if (document.readyState === "complete") {
  renderTable()
} else {
  $(document).ready(renderTable);
}
</script>
"""

html = autompg.to_html(classes=['example2', 'panel-df'])
table_with_export_buttons = pn.pane.HTML(html+script, sizing_mode='stretch_width', margin=(10,5,35,5))
table_with_export_buttons

App#

Let’s wrap the above into a nice app that can be run via panel serve DataTable.ipynb

pn.template.FastListTemplate(site="Panel Gallery", title="DataTable", main=["This example demonstrates **how to use the [jQuery DataTable extension](https://datatables.net/) with Panel** and use it to render a pandas DataFrame.", table_with_export_buttons]).servable();

This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).