Adding buttons to panel + Datatable

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?

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

But ok @Germano. This works :slight_smile:

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

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 :slight_smile:

1 Like