From f05a74df724df57b33b31de1c5c1641b57913385 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Tue, 31 Oct 2017 15:36:48 -0500
Subject: [PATCH] use material-ui Table

---
 .../ClientApp/components/Home.tsx             | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 9cf778e40..06a81c512 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -1,6 +1,14 @@
 import * as React from "react";
 import { RouteComponentProps } from "react-router";
 import "isomorphic-fetch";
+import {
+    Table,
+    TableBody,
+    TableHeader,
+    TableHeaderColumn,
+    TableRow,
+    TableRowColumn,
+    } from "material-ui";
 
 interface IFilterListsState {
     filterLists: IFilterList[];
@@ -11,7 +19,6 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
     constructor() {
         super();
         this.state = { filterLists: [], loading: true };
-
         fetch("https://api.filterlists.com/v1/lists")
             .then(response => response.json() as Promise<IFilterList[]>)
             .then(data => {
@@ -32,22 +39,22 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
     }
 
     private static renderFilterListsTable(filterLists: IFilterList[]) {
-        return <table className="table">
-                   <thead>
-                   <tr>
-                       <th>Name</th>
-                       <th>Description</th>
-                   </tr>
-                   </thead>
-                   <tbody>
-                   {filterLists.map(filterList =>
-                       <tr key={filterList.id}>
-                           <td>{filterList.name}</td>
-                           <td>{filterList.description}</td>
-                       </tr>
-                   )}
-                   </tbody>
-               </table>;
+        return <Table>
+                   <TableHeader>
+                       <TableRow>
+                           <TableHeaderColumn>Name</TableHeaderColumn>
+                           <TableHeaderColumn>Description</TableHeaderColumn>
+                       </TableRow>
+                   </TableHeader>
+                   <TableBody>
+                       {filterLists.map(filterList =>
+                           <TableRow key={filterList.id}>
+                               <TableRowColumn>{filterList.name}</TableRowColumn>
+                               <TableRowColumn>{filterList.description}</TableRowColumn>
+                           </TableRow>
+                       )}
+                   </TableBody>
+               </Table>;
     }
 }