Skip to content

T
toiletcoin
Commit f467c56e by Tonk
Options

add DataTable component

parent 08afbaf0
Showing with 27 additions and 67 deletions
src/components/DataTable.js
import React from 'react';
import { Col, Table } from 'react-bootstrap';
const data = [
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
];
const DataTable = () => {
return (
<Col>
<Table striped bordered hover size="sm">
<thead>
<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
<tr>
<th>Site</th>
<th>People</th>
......@@ -13,72 +31,14 @@ const DataTable = () => {
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
{data.map((item, index) => (
<tr key={index}>
<td>{item.site}</td>
<td>{item.people}</td>
<td>{item.revenue}</td>
<td>{item.timestamp}</td>
</tr>
))}
</tbody>
</Table>
</Col>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment