How would you implement a table with custom cells that has a different styling on select

[clearly-outsane]

Let's say you make a Table component like this - https://codesandbox.io/s/objective-cherry-g837on?file=/src/App.tsx or something like how NextUI does.

You render the body part of the table like this -

<TableBody items={list.items}>
        {(item) => (
          <Row key={item.name}>
            {(columnKey) => <Cell>{item[columnKey]}</Cell>}
          </Row>
        )}
</TableBody>

But if you want to render a custom cell here, how do you handle styling them based on whether they are selected or not? I don't know why I can't figure out something so simple

[reidbarber]

Rows have selection, not cells, so you'll notice in that example in TableRow.tsx, there is

let isSelected = state.selectionManager.isSelected(item.key);

If you do need the row's selection state inside the cell, in TableCell.tsx you can pass the cell's parentKey instead:

let isSelected = state.selectionManager.isSelected(cell.parentKey);

If you want the selection state outside the component, you should make the table's selection controlled, then you'll be able to access it outside.

[clearly-outsane]

Ah I see. I meant how can you access it outside the component - for example when doing styling using tailwind. So can you do something like

<Row className = {(state)=>state.isSelected?"bg-blue-300":"bg-white"}> ... </Row>

[snowystinger]

Maybe have a look at our examples. I think this line will answer your question https://github.com/adobe/react-spectrum/blob/main/examples/rac-tailwind/src/App.js#L561

[clearly-outsane]

Oh thank you! I completely forgot about using aria-selected and other data attributes.