[Feature Request] Table nested column key

[atilagulers]

Is your feature request related to a problem? Please describe.

I've been working with the NextUI Table component and found it to be very versatile for most use cases. However, I encountered a limitation when trying to display data from nested objects directly in the table columns.

Problem: When trying to access nested object keys, like brand.name, there isn't a straightforward way to reference these nested keys within the column definitions of a NextUI Table.

Describe the solution you'd like

const columns = [ { key: 'name', label: 'Name', }, { key: 'description', label: 'Description', }, { key: 'brand.name', label: 'Brand', Cell: (value) => { return value.name; <======== solution } }, ];

maybe we can reach the nested value like this.

Describe alternatives you've considered

Implementing a custom function to handle the dot notation and pass the return value to the TableCell, but it feels like a workaround rather than a native feature of the Table. Using other table libraries like react-table which supports this feature, but this would mean moving away from the integrated UI design system that NextUI provides. I believe this feature would greatly enhance the developer experience and the utility of the NextUI Table for displaying complex data structures.

Thank you for considering this request.

Screenshots or Videos

[linear[bot]]

ENG-538 [Feature Request] Table nested column key

[KelvinDiasMoreira]

Check this doc -> https://nextui.org/docs/components/table#custom-cells

[meness]

They already wrote a function for that, but not exported from the table package. Install @nextui-org/shared-utils and use getProp. Also, you can write a function to handle that, a very simple one would be:

export const getObjectValueByPath = <R>(obj: object, path: string, separator: string = '.'): R => {
  return path.split(separator).reduce((xs, x) => {
    return xs?.[x] ?? null;
  }, obj) as R;
};

[naabin]

If you are working with nested column keys which is very straightforward to use using by customizing how you want your table cell to appear. You can actually customize the table cell in the follwing way.

const renderCell = useCallback((obj: Type, columnKey: React.Key) => {
    const cellValue = expense[columnKey as keyof Type];
    switch (columnKey) {
      case '<column-label>':
        return <span>{<your nested data objects can be accessed here.>}</span>
      default:
        return cellValue;
    }
  }, []);

And in the table

      <TableBody
        isLoading={loading}
        items={<your data>}
        loadingContent={<Spinner label="Loading..." />}
      >
        {(item: Type) => (
          <TableRow key={item.id}>
            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
          </TableRow>
        )}
      </TableBody>

For further details refer to next-ui-table