{
 "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.19/css/jquery.dataTables.min.css']\n",
    "js = {\n",
    "    '$': 'https://code.jquery.com/jquery-3.4.1.slim.min.js',\n",
    "    'DataTable': 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js'\n",
    "}\n",
    "\n",
    "pn.extension(css_files=css, js_files=js)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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').servable()"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
