tenderporkk's questions

Tenho um array tracksdo tipo Track[]. Preciso exibi-los em uma tabela HeroUI/NextUI dinamicamente . O exemplo usa getKeyValue, que é uma função na biblioteca HeroUI, para recuperar dinamicamente o valor de cada célula. No entanto, algumas das propriedades que preciso acessar getKeyValuesão aninhadas. Existe alguma maneira de acessar propriedades como album.name?

// imports ...
// nextjs page component...

interface Album {
  name: String;
}

interface Track {
  name: String;
  album: Album;
}

const tableColumns = [
  { label: "Title", key: "name" },
  { label: "Album", key: "album.name" },
];

const [tracks, setTracks] = useState<Track[]>();

// fetch tracks ...

return (
  <Table className="table-auto">
    <TableHeader columns={tableColumns}>
      {(column) => (
        <TableColumn key={column.key}>{column.label}</TableColumn>
      )}
    </TableHeader>
    <TableBody items={tracks}>
      {(item) => (
        <TableRow key={item.id}>
          {(columnKey) => (
            <TableCell>{getKeyValue(item, columnKey)}</TableCell>
          )}
        </TableRow>
      )}
    </TableBody>
  </Table>
);