mirror of
https://github.com/franjsco/tick3t
synced 2024-12-28 18:29:56 +01:00
add Table component
This commit is contained in:
parent
164c055e7c
commit
2826262b35
71
src/components/Table.js
Normal file
71
src/components/Table.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import {
|
||||||
|
Col,
|
||||||
|
Row,
|
||||||
|
Table as TableBootstrap
|
||||||
|
} from 'reactstrap';
|
||||||
|
|
||||||
|
import './Table.css'
|
||||||
|
|
||||||
|
class Table extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let data = this.props.data;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row>
|
||||||
|
<Col sm="12" md={{ size: 10, offset: 1 }}>
|
||||||
|
<TableBootstrap bordered id="table-ticket-info" className="bg-white">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colSpan={2}>Ticket Info</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">id</td>
|
||||||
|
<td className="td-value text-left">{data.id}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">status</td>
|
||||||
|
<td className="td-value text-left">{data.status}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">created</td>
|
||||||
|
<td className="td-value text-left">{data.createdAt}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">updated</td>
|
||||||
|
<td className="td-value text-left">{data.updateAt}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">created by</td>
|
||||||
|
<td className="td-value text-left"><p>{`${data.firstName} ${data.lastName} (${data.email})`}</p></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">type</td>
|
||||||
|
<td className="td-value text-left">{data.type}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">subject</td>
|
||||||
|
<td className="td-value text-left">{data.subject}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="font-weight-bold text-right td-key">message</td>
|
||||||
|
<td className="td-value text-left">{data.message}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</TableBootstrap>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Table;
|
Loading…
Reference in New Issue
Block a user