urth-viz-table with lots of columns to cause horizontal scroll

urth-viz-table.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 4,
       "row": 0,
       "width": 4
      }
     }
    }
   },
   "source": [
    "### urth-viz-table Examples"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 4,
       "height": 4,
       "row": 0,
       "width": 4
      }
     }
    }
   },
   "source": [
    "#### Import dependencies"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": true,
    "urth": {
     "dashboard": {
      "layout": {
       "col": 8,
       "height": 4,
       "row": 0,
       "width": 4
      }
     }
    }
   },
   "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": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 4,
       "row": 4,
       "width": 4
      }
     }
    }
   },
   "source": [
    "### Example 1: Simple table with selection support"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": true,
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 8,
       "row": 8,
       "width": 11
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "aDataFrame = pd.DataFrame([\n",
    "        [\"John\", \"Johnson\",\"Web Developer\", \"13\", \"1234325431\", \"http://javi.er\", \"John\", \"Johnson\",\"Web Developer\", \"13\", \"1234325431\", \"http://javi.er\"], \n",
    "        [\"Jane\", \"Doe\",\"Software Engineer\", \"456\", \"1434215411\", \"http://www.ibm.us\", \"John\", \"Johnson\",\"Web Developer\", \"13\", \"1234325431\", \"http://javi.er\"],\n",
    "        [\"Joe\", \"Smith\",\"Rockstar Dev\", \"4526\", \"1237328421\", \"http://cooldevs.org/xavier\",\"John\", \"Johnson\",\"Web Developer\", \"13\", \"1234325431\", \"http://javi.er\"]\n",
    "    ], columns=[\"First \", \"Last Name\", \"Role\", \"Amount\", \"Bigger Number\", \"Website\",\"First 1\", \"Last Name1\", \"Role1\", \"Amount1\", \"Bigger Number1\", \"Website1\"]\n",
    ")\n",
    "aDataFrame"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": true,
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 6,
       "row": 16,
       "width": 4
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template id=\"tpl\" 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": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "scrolled": true,
    "urth": {
     "dashboard": {}
    }
   },
   "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.4.3"
  },
  "urth": {
   "dashboard": {
    "cellMargin": 10,
    "defaultCellHeight": 20,
    "layoutStrategy": "packed",
    "maxColumns": 12
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}