Dash/Dash_Create_Datatable_With_Dropdown.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "latin-packing",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2021-02-23T14:22:16.610471Z",
     "iopub.status.busy": "2021-02-23T14:22:16.610129Z",
     "iopub.status.idle": "2021-02-23T14:22:16.627784Z",
     "shell.execute_reply": "2021-02-23T14:22:16.626866Z",
     "shell.execute_reply.started": "2021-02-23T14:22:16.610384Z"
    },
    "papermill": {},
    "tags": []
   },
   "source": [
    "<img width=\"8%\" alt=\"Dash.png\" src=\"https://raw.githubusercontent.com/jupyter-naas/awesome-notebooks/master/.github/assets/logos/Dash.png\" style=\"border-radius: 15%\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "compressed-wilson",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "# Dash - Create Datatable With Dropdown\n",
    "<a href=\"https://bit.ly/3JyWIk6\">Give Feedback</a> | <a href=\"https://github.com/jupyter-naas/awesome-notebooks/issues/new?assignees=&labels=bug&template=bug_report.md&title=Dash+-+Create+Datatable+With+Dropdown:+Error+short+description\">Bug report</a>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "religious-programmer",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Tags:** #dash #dashboard #plotly #naas #asset #analytics #dropdown #callback #bootstrap #snippet"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1fe9f56e-561c-4f52-aef8-b861c9462107",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Author:** [Ismail Chihab](https://www.linkedin.com/in/ismail-chihab-4b0a04202/)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "41e7c4a7-4f10-4c05-97ee-ad9ebc4c52ae",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Last update:** 2023-04-12 (Created: 2022-08-26)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "96f20bb5-d815-4a57-aca7-9397b8677b3e",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "Create a basic table that can be updated through a dcc.dropdown menu."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b3c038bc-7e50-40c4-83aa-b3f8d6302eba",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "<u>Reference:</u>\n",
    "- https://dash.plotly.com/datatable\n",
    "- https://stackoverflow.com/questions/72013085/update-datatable-with-sub-dropdowns-dash-python"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "distinguished-truth",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Input"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "numeric-mediterranean",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Import libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "68ed1f03-e836-4410-aca9-63114fcd8b9f",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "import os\n",
    "try:\n",
    "    import dash\n",
    "except:\n",
    "    !pip install dash --user\n",
    "    import dash\n",
    "try:\n",
    "    import dash_bootstrap_components as dbc\n",
    "except:\n",
    "    !pip install dash_bootstrap_components --user\n",
    "    import dash_bootstrap_components as dbc\n",
    "from dash import html, Input, Output, dcc, dash_table\n",
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aggressive-trustee",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Setup Dash App"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "continuous-melbourne",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "DASH_PORT = 8050"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "registered-showcase",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Model"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a04b75b1-c301-45f5-b4c9-41fc716158f4",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a702813e-ca16-42c9-be71-abeb082caca1",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "column_name = [\"col1\", \"col2\", \"col3\"]\n",
    "data = [[0, 1, 2], [0, 6, 4], [6, 7, 1], [0, 1, 2], [3, 4, 5]]\n",
    "df = pd.DataFrame(data, columns=column_name)\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "322b025f-3259-4b28-8ea7-a5092428b5dc",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Dash App"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "22ac3f9c-2067-4a13-a0c5-9d4d249d5693",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "#### Create dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bed1e1e1-4a30-42a4-8c45-1bb7fe7c1650",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "dropdown = dcc.Dropdown(\n",
    "    [\"option1\", \"option2\", \"option3\"], \"option1\", id=\"demo-dropdown\"\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9177fcda-3d15-4388-bad2-8b2a43deedd2",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "#### Create table"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "10eb4c1c-eef4-45a4-ad94-a1f38ba77095",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "table = dash_table.DataTable(\n",
    "    id=\"tbl\",\n",
    "    data=df.to_dict(\"records\"),\n",
    "    columns=[{\"name\": i, \"id\": i} for i in df.columns],\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f4b00db1-2c52-4deb-8f4a-9abb8c55f6d2",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "#### Create Layout"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "598c9847-4596-4677-afa0-fecfb6c7754e",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "app = dash.Dash(\n",
    "    requests_pathname_prefix=f'/user/{os.environ.get(\"JUPYTERHUB_USER\")}/proxy/{DASH_PORT}/',\n",
    "    external_stylesheets=[dbc.themes.BOOTSTRAP],\n",
    "    meta_tags=[\n",
    "        {\"name\": \"viewport\", \"content\": \"width=device-width, initial-scale=1.0\"}\n",
    "    ],\n",
    ")\n",
    "\n",
    "app.layout = html.Div([dropdown, table])\n",
    "\n",
    "\n",
    "@app.callback(Output(\"tbl\", \"data\"), Input(\"demo-dropdown\", \"value\"))\n",
    "def update_output(value):\n",
    "    dff = df.copy()\n",
    "    if str(value) == \"option1\":\n",
    "        dff = dff[dff[\"col1\"] == 0]\n",
    "    elif str(value) == \"option2\":\n",
    "        dff = dff[dff[\"col2\"] == 3]\n",
    "    return dff.to_dict(\"records\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "lonely-pacific",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2021-07-02T23:32:10.789097Z",
     "iopub.status.busy": "2021-07-02T23:32:10.788829Z",
     "iopub.status.idle": "2021-07-02T23:32:10.796900Z",
     "shell.execute_reply": "2021-07-02T23:32:10.796358Z",
     "shell.execute_reply.started": "2021-07-02T23:32:10.789033Z"
    },
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Output"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "890f7c86-b7bb-4f5d-9a1b-e492dd9580fd",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Generate URL and show logs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9c4e3b7b-6440-4844-8054-265f1aec65eb",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "if __name__ == \"__main__\":\n",
    "    app.run_server(proxy=f\"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai\")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.6"
  },
  "naas": {
   "notebook_id": "800cd47399958fce0bb44cc5202abf7b490ca015760efa4088ac69124bf4787e",
   "notebook_path": "Dash/Dash_Create_Datatable_With_Dropdown.ipynb"
  },
  "papermill": {
   "default_parameters": {},
   "environment_variables": {},
   "parameters": {},
   "version": "2.3.3"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}