Example 1b shows adding a custom js event listener which will be called whenever the selection-index property changes

urth-viz-table.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### urth-viz-table Examples"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Initialize declarative widgets and import dependencies"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from urth import widgets\n",
    "\n",
    "widgets.init()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<link rel=\"stylesheet\" type=\"text/css\" href=\"bcard.css\">\n",
    "<link rel=\"import\" href=\"urth_components/urth-viz-table/urth-viz-table.html\" is=\"urth-core-import\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 1a: Simple table with selection support"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "aDataFrame = pd.DataFrame([\n",
    "        [\"John\", \"Johnson\",\"Web Developer\", \"13\", \"1234325431\", \"http://javi.er\"], \n",
    "        [\"Jane\", \"Doe\",\"Software Engineer\", \"456\", \"1434215411\", \"http://www.ibm.us\"],\n",
    "        [\"Joe\", \"Smith\",\"Rockstar Dev\", \"4526\", \"1237328421\", \"http://cooldevs.org/xavier\"]\n",
    "    ], columns=[\"First\", \"Last Name\", \"Role\", \"Amount\", \"Bigger Number\", \"Website\"]\n",
    ")\n",
    "aDataFrame"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By default, urth-viz-table supports selection as an array of values."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"dom-bind\">\n",
    "    <urth-core-dataframe id=\"f1\" ref=\"aDataFrame\" value=\"{{df}}\" auto ></urth-core-dataframe>\n",
    "\n",
    "    <p>Name of first person: <strong>{{ df.data.0.0 }}</strong></p>\n",
    "    \n",
    "    <urth-viz-table datarows=\"{{ df.data }}\" selection=\"{{sel}}\" columns=\"{{ df.columns }}\" rows-visible=6>\n",
    "        <urth-viz-col index=\"4\" format=\"$0,0.00\" type=\"numeric\"></urth-viz-col>\n",
    "        <urth-viz-col index=\"3\" format=\"$0,0.0\" type=\"numeric\"></urth-viz-col>\n",
    "    </urth-viz-table>\n",
    "        \n",
    "    <div class=\"bcard\">\n",
    "        <div class=\"info\">\n",
    "            <div class=\"line full-name\"><span>{{sel.0}}</span> <span>{{sel.1}}</span></div>\n",
    "            <span class=\"line title\">{{sel.2}}</span>\n",
    "            <span class=\"line phone-number\">{{sel.3}}</span>\n",
    "            <span class=\"line email\">{{sel.4}}</span>\n",
    "            <span class=\"line website\">{{sel.5}}</span>\n",
    "        </div>\n",
    "        <div class=\"logo\"></div>\n",
    "    </div>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 1b: Selection as an object"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "Setting selection-as-object attribute will allow selection to be an object with keys as column names and values as the data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"dom-bind\">\n",
    "    <urth-core-dataframe id=\"f2\" ref=\"aDataFrame\" value=\"{{df}}\" auto ></urth-core-dataframe>\n",
    "    <urth-viz-table id=\"table\" datarows=\"{{ df.data }}\" selection=\"{{sel}}\" columns=\"{{ df.columns }}\" rows-visible=6 selection-as-object>\n",
    "        <urth-viz-col index=\"4\" format=\"$0,0.00\" type=\"numeric\"></urth-viz-col>\n",
    "        <urth-viz-col index=\"3\" format=\"$0,0.0\" type=\"numeric\"></urth-viz-col>\n",
    "    </urth-viz-table>\n",
    "        \n",
    "    <div class=\"bcard\">\n",
    "        <div class=\"info\">\n",
    "            <div class=\"line full-name\"><span>{{sel.First}}</span> <span>{{sel.Last_Name}}</span></div>\n",
    "            <span class=\"line title\">{{sel.Role}}</span>\n",
    "            <span class=\"line phone-number\">{{sel.Amount}}</span>\n",
    "            <span class=\"line email\">{{sel.Bigger_Number}}</span>\n",
    "            <span class=\"line website\">{{sel.Website}}</span>\n",
    "        </div>\n",
    "        <div class=\"logo\"></div>\n",
    "    </div>\n",
    "</template>\n",
    "\n",
    "<script>\n",
    "document.getElementById('table').addEventListener('selection-index-changed', function(e) {\n",
    "  console.log('new selectionIndex is: ' + e.detail.value);\n",
    "});\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "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.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}