35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
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; |