Table(react-aria-components): How to render <Cell/> conditionally based on external state?

[jaknas]

Hello 👋
I'm trying to render <Cell/> (or rather what's inside it – i want to hide the content) conditionally, based on some state that's declared outside of Table.

Here's a codesandbox showing what I'm trying to achieve: https://codesandbox.io/s/blissful-water-cmgxbx?file=/src/App.js

The TableBody render prop is called only once, which I believe is expected.

Do you have any suggestions on how I should go about it?

[LFDanLu]

I believe this behavior is due to how the collection caches the children. One way to forcibly rerender the Cell's content is via context like so: https://codesandbox.io/s/delicate-violet-vmnnie?file=/src/App.js.

[devongovett]

Alternatively, if you want to avoid caching, you can use list.items.map to generate the rows instead of the items prop with a render function. Make sure to add an id and key prop to the <Row> element as well (these are normally inferred when using the items prop. https://codesandbox.io/s/boring-rui-vhf56s

[jaknas]

Alternatively, if you want to avoid caching, you can use list.items.map to generate the rows instead of the items prop with a render function. Make sure to add an id and key prop to the <Row> element as well (these are normally inferred when using the items prop. codesandbox.io/s/boring-rui-vhf56s

@devongovett Thanks for the answer! In your codesandbox, it seems like it doesn't work properly when items were reordered using the drag handle. It looks like the item that is being reordered doesn't react to showLastCell state changing. In @LFDanLu 's example, it works properly.

[jaknas]

@LFDanLu @devongovett friendly ping. if you could look at my comment above ☝️ If you think this is a bug, I can create a separate issue.

[LFDanLu]

That's quite curious, I'd need to dig into this one further. Feel free to create a separate issue so we can track it.

[clearly-outsane]

I tried this because i need loading states to show in cells when async stuff happens - it never shows for me cus it doesnt re render. Dunno what I'm doing wrong - is there a reliable way to make every cell work like they normally would do like as if they arent cached? ( click on cell -> does something async -> need to show loading state/progress -> async stuff is over -> show new state )

[snowystinger]

You should just be able to edit your data in state then rely on our caching to make a performant re-render
Maybe just add a field to your data objects?

let [data, setData] = useState([{id: 'item1', isLoading: true}, ...])
function onAsyncDone() {
  setData([{id: 'item1', isLoading: false}, ...])
}

Otherwise, state updates within whatever component you render in your cell should still update.

So it just depends on where the knowledge of this state is, is it outside the table or inside the cell.

[clearly-outsane]

I'm getting the data from a trpc hook. I'm rendering the table cells by passing a renderCell function inside the Table Cell like: <TableCell>{renderCell(item, columnKey)}</TableCell>. In that renderCell function I have a component which shows a loader when trpc.isLoading is true but it never shows up within the table. Not sure why. It works outside of it.

I think I forgot to mention that I'm passing data to the table through the const list = useAsyncList({ load, sort }) hook. In the load function I'm return the data I get from trpc. I'm triggering the load function passed to useAsyncList by calling list.setFilterText(""); in a useEffect which fires when the data from trpc is loaded. It's a bit roundabout yes.

[snowystinger]

Would you be willing to put together a codesandbox demonstrating what you're doing? There was a lot of info in this message, but there would still be a lot of guess work on our side to help you with it.