Nested routing with table and expandable rows?

[ripe quiver]

I am trying to achieve a UI as such:

/users - renders a table, each row representing a user. Clicking on the row's expand icon, shows the user's details (fetch on demand)
/users/$id - renders the same table with all users, but the row of the user with $id is expanded

Is it possible to achieve this with nested routing easily?

[last meteor]

Some pseudo code for you
I'm pretty sure users.tsx (where the table is rendered) has to be a layout route for users/$id.tsx (where the detail expansion for a single user would be)

let {user} = props;
let {id} = useParams();
return <tr>
  <td>{user.id}</td>
  {/* if the user id for this row matches the id param, render the nested route */}
  <td>{user.id === id ? <Outlet /> : null}</td>
</tr>