Multiple action button propagations within table rows??

[binaryartifex]

Im trying to find out the best way to add a few buttons to the end of each row of a table. its clear that a 'row' action is unsuitable as there is, lets say '3' possible actions. My first impression is to add a new column for each button so each button has its own 'cell action' and via the mapping of items to columns in the table implementation i can concatenate the item id with the specific column name so if i have a list of products, in the onCellAction i could search for something along the lines of [product-id]-toggle-drawer or something. however because its a cell action and not an onclick action, would an empty button suffice and hide it from screen readers? perhaps just add a contextual icon to each cell that 'looks' like a button? some advice in this instance moving foward would be greatly appreciated.

Heres a full snippet of a mock storybook implementation im currently working with. a few cells needed custom styling, hence the switch statement on the column key.

export const Table: StoryObj<typeof TableComponent> = {
  args: {
    "aria-label": "System Faults Table",
    selectionMode: "multiple",
    selectionBehavior: "toggle",
  },
  render: (args) => {
    return (
      <div className="flex w-full justify-center">
        <div className="w-full max-w-7xl">
          <TableComponent
            {...args}
            onCellAction={(key) => console.log(`${key} has been triggered`)}
          >
            <TableHeader>
              <Column key="siteName">Site Name</Column>
              <Column key="severityName">Severity</Column>
              <Column key="faultTypeName">Type</Column>
              <Column key="triggerTime">Trigger Time</Column>
              <Column key="statusName">Status</Column>
              <Column key="description">Description</Column>
              <Column key="action1">Action 1</Column>
              <Column key="action2">Action 2</Column>
            </TableHeader>
            <TableBody items={faultsData}>
              {(item) => {
                return (
                  <Row key={item.id}>
                    {(columnKey) => {
                      const data = item[columnKey as FaultsTableKey];
                      const cellKey = `${item.id}-${columnKey}`;

                      switch (columnKey) {
                        case "siteName":
                          return (
                            <Cell key={cellKey}>
                              <p className="font-bold">{data}</p>
                            </Cell>
                          );
                        case "action1":
                          // onCellAction = [fault-id]-action1 has been triggered
                          return (
                            <Cell key={cellKey}>
                              <button>Do Something?</button>
                            </Cell>
                          );
                        case "action2":
                          // onCellAction = [fault-id]-action2 has been triggered
                          return (
                            <Cell key={cellKey}>
                              <button>Do Something Else?</button>
                            </Cell>
                          );
                        default:
                          return <Cell key={cellKey}>{data}</Cell>;
                      }
                    }}
                  </Row>
                );
              }}
            </TableBody>
          </TableComponent>
        </div>
      </div>
    );
  },
};

[snowystinger]

You can add multiple buttons to a single column. This is actually what we recommend doing, you can navigate a cell with the arrow keys, here's an example based on our Spectrum table https://codesandbox.io/s/condescending-aj-yn3hs6?file=/src/App.js

If you can perform it on many rows at once, then we recommend putting that outside the table, as a bulk action. See our ActionBar as an example of one way to accomplish this https://react-spectrum.adobe.com/react-spectrum/ActionBar.html, you could also have a more permanent set of bulk actions that are always visible.

[binaryartifex]

@snowystinger you good sir, are a gentleman and a scholar, ive been rackin my brain and trawling through accessibility docs tryin to figure out the best approach, i think where that is in the docs flew right over my head. Where i was confused is that i was under the impression that

1. actions and cells had a 1:1 relationship (i didn't realise focus would go deeper than the cell to individually focusable buttons, nice)
2. button events didn't propagate down to the button due to the cells focus, so perhaps a 'styled' cell looking like a button would suffice
3. any actions had to be propagated back up through the table (not too reminiscent of how menu item actions work)

it would be awesome if a more robust table example using cell actions was provided in the react-aria table page. that aside, cheers again. big help

[snowystinger]

Glad I could help!

Yeah, while I was writing the reply, I noticed that our docs are still making use of our hideHeader prop, which we are no longer really recommending. Instead, we're recommending the approach I put together in that codesandbox.

I don't quite follow about button events not propagating down to the button?

And definitely, could use a cell action example. Thanks for the input!

[binaryartifex]

Oh with the button even propagation thing, that was me not having enough coffee. because there's an 'onCellAction' callback on the table itself which lead me to believe that was where i had to handle any action events on a cell (the same way a menu item does) which is where i drew the 1:1 on cells with actions, but your example shows no use of it, which suggests i can set my own callbacks directly on the buttons themselves without the need to register with the useCellAction callback...

[snowystinger]

No worries, that's exactly right. 👍🏻