Accounting · Expenses & parties
VendorListTable
The vendors list: selection, vendor with initials and contact / category / place, You owe (with overdue or All overdue), Paid to date, Last paid and row actions.
import { VendorListTable } from "@cynco-labs/ui";Example
import { VendorListTable } from "@cynco-labs/ui";
export default function VendorListTableDemo() {
return (
<VendorListTable
vendors={[
{
id: "v1",
name: "Tenaga Nasional Berhad",
email: "billing@tnb.com.my",
category: "Utilities",
city: "Kuala Lumpur",
country: "Malaysia",
outstanding: 1284.6,
overdue: 1284.6,
totalPaid: 15420.8,
lastPaymentDate: "2026-09-24",
},
{
id: "v2",
name: "Syarikat Logistik Pantas Sdn Bhd",
email: "ar@pantas.my",
category: "Freight & delivery",
city: "Klang",
country: "Malaysia",
outstanding: 5450,
overdue: 0,
totalPaid: 68900,
lastPaymentDate: "2026-10-18",
},
{
id: "v3",
name: "Kenanga Legal Chambers",
phone: "+60 3-2161 0088",
category: "Professional fees",
city: "Kuala Lumpur",
outstanding: 9800,
overdue: 4000,
totalPaid: 22000,
lastPaymentDate: "2026-08-30",
},
{
id: "v4",
name: "Grand Office Supplies",
email: "sales@grandoffice.my",
category: "Office supplies",
city: "Petaling Jaya",
outstanding: 0,
totalPaid: 4318.25,
lastPaymentDate: "2026-10-14",
},
{
id: "v5",
name: "Cetak Kilat Printing",
email: "order@cetakkilat.my",
category: "Printing",
isActive: false,
totalPaid: 1250,
},
]}
/>
);
}Use
Vendors page list.
Props
vendors [{name, email, phone, category, city, country, isActive, outstanding, overdue, totalPaid, lastPaymentDate}], defaultSelectedIds, currency; selectedIds / onSelectedChange (controlled), onRowClick, className.
Notes
Responsive by container: DataList: stacked vendor cards below a 42rem container.