Any way to use a custom Row component with its own local state in TableBody?

[mkarajohn]

I have a table with an "actions" column. One of these actions is "delete row".

Now, I can have a centralized mutation for deleting any given row, and also adding a state indicating which row is currently being deleted (until the deletion request resolves) in order to visually "disable" the row that's being deleted

OR

I can simply have a custom Row component that encapsulates the deleteion mutation, so when a row gets deleted then it's much easier to simply make any modifications I want just to that row, without the need to keep track of the row id, etc.

In essence, I want to do something like this:

<TableBody>
{items.map((item) => {
  return <CustomRow item={item} />
}}
</TableBody>

Unfortunately, it seems that TableBody only accepts og Row elements as children. I managed to get as far as something like this

function CustomRow<T extends object>({
  item,
  children: __,
  ...rest
}: {
  item: Item;
} & TableRowProps<T>) {
  const deleteRowMutation = useMutation({
    mutationFn: async (itemId: string) => {
    ....
    }
  });

  return (
    <Row className={deleteRowMutation.isPending ? 'opacity-50' : ''} {...rest}>
       <Cell>{item.name}</Cell>
       <Cell>{item.desc}</Cell>
       <Cell>{item.someStuff}</Cell>
       <Cell><button onclick={() => {deleteRowMutation.mutate(item.id)}}>Delete</button></Cell>
    </Row>
  );
}

// https://github.com/heroui-inc/heroui/issues/1791#issuecomment-1796064199
// @ts-ignore
CustomRow.getCollectionNode = Row.getCollectionNode;

But I am getting this error:

CustomRow.tsx:128 Error: Cell count must match column count. Found 0 cells and 4 columns

Is what i am trying to do even possible? If so, how?

Thanks

[snowystinger]

Are you using React Aria Components Tables? or are you using hooks?

You should be able to use a custom wrapped row, see https://react-spectrum.adobe.com/react-aria/Table.html#reusable-wrappers

Note, if you're following the hooks docs, they use an old implementation of Collections which is not this flexible. If you use React Aria Components, it uses the new Collections and you don't need getCollectionNode and you can wrap any of the components much more easily.
If you must use the hooks, then you may want to look at our implementation in RAC to see how to use the new Collections. We'll hopefully update the hooks in the new docs we're working on.

[mkarajohn]

Hm, unfortunately I am using HeroUI, and it doesn't look like it exposes the Collection component.

but say I was using vanilla react-aria-components, I would implement what I described with something like this?

function CustomRow<T extends object>({
  itemId,
  columns,
  children
  ...rest
}: {
  itemId: string;
  columns: Column[];
} & TableRowProps<T>) {
  const deleteRowMutation = useMutation({
    mutationFn: async (itemId: string) => {
    ....
    }
  });

  return (
    <Row className={deleteRowMutation.isPending ? 'opacity-50' : ''} {...rest}>
      <Collection items={columns}>
        {children}
      </Collection>
      <Cell><button onclick={() => {deleteRowMutation.mutate(itemId)}}>Delete</button></Cell>
    </Row>
  );
}

....
const columns = <A 3 (OR 4?) ITEMS STRING ARRAY>
....
<TableBody>
{items.map((item) => {
  return <CustomRow itemId={item.id} columns={columns}>
    <Cell>{item.name}</Cell>
    <Cell>{item.desc}</Cell>
    <Cell>{item.someStuff}</Cell>
  </CustomRow>
}}
</TableBody>

Thanks

[snowystinger]

yep, that should work