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 React from 'react';
import { Col, Table } from 'react-bootstrap'; 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 = () => { const DataTable = () => {
return ( return (
<Col> <Col>
<Table striped bordered hover size="sm"> <Table striped bordered hover size="sm">
<thead> <thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
<tr> <tr>
<th>Site</th> <th>Site</th>
<th>People</th> <th>People</th>
...@@ -13,72 +31,14 @@ const DataTable = () => { ...@@ -13,72 +31,14 @@ const DataTable = () => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> {data.map((item, index) => (
<td>1</td> <tr key={index}>
<td>Mark</td> <td>{item.site}</td>
<td>Otto</td> <td>{item.people}</td>
<td>@mdo</td> <td>{item.revenue}</td>
</tr> <td>{item.timestamp}</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>
</tbody> </tbody>
</Table> </Table>
</Col> </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