Table Component
Usage:
import Table from '/components/Table'
<Table data={data} cols={tableConstants(handleEdit)} isDark hoverable striped bordered={false} />
Create a Table Constant which will be supplied to Table and data will be rendered automatically
import React from 'react';
export const tableConstants = (handleEdit) => {
return [
{
title: 'ID',
key: 'id',
render: rowData => {
return <span>{rowData.id}</span>;
},
},
{
title: 'Name',
key: 'name',
render: rowData => {
return <span>{rowData.name}</span>;
},
},
{
title: 'Category',
key: 'category',
render: rowData => {
return <span>{rowData.category}</span>;
},
},
{
title: 'Country',
key: 'country',
render: rowData => {
return <span>{rowData.country}</span>;
},
},
{
title: 'Action',
key: 'action',
render: rowData => {
return <button onClick={() => handleEdit}>Edit</button>;
},
},
];
};
Here tableConstants()
is a javascript function which returns an array of objects or columns to be displayed on table. This function accepts parameters whatever you need to have in constant function to perform any additional task…