1
0
mirror of https://github.com/franjsco/tick3t synced 2025-01-17 03:36:46 +01:00

improvement: table

This commit is contained in:
frab1t 2019-07-03 20:45:33 +02:00
parent 07f20983d5
commit bebf72d98a

View File

@ -7,8 +7,8 @@ import {
const tableKeyStyle = { const tableKeyStyle = {
width: '20%', width: '18%',
backgroundColor: '#fafafa'
} }
class Table extends Component { class Table extends Component {
@ -24,44 +24,48 @@ class Table extends Component {
return ( return (
<Row> <Row>
<Col sm="12" md={{ size: 10, offset: 1 }}> <Col sm="12" md={{ size: 10, offset: 1 }}>
<TableBootstrap bordered id="table-ticket-info" className="bg-white"> <TableBootstrap id="table-ticket-info" className="bg-white">
<thead> <thead>
<tr> <tr>
<th colSpan={2}>Ticket ID: {data.ticketId}</th> <th colSpan={2}>Details</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">status</td> <td style={tableKeyStyle} className="font-weight-bold text-right">id:</td>
<td className="text-left">{data.ticketId}</td>
</tr>
<tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">status:</td>
<td className="text-left">{data.status}</td> <td className="text-left">{data.status}</td>
</tr> </tr>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">created</td> <td style={tableKeyStyle} className="font-weight-bold text-right">created:</td>
<td className="text-left">{data.createdAt}</td> <td className="text-left">{data.createdAt}</td>
</tr> </tr>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">updated</td> <td style={tableKeyStyle} className="font-weight-bold text-right">updated:</td>
<td className="text-left">{data.updateAt}</td> <td className="text-left">{data.updateAt}</td>
</tr> </tr>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">created by</td> <td style={tableKeyStyle} className="font-weight-bold text-right">created by:</td>
<td className="text-left"><p>{`${data.firstName} ${data.lastName} (${data.email})`}</p></td> <td className="text-left"><p>{`${data.firstName} ${data.lastName} (${data.email})`}</p></td>
</tr> </tr>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">type</td> <td style={tableKeyStyle} className="font-weight-bold text-right">type:</td>
<td className="text-left">{data.type}</td> <td className="text-left">{data.type}</td>
</tr> </tr>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">subject</td> <td style={tableKeyStyle} className="font-weight-bold text-right">subject:</td>
<td className="text-left">{data.subject}</td> <td className="text-left">{data.subject}</td>
</tr> </tr>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">message</td> <td style={tableKeyStyle} className="font-weight-bold text-right">message:</td>
<td className=" text-left">{data.message}</td> <td className=" text-left">{data.message}</td>
</tr> </tr>
<tr> <tr>
<td style={tableKeyStyle} className="font-weight-bold text-right">note</td> <td style={tableKeyStyle} className="font-weight-bold text-right">note:</td>
<td className="text-left">{data.note}</td> <td className="text-left">{data.note}</td>
</tr> </tr>
</tbody> </tbody>