Help with server and client components
Unanswered
Cinnamon posted this in #help-forum
CinnamonOP
I'm trying to create two tables and have interactivity between the two.
- Table A displaying a list of users (last column is a select button)
- Table B displaying a list of selected users from Table A
I initially had the (simplified) project structure to look like:
└── app/
├── users/
│ └── page.tsx
└── components/
├── UsersTable.tsx
├── SelectedUsersTable.tsx
└── SelectionButton.tsx
Page.tsx looks like:
<div>
<UsersTable />
<SelectedUsersTable />
</div>
UsersTable component has <SelectionButton /> for each row in a column of a <table> element. The idea was that for each row the SelectionButton was clicked, the row would show up in the SelectedUsersTable. I had made UsersTable a server component because it made the data fetching easier (i.e. for getting the users to be displayed). This turned out to be problematic because I couldn't assign on click handlers (or add other interactivity) to the components. Can anyone point me in the right direction here?
- Table A displaying a list of users (last column is a select button)
- Table B displaying a list of selected users from Table A
I initially had the (simplified) project structure to look like:
└── app/
├── users/
│ └── page.tsx
└── components/
├── UsersTable.tsx
├── SelectedUsersTable.tsx
└── SelectionButton.tsx
Page.tsx looks like:
<div>
<UsersTable />
<SelectedUsersTable />
</div>
UsersTable component has <SelectionButton /> for each row in a column of a <table> element. The idea was that for each row the SelectionButton was clicked, the row would show up in the SelectedUsersTable. I had made UsersTable a server component because it made the data fetching easier (i.e. for getting the users to be displayed). This turned out to be problematic because I couldn't assign on click handlers (or add other interactivity) to the components. Can anyone point me in the right direction here?