How to store multiple data points in once cell ?

[damnitrahul]

All the examples on the website have rows data structure mostly flat like [key: string]: string | number

What if I want to store and display multiple data keys in one cell?

eg: If I have an editor component in the cell which edits 3 things.

• Prefix of data
• Postfix of data
• Value of data

the data for the cell will be something like

const rows = [
  {
    // ... other keys with similar data structure
    price: {
      value: 90,
      prefix: "$",
      postfix: "/KG",
    },
  },
];

I would have to handle this kind of data structure in my formatters and editor accordingly.

The closest example I could find was the tree-view example on the demo site, where there was the need to store multiple children.
But all the children data was added to the row object directly instead of adding it inside of a cell key.

Option 1 (used in the example site)

 const rows = [
// ...
{
      id,
      name: `supplier ${i}`,
      format: `package ${i}`,
      position: 'Run of site',
      price,
      children: [
        {
          id: `${id}-0`,
          parentId: id,
          name: `supplier ${i}`,
          format: '728x90',
          position: 'run of site',
          price: price / 2
        },
        {
          id: `${id}-1`,
          parentId: id,
          name: `supplier ${i}`,
          format: '480x600',
          position: 'run of site',
          price: price * 0.25
        },
        {
          id: `${id}-2`,
          parentId: id,
          name: `supplier ${i}`,
          format: '328x70',
          position: 'run of site',
          price: price * 0.25
        }
      ],
      isExpanded: false
    }
]

Option 2 (how i want to do)

const rows = [
  // ...
  {
    id,
    name: `supplier ${i}`,
    format: {
      value: `package ${i}`,
      children: [
        {
          id: `${id}-0`,
          parentId: id,
          name: `supplier ${i}`,
          format: "728x90",
          position: "run of site",
          price: price / 2,
        },
        {
          id: `${id}-1`,
          parentId: id,
          name: `supplier ${i}`,
          format: "480x600",
          position: "run of site",
          price: price * 0.25,
        },
        {
          id: `${id}-2`,
          parentId: id,
          name: `supplier ${i}`,
          format: "328x70",
          position: "run of site",
          price: price * 0.25,
        },
      ],
    },
    position: "Run of site",
    price,
    isExpanded: false,
  },
];

So my question is, Are there any drawbacks or issues I may come across if I structure my rows like option 2 and not option 1?