TableCell Data Binding via getKeyValue (and Discord or ?)

[robpetty]

First, is there a Discord or something out there for discussing NextUI related things?

My issue here is related to bind of data to a table.

getKeyValue seems to be defined as:

declare const getKeyValue: (obj: any, key: Key) => any;

(Located in node_modules/@nextui-org/shared-utils/dist/object.d.ts.)

Where key is:
type Key = string | number;

The issue I have is when I map the data to the

component, any nested keys will not work. My code:

<TableBody items={rows}>
          {(item: any) => (
            <TableRow key={item.key}>
              {(columnKey) => (
                <TableCell>{getKeyValue(item, columnKey)}</TableCell>
              )}
            </TableRow>
          )}
        </TableBody>

Everything binds fine, until I get to columnKey = "users.display_name".

To work around this, I am simply flatting the item to include display_name at the top so the item looks like this:

{
'id':'wfge2fefe2fee2',
'display_name': 'first last',
'users':{
  'id':'f2f2effd',
  'display_name':'first last'
}
}

The column definitions:

...
    {
      key: "display_name",
      label: "Flattened Display Name",
    },
    {
      key: "users.display_name",
      label: "Users Display Name",
    },

So the first column shows fine, second one ends up empty.

If anyone has a better recommendation then flattening the data, let me know.

Or maybe we can request an update to getKeyValue (or variant) keys to support nested keys.

[mauriciopiber]

I've found this same issue and you can use a custom function to get nested values from array as well. For example:

import { Key } from 'react';

export function getNestedKeyValue<T>(obj: T, desc: Key): any {
  const propertyNames = desc.toString().split('.');

  let currentObj: any = obj;

  for (const propertyName of propertyNames) {
    if (
      !currentObj ||
      typeof currentObj !== 'object' ||
      !(propertyName in currentObj)
    ) {
      return undefined; // Return undefined if encountered non-object or missing property while traversing
    }
    currentObj = currentObj[propertyName];
  }

  return currentObj;
}