budget-demo/client/src/views/BudgetPeriodTransTable.jsx

import { Grid } from 'gridjs-react';
import { h } from 'gridjs';
import './BudgetPeriodTransTable.scss';
import '../../node_modules/gridjs/dist/theme/mermaid.css'

const BudgetPeriodTransTable = ({title, transList, isBill, actionHandler}) => {
    const columns = [
        'Description',
        'Amount',
        { 
            name: 'Actions',
            formatter: (cell, row) => {
                return h('button', {
                    className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
                    onClick: () => actionHandler(row)
                }, row.cells[2].data.paid ? 'Unpay' : 'Pay');
            }
        }
    ],
        toCurrency = (amount) => { return '$' + (isBill === true ? '-' : '') + amount; },
        tableData = transList.map(t => { return [t.description, toCurrency(t.amount), t]});

    return (
        <div className='budget-period-trans-table'>
            <div className="table-header">
                <span className="table-title">{ title }</span>
            </div>
                <div className='table-container'>
                <Grid data={tableData} columns={columns} />
            </div>
        </div>
    );
};

export default BudgetPeriodTransTable;