Overwrite the table component

diff --git a/front-end/src/page/status/index.jsx b/front-end/src/page/status/index.jsx
index 4bb74a06428a7bc6fd2f4d8ae4f48a0b77464506..6067a78bc41849188732a501e11f2dda52282aeb 100644 (file)
--- a/front-end/src/page/status/index.jsx
+++ b/front-end/src/page/status/index.jsx
@@ -124,7 +124,6 @@ class Status extends React.Component {
 
                     </td>
                     <td>
-                        1111
                         {/*<th rowspan="3"></th>*/}
                         {/*<th rowspan="3">1-2</th>*/}
                         {/*<th rowspan="2">1-3</th>*/}
@@ -165,8 +164,9 @@ class Status extends React.Component {
                 <TableList tableHeads={['alias', 'System', 'ro', 'rw', 'date']}>
                     {listBody}
                 </TableList>
-                {/*<BasicTable></BasicTable>*/}
-                <Pagination style={style} onChange={this.onPageChange} current={this.state.currentPage} total={25}/>
+                {/*<Pagination style={style} onChange={this.onPageChange} current={this.state.currentPage} total={25}/>*/}
+
+                <BasicTable list={this.state.list}></BasicTable>
                 {/*<RateBar std={this.state.std} curMark={this.state.curMark1}/>*/}
 
             </div>

diff --git a/front-end/src/util/basic-table/index.jsx b/front-end/src/util/basic-table/index.jsx
index ff68322bd27e3e5f225189190f9b4f98258e186e..493528df87ebe15e058c55a4c99c72b632c015dc 100644 (file)
--- a/front-end/src/util/basic-table/index.jsx
+++ b/front-end/src/util/basic-table/index.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import ReactTable from 'react-table'
-import 'react-table/react-table.css'
+import { Icon, Table, Menu, Message } from 'semantic-ui-react'
 import './index.css';
 
 // general basic table
@@ -14,81 +13,84 @@ class BasicTable extends React.Component {
 
 
     render() {
-        const data = [{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        },{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        },{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        },{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        },{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        },{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        },{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        },{
-            name: 'Tanner Linsley',
-            age: 26,
-            friend: {
-                name: 'Jason Maurer',
-                age: 23,
-            }
-        }]
+        let list = this.props.list
 
-        const columns = [{
-                Header: 'Name',
-                accessor: 'name' // String-based value accessors!
-            }, {
-                Header: 'Age',
-                accessor: 'age',
-                Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
-            }, {
-                id: 'friendName', // Required because our accessor is not a string
-                Header: 'Friend Name',
-                accessor: d => d.friend.name // Custom value accessors!
-            }, {
-                Header: props => <span>Friend Age</span>, // Custom header components!
-                accessor: 'friend.age'
-            }]
         return (
-            <ReactTable className="ReactTable -striped -highlight" data = {data} columns = {columns}/>
+            <Table celled structured compact>
+                <Table.Header>
+                    <Table.Row>
+                        <Table.HeaderCell rowSpan='2'>Alias</Table.HeaderCell>
+                        <Table.HeaderCell rowSpan='2'>System</Table.HeaderCell>
+                        <Table.HeaderCell rowSpan='2'>Branch</Table.HeaderCell>
+                        <Table.HeaderCell textAlign='center' colSpan='3'>read only</Table.HeaderCell>
+                        <Table.HeaderCell textAlign='center' colSpan='3'>read & write</Table.HeaderCell>
+                        <Table.HeaderCell rowSpan='2'>Date</Table.HeaderCell>
+                    </Table.Row>
+                    <Table.Row>
+                        <Table.HeaderCell>1 client</Table.HeaderCell>
+                        <Table.HeaderCell>2 clients</Table.HeaderCell>
+                        <Table.HeaderCell>4 clients</Table.HeaderCell>
+
+                        <Table.HeaderCell>1 client</Table.HeaderCell>
+                        <Table.HeaderCell>2 clients</Table.HeaderCell>
+                        <Table.HeaderCell>4 clients</Table.HeaderCell>
+                    </Table.Row>
+                    {/*<Table.Row>*/}
+                        {/*<Table.HeaderCell>1 clients</Table.HeaderCell>*/}
+                        {/*<Table.HeaderCell>2 clients</Table.HeaderCell>*/}
+                        {/*<Table.HeaderCell>4 clients</Table.HeaderCell>*/}
+                    {/*</Table.Row>*/}
+                </Table.Header>
+
+                <Table.Body>
+                    <Table.Row>
+                        {/*alias*/}
+                        <Table.Cell><a href="#">Cabbage</a></Table.Cell>
+
+                        {/*system*/}
+                        <Table.Cell><a href="#">Ubuntu 16 x86_64</a></Table.Cell>
+
+                        {/*branch*/}
+                        <Table.Cell>REL9_6_STABLE</Table.Cell>
+
+                        {/*rw-data*/}
+                        <Table.Cell textAlign='center'>
+                            <Icon color='green' name='checkmark' size='large' />
+                        </Table.Cell>
+                        <Table.Cell />
+                        <Table.Cell />
+
+                        {/*rw-data*/}
+                        <Table.Cell />
+                        <Table.Cell textAlign='center'>
+                            <Icon color='green' name='checkmark' size='large' />
+                        </Table.Cell>
+                        <Table.Cell />
+
+                        {/*date*/}
+                        <Table.Cell>{new Date().toDateString()}</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+                <Table.Footer>
+                    <Table.Row>
+                        <Table.HeaderCell colSpan='10'>
+                            <Menu size='small' floated='right' pagination>
+                                <Menu.Item as='a' icon>
+                                    <Icon name='chevron left' />
+                                </Menu.Item>
+                                <Menu.Item as='a'>1</Menu.Item>
+                                <Menu.Item as='a'>2</Menu.Item>
+                                <Menu.Item as='a'>3</Menu.Item>
+                                <Menu.Item as='a'>4</Menu.Item>
+                                <Menu.Item as='a' icon>
+                                    <Icon name='chevron right' />
+                                </Menu.Item>
+                            </Menu>
+
+                        </Table.HeaderCell>
+                    </Table.Row>
+                </Table.Footer>
+            </Table>
         );
 
     }