| /* |
| * Copyright (c) 2018 StreamNative. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| import React, { Component } from 'react'; |
| import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap'; |
| |
| class Tables extends Component { |
| render() { |
| return ( |
| <div className="animated fadeIn"> |
| <Row> |
| <Col xs="12" lg="6"> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i> Simple Table |
| </CardHeader> |
| <CardBody> |
| <Table responsive> |
| <thead> |
| <tr> |
| <th>Username</th> |
| <th>Date registered</th> |
| <th>Role</th> |
| <th>Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Samppa Nori</td> |
| <td>2012/01/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Estavan Lykos</td> |
| <td>2012/02/01</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="danger">Banned</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Chetan Mohamed</td> |
| <td>2012/02/01</td> |
| <td>Admin</td> |
| <td> |
| <Badge color="secondary">Inactive</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Derick Maximinus</td> |
| <td>2012/03/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="warning">Pending</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Friderik Dávid</td> |
| <td>2012/01/21</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| </tbody> |
| </Table> |
| <Pagination> |
| <PaginationItem> |
| <PaginationLink previous tag="button"></PaginationLink> |
| </PaginationItem> |
| <PaginationItem active> |
| <PaginationLink tag="button">1</PaginationLink> |
| </PaginationItem> |
| <PaginationItem> |
| <PaginationLink tag="button">2</PaginationLink> |
| </PaginationItem> |
| <PaginationItem> |
| <PaginationLink tag="button">3</PaginationLink> |
| </PaginationItem> |
| <PaginationItem> |
| <PaginationLink tag="button">4</PaginationLink> |
| </PaginationItem> |
| <PaginationItem> |
| <PaginationLink next tag="button"></PaginationLink> |
| </PaginationItem> |
| </Pagination> |
| </CardBody> |
| </Card> |
| </Col> |
| |
| <Col xs="12" lg="6"> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i> Striped Table |
| </CardHeader> |
| <CardBody> |
| <Table responsive striped> |
| <thead> |
| <tr> |
| <th>Username</th> |
| <th>Date registered</th> |
| <th>Role</th> |
| <th>Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Yiorgos Avraamu</td> |
| <td>2012/01/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Avram Tarasios</td> |
| <td>2012/02/01</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="danger">Banned</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Quintin Ed</td> |
| <td>2012/02/01</td> |
| <td>Admin</td> |
| <td> |
| <Badge color="secondary">Inactive</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Enéas Kwadwo</td> |
| <td>2012/03/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="warning">Pending</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Agapetus Tadeáš</td> |
| <td>2012/01/21</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| </tbody> |
| </Table> |
| <Pagination> |
| <PaginationItem disabled><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem> |
| <PaginationItem active> |
| <PaginationLink tag="button">1</PaginationLink> |
| </PaginationItem> |
| <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem> |
| </Pagination> |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| |
| <Row> |
| |
| <Col xs="12" lg="6"> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i> Condensed Table |
| </CardHeader> |
| <CardBody> |
| <Table responsive size="sm"> |
| <thead> |
| <tr> |
| <th>Username</th> |
| <th>Date registered</th> |
| <th>Role</th> |
| <th>Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Carwyn Fachtna</td> |
| <td>2012/01/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Nehemiah Tatius</td> |
| <td>2012/02/01</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="danger">Banned</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Ebbe Gemariah</td> |
| <td>2012/02/01</td> |
| <td>Admin</td> |
| <td> |
| <Badge color="secondary">Inactive</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Eustorgios Amulius</td> |
| <td>2012/03/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="warning">Pending</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Leopold Gáspár</td> |
| <td>2012/01/21</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| </tbody> |
| </Table> |
| <Pagination> |
| <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem> |
| <PaginationItem active> |
| <PaginationLink tag="button">1</PaginationLink> |
| </PaginationItem> |
| <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem> |
| </Pagination> |
| </CardBody> |
| </Card> |
| </Col> |
| |
| <Col xs="12" lg="6"> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i> Bordered Table |
| </CardHeader> |
| <CardBody> |
| <Table responsive bordered> |
| <thead> |
| <tr> |
| <th>Username</th> |
| <th>Date registered</th> |
| <th>Role</th> |
| <th>Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Pompeius René</td> |
| <td>2012/01/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Paĉjo Jadon</td> |
| <td>2012/02/01</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="danger">Banned</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Micheal Mercurius</td> |
| <td>2012/02/01</td> |
| <td>Admin</td> |
| <td> |
| <Badge color="secondary">Inactive</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Ganesha Dubhghall</td> |
| <td>2012/03/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="warning">Pending</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Hiroto Šimun</td> |
| <td>2012/01/21</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| </tbody> |
| </Table> |
| <Pagination> |
| <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem> |
| <PaginationItem active> |
| <PaginationLink tag="button">1</PaginationLink> |
| </PaginationItem> |
| <PaginationItem className="page-item"><PaginationLink tag="button">2</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem> |
| </Pagination> |
| </CardBody> |
| </Card> |
| </Col> |
| |
| </Row> |
| |
| <Row> |
| <Col> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i> Combined All Table |
| </CardHeader> |
| <CardBody> |
| <Table hover bordered striped responsive size="sm"> |
| <thead> |
| <tr> |
| <th>Username</th> |
| <th>Date registered</th> |
| <th>Role</th> |
| <th>Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Vishnu Serghei</td> |
| <td>2012/01/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Zbyněk Phoibos</td> |
| <td>2012/02/01</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="danger">Banned</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Einar Randall</td> |
| <td>2012/02/01</td> |
| <td>Admin</td> |
| <td> |
| <Badge color="secondary">Inactive</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Félix Troels</td> |
| <td>2012/03/01</td> |
| <td>Member</td> |
| <td> |
| <Badge color="warning">Pending</Badge> |
| </td> |
| </tr> |
| <tr> |
| <td>Aulus Agmundr</td> |
| <td>2012/01/21</td> |
| <td>Staff</td> |
| <td> |
| <Badge color="success">Active</Badge> |
| </td> |
| </tr> |
| </tbody> |
| </Table> |
| <nav> |
| <Pagination> |
| <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem> |
| <PaginationItem active> |
| <PaginationLink tag="button">1</PaginationLink> |
| </PaginationItem> |
| <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem> |
| <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem> |
| </Pagination> |
| </nav> |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| </div> |
| |
| ); |
| } |
| } |
| |
| export default Tables; |