🏠

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"
    */