Help Needed with Creating nested tables in one Data-Grid View

[vasanth-seven]

I've attempted some configurations, but the output is not as expected.
I have sample data here have to create a data-grid view where the view will be something like this (bids and offers are not related).

Bonds  | Bids                           | Offers

bond1  | Broker  | Units | Bid Price    | Broker | Units | Offer Price
       | broker2 |   1   |   98         | broker2 | 1 | 98
       | broker1 |   1   |   100        | broker5 | 1 | 100
       | broker3 |   2   |   110        |

bond2  | Broker  | Units | Bid Price    | Broker | Units | Offer Price
       | broker2 |   1   |   98         | broker2 | 1 | 98
       | broker1 |   1   |   100        | broker5 | 1 | 100
       |                                | broker3 | 2 | 104 

const data = [
    {
        'bond1': {
            bids: [
                { broker: "broker2", bidPrice: 98, units: 1 },
                { broker: "broker1", bidPrice: 100, units: 1 },
                { broker: "broker3", bidPrice: 110, units: 2 }
            ],
            offers: [
                { broker: "broker2", offerPrice: 98, units: 1 },
                { broker: "broker5", offerPrice: 100, units: 1 }
            ]
        }
    },
    {
        'bond2': {
            bids: [
                { broker: "broker2", bidPrice: 98, units: 1 },
                { broker: "broker1", bidPrice: 100, units: 1 },
            ],
            offers: [
                { broker: "broker2", offerPrice: 98, units: 1 },
                { broker: "broker5", offerPrice: 100, units: 1 },
                { broker: "broker3", bidPrice: 104, units: 2 }
            ]
        }
    }
]

[sinistersnare]

I think you are going to need to normalize/flatten the data yourself (including with some code).

const data = [
  { bondName: "bond1", bondType: "bids", broker: "broker2", price: 98, units: 1},
  { bondName: "bond1", bondType: "bids", broker: "broker1", price: 100, units: 1},
  { bondName: "bond1", bondType: "bids", broker: "broker3", price: 110, units: 2},
  { bondName: "bond1", bondType: "offers", broker: "broker2", price: 98, units: 1},
  { bondName: "bond1", bondType: "offers", broker: "broker5", price: 100, units: 1},
  { bondName: "bond2", bondType: "bids", broker: "broker2", price: 98, units: 1},
  { bondName: "bond2", bondType: "bids", broker: "broker1", price: 100, units: 1},
  { bondName: "bond2", bondType: "offers", broker: "broker2", price: 98, units: 1},
  { bondName: "bond2", bondType: "offers", broker: "broker5", price: 100, units: 1},
  { bondName: "bond2", bondType: "offers", broker: "broker3", price: 104, units: 2},
];

Then you can split/group-by on the correct columns as needed.

[vasanth-seven]

I have tried that group by bond name and split by bond type It'll sum up the prices and units.
Need each price and units in different rows.

[vasanth-seven]

Thanks @sinistersnare Got the view kind of what was expected using the below configuration. Is there an option to disable / hide the total.

  const dashboardConfig = {
                "settings": false,
                group_by: ['bondName','broker'],
                split_by: ['bondType'],
                columns:['price','units']
            }

[sinistersnare]

Im not sure there is a way to hide that total row. Maybe with some CSS, but it would be hacky.

[specialisedk]

Check this out:

https://github.com/perspective-community/perspective-viewer-datagrid-norollups