switch to react-table.js

src/FilterLists.Web/ClientApp/components/Home.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { RouteComponentProps } from "react-router";
 import "isomorphic-fetch";
+import ReactTable from "react-table"
+import "react-table/react-table.css"
 
 interface IFilterListsState {
     filterLists: IFilterList[];
@@ -32,29 +34,29 @@ 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>
-                           <td>
-                               <a href={filterList.viewUrl}>View</a>
-                           </td>
-                           <td>
-                               <a href={`abp:subscribe?location=${encodeURIComponent(filterList.viewUrl)}&amp;title=${
-                                   encodeURIComponent(filterList.name)}`}>Subscribe</a>
-                           </td>
-                       </tr>
-                   )}
-                   </tbody>
-               </table>;
+        return <ReactTable
+                   data={filterLists}
+                   columns={[
+                       {
+                           Header: "Name",
+                           accessor: "name"
+                       },
+                       {
+                           Header: "Description",
+                           accessor: "description"
+                       },
+                       {
+                           Header: "View",
+                           accessor: "viewUrl",
+                           Cell: (d: any) => <a href={d.value}>View</a>
+                       },
+                       {
+                           Header: "Subscribe",
+                           accessor: "viewUrl",
+                           Cell: (d: any) => <a href={`abp:subscribe?location=${encodeURIComponent(d.value)
+                               }&amp;title=${encodeURIComponent(d.row.name)}`}>Subscribe</a>
+                       }
+                   ]}/>;
     }
 }
 

src/FilterLists.Web/npm-shrinkwrap.json

@@ -19,8 +19,7 @@
     "@types/react": {
       "version": "16.0.37",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.37.tgz",
-      "integrity": "sha512-+sk9+kXXDJpOEfiYFUw4IhBR7CotLBFBBUSVGglUZeh/AnZUNGYJNbdy5q28dFe/lymrfXUvAbrACJaEJAaC6w==",
-      "dev": true
+      "integrity": "sha512-+sk9+kXXDJpOEfiYFUw4IhBR7CotLBFBBUSVGglUZeh/AnZUNGYJNbdy5q28dFe/lymrfXUvAbrACJaEJAaC6w=="
     },
     "@types/react-dom": {
       "version": "16.0.4",
@@ -62,6 +61,14 @@
         "@types/react-router": "4.0.22"
       }
     },
+    "@types/react-table": {
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-6.7.3.tgz",
+      "integrity": "sha512-a1LyAHhQ8UrMvv+q/17XT9SJtfgvRXuZqJwc+vGhLk1WYeeU/6vLf5RXLvCP0BtTz9Rop2zWjA3cTLjkacwF/A==",
+      "requires": {
+        "@types/react": "16.0.37"
+      }
+    },
     "@types/webpack-env": {
       "version": "1.13.5",
       "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.5.tgz",
@@ -779,6 +786,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
+      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+    },
     "cliui": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@@ -4827,6 +4839,14 @@
         "warning": "3.0.0"
       }
     },
+    "react-table": {
+      "version": "6.7.6",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.7.6.tgz",
+      "integrity": "sha1-P547MIMozrBO+TpHur76uiYZyQU=",
+      "requires": {
+        "classnames": "2.2.5"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

src/FilterLists.Web/package.json

@@ -31,5 +31,8 @@
     "webpack": "^3.11.0",
     "webpack-hot-middleware": "^2.21.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@types/react-table": "^6.7.3",
+    "react-table": "^6.7.6"
+  }
 }