Accounting · Expenses & parties
PayRunTable
The pay run: Ready / Overdue / Selected metrics, a schedule date (and optional Pay from account) with Schedule selected, and a selectable table of payable bills with outstanding amounts and a total-to-pay footer.
import { PayRunTable } from "@cynco-labs/ui";Example
import { PayRunTable } from "@cynco-labs/ui";
export default function PayRunTableDemo() {
return (
<PayRunTable
today="2026-10-30"
scheduledDate="2026-11-03"
defaultSelectedIds={["p1", "p2", "p4"]}
bankAccounts={[
{ id: "acc_1", accountCode: "1000-001", accountName: "Maybank Current Account" },
{ id: "acc_2", accountCode: "1000-002", accountName: "CIMB Business Account" },
]}
bills={[
{
id: "p1",
vendorName: "Tenaga Nasional Berhad",
billNumber: "TNB-220415887",
dueDate: "2026-10-24",
totalAmount: 1284.6,
status: "awaiting_payment",
overdue: true,
},
{
id: "p2",
vendorName: "Kenanga Legal Chambers",
billNumber: "KLC-2026-047",
dueDate: "2026-11-20",
totalAmount: 5800,
status: "approved",
},
{
id: "p3",
vendorName: "Syarikat Logistik Pantas Sdn Bhd",
billNumber: "SLP/INV/2026/0918",
dueDate: "2026-11-12",
totalAmount: 8450,
paidAmount: 3000,
status: "partially_paid",
},
{
id: "p4",
vendorName: "Telekom Malaysia Berhad",
billNumber: "TM-1102938",
dueDate: "2026-11-08",
totalAmount: 389.0,
status: "scheduled",
scheduledPaymentDate: "2026-11-06",
},
{
id: "p5",
vendorName: "Petronas Dagangan Bhd",
billNumber: "PDB-FLT-88213",
dueDate: "2026-11-14",
totalAmount: 2318.45,
status: "awaiting_payment",
},
]}
/>
);
}Use
Expenses Pay runs view, choosing which approved bills to schedule.
Props
bills, selectedIds / onSelectedChange or defaultSelectedIds, scheduledDate, today, bankAccounts (optional), onSchedule, isSubmitting; className and native div props.
Notes
Table primitives inside the DataTable tray: header band on bg-table-tray, rows on bg-table-surface, selected rows bg-active-primary. Only approved or awaiting-payment bills can be scheduled; the rest are counted in an amber 'N excluded' chip. A Pay from account select and a footer total sit on the tray. Responsive: built on StatGrid, ActionBar and DataList: the table becomes stacked bill cards below a 42rem container.