{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import panel as pn\n",
"from bokeh.sampledata.autompg import autompg\n",
"\n",
"css = ['https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css',\n",
" # Below: Needed for export buttons\n",
" 'https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css'\n",
"]\n",
"js = {\n",
" '$': 'https://code.jquery.com/jquery-3.5.1.js',\n",
" 'DataTable': 'https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js',\n",
" # Below: Needed for export buttons\n",
" 'buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js',\n",
" 'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js',\n",
" 'pdfmake': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js',\n",
" 'vfsfonts': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js',\n",
" 'html5buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js',\n",
"}\n",
"\n",
"pn.extension(css_files=css, js_files=js)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Panel - Datatable\n",
"\n",
"This example demonstrates how to load the [jQuery DataTable extension](https://datatables.net/) and use it to render a pandas DataFrame."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"script = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"html = autompg.to_html(classes=['example', 'panel-df'])\n",
"pn.pane.HTML(html+script, sizing_mode='stretch_width')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Panel - Datatable with Export Buttons\n",
"\n",
"This example demonstrates how to add [export buttons](https://datatables.net/extensions/buttons/examples/html5/simple.html) as requested in [Discourse 2079](https://discourse.holoviz.org/t/adding-buttons-to-panel-datatable/2079)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"script = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"html = autompg.to_html(classes=['example2', 'panel-df'])\n",
"table_with_export_buttons = pn.pane.HTML(html+script, sizing_mode='stretch_width', margin=(10,5,35,5))\n",
"table_with_export_buttons"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## App\n",
"\n",
"Let's wrap the above into a nice app that can be run via `panel serve DataTable.ipynb`"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"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();"
]
}
],
"metadata": {
"language_info": {
"name": "python",
"pygments_lexer": "ipython3"
}
},
"nbformat": 4,
"nbformat_minor": 4
}