reusable table in react js
import React from 'react';
// This is the table constant/settings which needed to render table elements
export const tableConstants = (handleEdit) => {
return [
{
title: 'ID',
render: rowData => {
return <span>{rowData.id}</span>;
},
},
{
title: 'Name',
render: rowData => {
return <span>{rowData.name}</span>;
},
},
{
title: 'Username',
render: rowData => {
return <span>{rowData.username}</span>;
},
},
{
title: 'Email',
render: rowData => {
return <span>{rowData.email}</span>;
},
},
{
title: 'Phone',
render: rowData => {
return <span>{rowData.phone}</span>;
},
},
{
title: 'Website',
render: rowData => {
return <span>{rowData.website}</span>;
},
},
{
title: 'Action',
render: rowData => {
return <button className='btn btn-warning' onClick={handleEdit(rowData)}>Edit</button>
},
},
];
};
const Table = ({ cols, data, bordered, hoverable, striped, isDark }) => {
return (
<div class="table-responsive">
<table className={`table ${bordered ? 'table-bordered' : 'table-borderless'} ${hoverable && 'table-hover'} ${striped && 'table-striped'} ${isDark && 'table-dark'}`}>
<thead>
<tr>
{cols.map((headerItem, index) => (
<th key={index}>{headerItem.title}</th>
))}
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
{cols.map((col, key) => (
<td key={key}>{col.render(item)}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
)
}
import Table from '../components/Table';
<Table cols={tableConstants(handleEdit)} data={data} isDark bordered striped hoverable />