🏠
DrillDowner.js
Interactive drill-down widget
No togglesUp
TogglesUp true
Sample code
const data = [
{ category: "Electronics", product: "Phone", status: "Active", qty: 10 },
{ category: "Electronics", product: "Laptop", status: "Pending", qty: 5 },
{ category: "Books", product: "Novel", status: "Active", qty: 25 },
{ category: "Books", product: "Comics", status: "Inactive",qty: 3 },
];
// 1) togglesUp OFF: group row cells for "status" are blank
new DrillDowner("#dd_off", data, {
groupOrder: ["category", "product"],
columns: [ "status"],
totals: ["qty"],
colProperties: {
category: { label: "Category" },
product: { label: "Product" },
status: { label: "Status" }, // togglesUp not enabled
qty: { label: "Qty", decimals: 0 },
},
leafRenderer: (item) => `${item.product} (${item.status})`
});
// 2) togglesUp ON: group row "status" shows combined unique statuses
new DrillDowner("#dd_on", data, {
groupOrder: ["category","product"],
columns: ["qty", "product", "status"],
totals: ["qty"],
colProperties: {
category: { label: "Category" },
product: { label: "Product" },
status: { label: "Status", togglesUp: true }, // <-- here
qty: { label: "Qty", decimals: 0 },
},
leafRenderer: (item) => `${item.product} (${item.status})`
});
/*
Expected effect in the grouped (Category) rows:
- Electronics status: "Active, Pending"
- Books status: "Active, Inactive"
*/