From 756fe20dc03d67d9aa3344c633e53d29f7416c28 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sun, 4 Aug 2019 17:03:11 -0500
Subject: [PATCH] wire up sample table

---
 src/FilterLists.Web.V2/src/AllListsTable.tsx | 61 ++++++++++++++++++++
 src/FilterLists.Web.V2/src/App.tsx           |  4 +-
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/FilterLists.Web.V2/src/AllListsTable.tsx

diff --git a/src/FilterLists.Web.V2/src/AllListsTable.tsx b/src/FilterLists.Web.V2/src/AllListsTable.tsx
new file mode 100644
index 000000000..09231becc
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/AllListsTable.tsx
@@ -0,0 +1,61 @@
+import { Table } from 'antd';
+import * as React from "react";
+
+const columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        sorter: true,
+        render: (name: { first: any; last: any; }) => `${name.first} ${name.last}`,
+        width: '20%',
+    },
+    {
+        title: 'Gender',
+        dataIndex: 'gender',
+        filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }],
+        width: '20%',
+    },
+    {
+        title: 'Email',
+        dataIndex: 'email',
+    },
+];
+
+interface State {
+    data: [];
+    loading: boolean;
+}
+
+export class AllListsTable extends React.Component<{}, State> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            data: [],
+            loading: false,
+        };
+    }
+
+    componentDidMount() {
+        this.fetch();
+    }
+
+    fetch = () => {
+        this.setState({ loading: true });
+        fetch("https://randomuser.me/api")
+            .then(response => response.json())
+            .then(json => {
+                this.setState({ data: json.results });
+                this.setState({ loading: false })
+            })
+    };
+
+    render() {
+        return (
+            <Table
+                columns={columns}
+                dataSource={this.state.data}
+                loading={this.state.loading}
+            />
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/App.tsx b/src/FilterLists.Web.V2/src/App.tsx
index 70a5b15fe..788e799fd 100644
--- a/src/FilterLists.Web.V2/src/App.tsx
+++ b/src/FilterLists.Web.V2/src/App.tsx
@@ -1,11 +1,11 @@
-import { Button } from 'antd';
 import React from 'react';
+import { AllListsTable } from './AllListsTable';
 import './App.css';
 
 const App: React.FC = () => {
   return (
     <div className="App">
-      <Button type="primary">Button</Button>
+      <AllListsTable></AllListsTable>
     </div>
   );
 }