102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { makeData, Logo, Tips } from "./Utils";
|
||
|
|
|
||
|
|
// Import React Table
|
||
|
|
import ReactTable from 'react-table';
|
||
|
|
import "react-table/react-table.css";
|
||
|
|
|
||
|
|
export class ServerTable extends React.Component<any, any> {
|
||
|
|
constructor(props: any) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
data: makeData()
|
||
|
|
};
|
||
|
|
}
|
||
|
|
public render() {
|
||
|
|
const { data } = this.state;
|
||
|
|
const filterExact = (filter: any, row: any) =>
|
||
|
|
String(row[filter.id]) === filter.value;
|
||
|
|
const filterPart = (filter: any, row: any) =>
|
||
|
|
row[filter.id].startsWith(filter.value) ||
|
||
|
|
row[filter.id].endsWith(filter.value)
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<ReactTable
|
||
|
|
data={data}
|
||
|
|
filterable={true}
|
||
|
|
defaultFilterMethod={filterExact}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
Header: "Name",
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
Header: "First Name",
|
||
|
|
accessor: "firstName",
|
||
|
|
filterMethod:filterPart
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Header: "Last Name",
|
||
|
|
id: "lastName",
|
||
|
|
accessor: (d: any) => d.lastName
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Header: "Info",
|
||
|
|
columns: [{
|
||
|
|
Header: 'Profile Progress',
|
||
|
|
accessor: 'progress',
|
||
|
|
Cell: (row: any) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
backgroundColor: '#dadada',
|
||
|
|
borderRadius: '2px'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: `${row.value}%`,
|
||
|
|
height: '100%',
|
||
|
|
backgroundColor: row.value > 66 ? '#85cc00'
|
||
|
|
: row.value > 33 ? '#ffbf00'
|
||
|
|
: '#ff2e00',
|
||
|
|
borderRadius: '2px',
|
||
|
|
transition: 'all .2s ease-out'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Header: "Age",
|
||
|
|
accessor: "age"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Header: "Status",
|
||
|
|
accessor: "status"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Header: 'Stats',
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
Header: "Visits",
|
||
|
|
accessor: "visits"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
defaultPageSize={20}
|
||
|
|
className="-striped -highlight"
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<Tips />
|
||
|
|
<Logo />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|