table-groupping.js

// Input

groupBy = ['color', 'size', '', ...]

data = [
    {
        "color": "red",
        "size": "big",
        "data": "1"
    },
    {
        "color": "red",
        "size": "big",
        "data": "2"
    },
    {
        "color": "red",
        "size": "small",
        "data": "3"
    },
    {
        "color": "blue",
        "size": "big",
        "data": "4"
    },
];


// Output
`
Color: Red
    Size: big
        1
        2
    Size: small
        3
Color: blue
    Size: big
        4
`

// Step 1: Merge data into groups

groups = [
    {
        "color": "red",
        "size": "big",
        "ids": [1, 2]
    },
    {
        "color": "red",
        "size": "small",
        "ids": [3]
    },
    {
        "color": "blue",
        "size": "big",
        "ids": [4]
    },
]

// Step 2: Generate rows with types

rows = [
    {
        type: "group",
        level: 0,
        key: "color",
        value: "red"
        
    },
    {
        type: "group",
        level: 1,
        key: "size",
        value: "big"
    },
    {
        type: "row",
        level: 2,
        rows: [1,2]
    },
    {
        type: "group",
        level: 1,
        key: "size",
        value: "small"
    },  
    {
        type: "row",
        level: 2,
        rows: [3]
    },
    {
        type: "group",
        level: 0,
        key: "color",
        value: "blue"
        
    },
    {
        type: "group",
        level: 1,
        key: "size",
        value: "big"
    },
    {
        type: "row",
        level: 2,
        rows: [4]
    },
]