InvoiceListTable
The invoices list: Invoice #, Customer, Date, Due Date, Amount and Status, with row selection, sort headers and per-row actions.
import { InvoiceListTable } from "@cynco-labs/ui";Example
import { useState } from "react";
import { InvoiceListTable } from "@cynco-labs/ui";
export default function InvoiceListTableDemo() {
const rows = [
{
id: "1",
invoiceNumber: "INV-2026-0142",
customerName: "Syarikat Maju Jaya Sdn Bhd",
invoiceDate: "2026-10-28",
dueDate: "2026-11-27",
total: 12850,
status: "finalized",
journalEntryId: "je1",
emailStatus: "opened",
},
{
id: "3",
invoiceNumber: "INV-2026-0140",
customerName: "Tropika Kopi Enterprise",
invoiceDate: "2026-10-02",
dueDate: "2026-10-16",
total: 3240,
status: "overdue",
journalEntryId: "je3",
emailStatus: "bounced",
},
{
id: "4",
invoiceNumber: "INV-2026-0139",
customerName: "Nusantara Logistik Bhd",
invoiceDate: "2026-09-30",
dueDate: "2026-10-30",
total: 28400,
status: "partially_paid",
journalEntryId: null,
},
];
const [sel, setSel] = useState(["3", "4"]);
function toggle(id) {
const s = sel.slice();
const i = s.indexOf(id);
if (i < 0) s.push(id);
else s.splice(i, 1);
setSel(s);
}
return (
<InvoiceListTable
invoices={rows}
selectedIds={sel}
onToggleRow={toggle}
onToggleAll={() => {
setSel(sel.length === rows.length ? [] : rows.map((r) => r.id));
}}
sortField="invoice_date"
sortDirection="desc"
/>
);
}Use
The Invoicing page's main list, above which InvoiceBulkBar appears once rows are ticked.
Props
invoices (invoiceNumber, customerName, invoiceDate, dueDate, total, currency, status, journalEntryId, emailStatus), selectedIds, onToggleRow, onToggleAll, sortField, sortDirection, onSort, optional footer; className.
Notes
Invoice numbers use text-tiny-id in primary and amounts are right-aligned tabular-nums. Responsive: Built on DataList: a tray table from 48rem of container width, a stacked card per invoice below that (customer and amount, then status and signals, then Invoice #, Date and Due Date).