prehistoric-systems/FilterLists
1
0
Fork 0
mirror of https://github.com/collinbarrett/FilterLists.git synced 2026-03-11 09:04:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use material-ui Table

Browse source
This commit is contained in:
Collin M. Barrett 2017-10-31 15:36:48 -05:00
parent e355384057
commit f05a74df72
1 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/FilterLists.Web/ClientApp/components/Home.tsx
View file

@ -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>;
}
}