{
 "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",
    "<script>\n",
    "if (document.readyState === \"complete\") {\n",
    "  $('.example').DataTable();\n",
    "} else {\n",
    "  $(document).ready(function () {\n",
    "    $('.example').DataTable();\n",
    "  })\n",
    "}\n",
    "</script>\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",
    "<script>\n",
    "function renderTable(){\n",
    "  $('.example2').DataTable( {\n",
    "    dom: 'Bfrtip',\n",
    "    buttons: [\n",
    "        'copyHtml5',\n",
    "        'excelHtml5',\n",
    "        'csvHtml5',\n",
    "        'pdfHtml5'\n",
    "    ]\n",
    "} );\n",
    "}\n",
    "\n",
    "if (document.readyState === \"complete\") {\n",
    "  renderTable()\n",
    "} else {\n",
    "  $(document).ready(renderTable);\n",
    "}\n",
    "</script>\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
}