franjsco/tick3t
1
0
Fork 0
mirror of https://github.com/franjsco/tick3t synced 2025-02-11 17:30:38 +01:00
Code Issues Releases Wiki Activity

add TableData component

Browse Source
This commit is contained in:
frab1t 2019-05-06 19:30:42 +02:00
parent 7506b6f87b
commit 2f50500aac
2 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/TableData.css Normal file
View File

@ -0,0 +1,7 @@
.td-key {
width: 30%;
background-color: #fafafa;
}
.td-value {
width: 70%;
}

71
src/components/TableData.js Normal file
View File

@ -0,0 +1,71 @@
import React, { Component } from 'react';
import {
Col,
Row,
Table
} from 'reactstrap';
import './TableData.css'
class TableData extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
let data = this.props.data;
return (
<Row>
<Col sm="12" md={{ size: 10, offset: 1 }}>
<Table bordered id="table-ticket-info">
<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">{`${data.firstName} ${data.lastName} (${data.email})`}</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>
</Table>
</Col>
</Row>
);
}
}
export default TableData;