{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[this doc on github](https://github.com/dotnet/interactive/tree/main/samples/notebooks/csharp/Docs)\n",
    "\n",
    "# Formatting Outputs"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HTML Formatting\n",
    "\n",
    "When you return a value or a display a value using a .NET kernel, the default formatting behavior normally uses HTML to try to provide some useful information about the object. \n",
    "\n",
    "### Enumerables \n",
    "\n",
    "If the object is an array or other type implementing `IEnumerable` and the values within it are simple values such as `string` or `int` values, the output looks like this:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"dni-plaintext\"><pre>[ hello, world ]</pre></div><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"dni-plaintext\"><pre>[ 1, 2, 3, 4, 5 ]</pre></div><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "new [] {\"hello\", \"world\"}.Display();\n",
    "\n",
    "Enumerable.Range(1, 5)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Objects with properties\n",
    "\n",
    "The default formatting behavior for other types of objects is to produce an expandable table showing their properties and the values of those properties."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<details open=\"open\" class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr></tbody></table></div></details><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "class Person \n",
    "{\n",
    "    public string FirstName { get; set; }\n",
    "    public string LastName { get; set; }\n",
    "    public int Age { get; set; } \n",
    "}\n",
    "\n",
    "new Person { FirstName = \"Mitch\", LastName = \"Buchannon\", Age = 42}.Display();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Hobie </pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Summer</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Quinn</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>25</pre></div></td></tr></tbody></table></div></details></td></tr><tr><td>3</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>C.J.</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Parker</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr></tbody></table></div></details></td></tr></tbody></table><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "var groupOfPeople = new [] \n",
    "{\n",
    "    new Person { FirstName = \"Mitch\", LastName = \"Buchannon\", Age = 42 },\n",
    "    new Person { FirstName = \"Hobie \", LastName = \"Buchannon\", Age = 23 },\n",
    "    new Person { FirstName = \"Summer\", LastName = \"Quinn\", Age = 25 },\n",
    "    new Person { FirstName = \"C.J.\", LastName = \"Parker\", Age = 23 },\n",
    "};\n",
    "\n",
    "groupOfPeople.Display();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Alternatively, you can use the `DisplayTable` method, which provides a layoutw that uses the properties as column headers."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/csv": [
       "FirstName,LastName,Age\r\n",
       "Mitch,Buchannon,42\r\n",
       "\"Hobie \",Buchannon,23\r\n",
       "Summer,Quinn,25\r\n",
       "C.J.,Parker,23\r\n"
      ],
      "text/html": [
       "<table><thead><tr><td><span>FirstName</span></td><td><span>LastName</span></td><td><span>Age</span></td></tr></thead><tbody><tr><td>Mitch</td><td>Buchannon</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr><tr><td>Hobie </td><td>Buchannon</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Summer</td><td>Quinn</td><td><div class=\"dni-plaintext\"><pre>25</pre></div></td></tr><tr><td>C.J.</td><td>Parker</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr></tbody></table><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "groupOfPeople.DisplayTable();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Dictionaries\n",
    "\n",
    "Similarly to the behavior for `IEnumerable` objects, you'll see tree output for dictionaries, but for each value in the dictionary, the key is provided rather than the index within the collection."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table><thead><tr><th><i>key</i></th><th>value</th></tr></thead><tbody><tr><td><div class=\"dni-plaintext\"><pre>zero</pre></div></td><td><div class=\"dni-plaintext\"><pre>0</pre></div></td></tr><tr><td><div class=\"dni-plaintext\"><pre>one</pre></div></td><td><div class=\"dni-plaintext\"><pre>1</pre></div></td></tr><tr><td><div class=\"dni-plaintext\"><pre>two</pre></div></td><td><div class=\"dni-plaintext\"><pre>2</pre></div></td></tr></tbody></table><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "var dictionary = new Dictionary<string, int>\n",
    "{\n",
    "  [\"zero\"] = 0,\n",
    "  [\"one\"] = 1,\n",
    "  [\"two\"] = 2\n",
    "};\n",
    "dictionary"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table><thead><tr><th><i>key</i></th><th>value</th></tr></thead><tbody><tr><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr></tbody></table></div></details></td></tr><tr><td><div class=\"dni-plaintext\"><pre>Hobie </pre></div></td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Hobie </pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr></tbody></table></div></details></td></tr><tr><td><div class=\"dni-plaintext\"><pre>Summer</pre></div></td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Summer</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Quinn</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>25</pre></div></td></tr></tbody></table></div></details></td></tr><tr><td><div class=\"dni-plaintext\"><pre>C.J.</pre></div></td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#3+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>C.J.</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Parker</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr></tbody></table></div></details></td></tr></tbody></table><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "groupOfPeople.ToDictionary(p => $\"{p.FirstName}\").Display();\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's try something a bit more complex. Let's look at a graph of objects. \n",
    "\n",
    "We'll redefine the `Person` class to allow a reference to a collection of other `Person` instances."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Hobie </pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Summer</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Quinn</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>25</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>C.J.</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Parker</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Hobie </pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Summer</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Quinn</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>25</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>C.J.</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Parker</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Summer</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Quinn</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>25</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Hobie </pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>C.J.</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Parker</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>3</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>C.J.</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Parker</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Mitch</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>42</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Hobie </pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Buchannon</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>23</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Summer</td></tr><tr><td>LastName</td><td>Quinn</td></tr><tr><td>Age</td><td>25</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td><div class=\"dni-plaintext\"><pre>Summer</pre></div></td></tr><tr><td>LastName</td><td><div class=\"dni-plaintext\"><pre>Quinn</pre></div></td></tr><tr><td>Age</td><td><div class=\"dni-plaintext\"><pre>25</pre></div></td></tr><tr><td>Friends</td><td><table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Mitch</td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>42</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>1</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>Hobie </td></tr><tr><td>LastName</td><td>Buchannon</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr><tr><td>2</td><td><details class=\"dni-treeview\"><summary><span class=\"dni-code-hint\"><code>Submission#8+Person</code></span></summary><div><table><thead><tr></tr></thead><tbody><tr><td>FirstName</td><td>C.J.</td></tr><tr><td>LastName</td><td>Parker</td></tr><tr><td>Age</td><td>23</td></tr><tr><td>Friends</td><td>[ Submission#8+Person, Submission#8+Person, Submission#8+Person ]</td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr></tbody></table></td></tr></tbody></table></div></details></td></tr></tbody></table><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "class Person \n",
    "{\n",
    "    public string FirstName { get; set; }\n",
    "    public string LastName { get; set; }\n",
    "    public int Age { get; set; } \n",
    "    public List<Person> Friends { get; } = new List<Person>();\n",
    "}\n",
    "\n",
    "\n",
    "var mitch = new Person { FirstName = \"Mitch\", LastName = \"Buchannon\", Age = 42 };\n",
    "var hobie = new Person { FirstName = \"Hobie \", LastName = \"Buchannon\", Age = 23 };\n",
    "var summer = new Person { FirstName = \"Summer\", LastName = \"Quinn\", Age = 25 };\n",
    "var cj = new Person { FirstName = \"C.J.\", LastName = \"Parker\", Age = 23 };\n",
    "\n",
    "mitch.Friends.AddRange(new [] { hobie, summer, cj });\n",
    "hobie.Friends.AddRange(new [] { mitch, summer, cj });\n",
    "summer.Friends.AddRange(new [] { mitch, hobie, cj });\n",
    "cj.Friends.AddRange(new [] { mitch, hobie, summer });\n",
    "\n",
    "var groupOfPeople = new List<Person> { mitch, hobie, summer, cj };\n",
    "\n",
    "groupOfPeople.Display();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Customization\n",
    "\n",
    "## Registering plain text formatters"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's clean up the output above by customizing the formatter for the `Person.Friends` property, which is creating a lot of noise. \n",
    "\n",
    "The way to do this is to use the `Formatter` API. This API lets you customize the formatting for a specific type. For example:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td>person</td></tr><tr><td>1</td><td>person</td></tr><tr><td>2</td><td>person</td></tr><tr><td>3</td><td>person</td></tr></tbody></table><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "using Microsoft.DotNet.Interactive.Formatting;\n",
    "\n",
    "Formatter.Register<Person>((person, writer) => {\n",
    "   writer.Write(\"person\");\n",
    "}, mimeType: \"text/html\");\n",
    "\n",
    "groupOfPeople"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "With that in mind, we can make it even more concise by registering a good formatter for `Person`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table><thead><tr><th><i>index</i></th><th>value</th></tr></thead><tbody><tr><td>0</td><td>Mitch</td></tr><tr><td>1</td><td>Hobie </td></tr><tr><td>2</td><td>Summer</td></tr><tr><td>3</td><td>C.J.</td></tr></tbody></table><style>\r\n",
       ".dni-code-hint {\r\n",
       "    font-style: italic;\r\n",
       "    overflow: hidden;\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview {\r\n",
       "    white-space: nowrap;\r\n",
       "}\r\n",
       ".dni-treeview td {\r\n",
       "    vertical-align: top;\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "details.dni-treeview {\r\n",
       "    padding-left: 1em;\r\n",
       "}\r\n",
       "table td {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "table tr { \r\n",
       "    vertical-align: top; \r\n",
       "    margin: 0em 0px;\r\n",
       "}\r\n",
       "table tr td pre \r\n",
       "{ \r\n",
       "    vertical-align: top !important; \r\n",
       "    margin: 0em 0px !important;\r\n",
       "} \r\n",
       "table th {\r\n",
       "    text-align: start;\r\n",
       "}\r\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Formatter.ResetToDefault();\n",
    "\n",
    "Formatter.Register<Person>((person, writer) => {\n",
    "   writer.Write(person.FirstName);\n",
    "}, mimeType: \"text/html\");\n",
    "\n",
    "groupOfPeople"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Registering HTML formatters\n",
    "\n",
    "To replace the default HTML table view, you can register a formatter for the `\"text/html\"` mime type. Let's do that, and write some HTML using PocketView."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<span><b>Mitch</b> <i>(42 years old and has 3 friends)</i><br /></span><span><b>Hobie </b> <i>(23 years old and has 3 friends)</i><br /></span><span><b>Summer</b> <i>(25 years old and has 3 friends)</i><br /></span><span><b>C.J.</b> <i>(23 years old and has 3 friends)</i><br /></span>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "using static Microsoft.DotNet.Interactive.Formatting.PocketViewTags;\n",
    "    \n",
    "Formatter.ResetToDefault();\n",
    "Formatter.Register<List<Person>>((people, writer) => \n",
    "{\n",
    "    foreach (var person in people)\n",
    "    {\n",
    "        writer.Write(\n",
    "            span(\n",
    "                b(person.FirstName), \n",
    "                \" \",\n",
    "                i($\"({person.Age} years old and has {person.Friends.Count} friends)\"),\n",
    "                br));\n",
    "    }\n",
    "}, mimeType: \"text/html\");\n",
    "\n",
    "groupOfPeople"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "**_See also_**\n",
    "* [Displaying output](Displaying%20output.ipynb)\n",
    "* [HTML](HTML.ipynb)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (C#)",
   "language": "C#",
   "name": ".net-csharp"
  },
  "language_info": {
   "file_extension": ".cs",
   "mimetype": "text/x-csharp",
   "name": "C#",
   "pygments_lexer": "csharp",
   "version": "8.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}