import React from 'react';
import { MDBDataTable } from 'mdbreact';
const DatatablePage = () => {
const data = {
columns: [
{
label: 'Name',
field: 'name',
sort: 'asc',
width: 150
},
{
label: 'Position',
field: 'position',
sort: 'asc',
width: 270
},
{
label: 'Office',
field: 'office',
sort: 'asc',
width: 200
},
{
label: 'Random Word',
field: 'random',
sort: 'asc',
width: 50
}
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
random: <h5 searchvalue={'tourist'} >tourist <span className="badge badge-danger">narrow</span></h5>
},
{
name: 'Garrett Winters',
position: 'Accountant',
office: 'Tokyo',
random: <h5 searchvalue={'expression'} >expression <span className="badge badge-danger">popular</span></h5>
},
{
name: 'Ashton Cox',
position: 'Junior Technical Author',
office: 'San Francisco',
random: <h5 searchvalue={'rule'} >rule <span className="badge badge-danger">estimate</span></h5>
},
{
name: 'Cedric Kelly',
position: 'Senior Javascript Developer',
office: 'Edinburgh',
random: <h5 searchvalue={'announcement'} >announcement <span className="badge badge-danger">preparation</span></h5>
},
{
name: 'Airi Satou',
position: 'Accountant',
office: 'Tokyo',
random: <h5 searchvalue={'preoccupation'} >preoccupation <span className="badge badge-danger">stock</span></h5>
}
]
};
return (
<MDBDataTable
striped
bordered
hover
data={data}
sortRows={['random']}
/>
);
}
export default DatatablePage;