What a table looks like now

The Code:

await io.display.table('Example Table', {
  columns: [
    {
      label: 'Name',
      renderCell: (cell) => ({
        label: cell.name,
      }),
    },
    {
      label: 'Age',
      renderCell: (cell) => ({
        label: cell.age,
      }),
    },
  ],
  data: [
    {
      name: 'Mayhul',
      age: 24,
    },
    { name: 'Nick', age: 25 },
    { name: 'Joseph', age: 30 },
  ],
});

What other display fields look like:

The Code:

 await io.group([
  io.display.metadata('Metadata', {
    data: [
      { label: 'Email', value: '[email protected]' },
      { label: 'Joined On', value: new Date() },
    ],
    layout: 'card',
  }),
  io.display.object('Notification Settings', {
    data: { mobile: 'ON', desktop: 'OFF', web: 'ON' },
  }),
]);

What I want the table to look like:

When clicked:

A modal pops up with additional details

The Code:

await io.display.table('Example Table', {
  columns: [
    {
      label: 'Name',
      renderCell: (cell) => ({
        label: cell.name,
        onExpand: async () => {
          await io.group([
            io.display.metadata('Metadata', {
              data: [
                { label: 'Email', value: cell.email },
                { label: 'Joined On', value: cell.joinedOn },
              ],
              layout: 'card',
            }),
            io.display.object('Notification Settings', {
              data: cell.notificationSettings,
            }),
          ]);
        },
      }),
    },
    {
      label: 'Age',
      renderCell: (cell) => ({
        label: cell.age,
      }),
    },
  ],
  data: [
    {
      name: 'Mayhul',
      age: 24,
      email: '[email protected]',
      notificationSettings: { mobile: 'ON', desktop: 'OFF', web: 'ON' },
      joinedOn: new Date('2022-01-01'),
    },
    {
      name: 'Nick',
      age: 25,
      email: '[email protected]',
      notificationSettings: { mobile: 'ON', desktop: 'ON', web: 'ON' },
      joinedOn: new Date('2022-03-01'),
    },
    {
      name: 'Joseph',
      age: 30,
      email: '[email protected]',
      notificationSettings: { mobile: 'ON', desktop: 'OFF', web: 'ON' },
      joinedOn: new Date('2022-02-01'),
    },
  ],
});

Any io.select components inside onExpand can be ignored as they don’t make sense in that context.