How to Create Master-Detail Views in Retool

Add a Table component to the left side of your canvas. Set its Data source to {{ getItems.data }} where getItems is your list query. Resize the Table to take up roughly 50-60% of the canvas width. On the right side, add a Container component. This Container will hold the detail view. Set its visible / Hidden property to {{ !table1.selectedRow }} so the detail panel hides automatically when nothing is selected. You can also add a 'Select a row to view details' placeholder text component that shows when table1.selectedRow is empty.

Create a new SQL query named 'getItemDetail'. Write a SELECT query that fetches full record details using the selected row's ID as a parameter. Enable 'Run when inputs change' in the query's Advanced settings — this ensures the query re-runs automatically whenever {{ table1.selectedRow.data.id }} changes (i.e., whenever the user clicks a different row). Do not enable 'Run on page load' for this query — it should only fire after row selection.

1-- getItemDetail SQL query
2SELECT
3  i.*,
4  u.name AS created_by_name,
5  u.email AS created_by_email,
6  c.name AS category_name
7FROM items i
8LEFT JOIN users u ON i.created_by = u.id
9LEFT JOIN categories c ON i.category_id = c.id
10WHERE i.id = {{ table1.selectedRow.data.id }}
11LIMIT 1;

Inside the Container component, add display components bound to {{ getItemDetail.data[0].fieldName }}. For example: a Text component showing '# {{ getItemDetail.data[0].id }} — {{ getItemDetail.data[0].title }}', several key-value Text components for fields like status, category, and created_at, and a Text Area showing the description. Wrap everything in a loading spinner using the Container's Loading state set to {{ getItemDetail.isFetching }}.

1// Text component values inside the detail Container:
2// Title: {{ getItemDetail.data[0].title }}
3// Status: {{ getItemDetail.data[0].status }}
4// Created: {{ moment(getItemDetail.data[0].created_at).format('MMM D, YYYY') }}
5// Description: {{ getItemDetail.data[0].description }}

Replace some display Text components with editable inputs (Text Input, Select dropdown) so users can edit records directly in the detail panel. Add a 'Save Changes' Button at the bottom of the Container. When clicked, the button triggers an UPDATE query named 'updateItem' that uses the form values. Use {{ table1.selectedRow.data.id }} as the WHERE clause ID. After the update succeeds, chain a query trigger to re-run getItems (to refresh the master table) and getItemDetail (to reflect the saved values).

1-- updateItem SQL query (triggered by Save button)
2UPDATE items
3SET
4  title = {{ titleInput.value }},
5  status = {{ statusSelect.value }},
6  description = {{ descriptionTextarea.value }},
7  updated_at = NOW()
8WHERE id = {{ table1.selectedRow.data.id }}
9RETURNING *;

When the page loads, no row is selected and table1.selectedRow is undefined. Handle this with two approaches: (1) Set the detail Container's Hidden property to {{ !table1.selectedRow }} — it disappears when nothing is selected. (2) Add an empty state placeholder: a Text component outside the Container with the message 'Click a row to view details' and set its Hidden to {{ !!table1.selectedRow }}. This creates a clean UX where the placeholder shows until the user makes a selection.

1// Container Hidden property:
2{{ !table1.selectedRow }}
3
4// Placeholder Text Hidden property (inverse):
5{{ !!table1.selectedRow }}
6
7// Safe access pattern for detail fields (prevents undefined errors):
8{{ table1.selectedRow?.data?.title ?? 'No record selected' }}

For narrower canvases or when you want a full-screen detail view, replace the side Container with a Modal. Name it 'detailModal'. In the Table's event handlers, add an 'On row click' handler with action 'Open modal' pointing to detailModal. Move your detail components inside the Modal body. The Modal variant gives more vertical space for complex detail forms and is better for edit workflows where you want a clear 'Save / Cancel' pattern.

1// Table 'On row click' event handler:
2// Action: Control component
3// Component: detailModal
4// Method: open()
5
6// Or via JS Query:
7await detailModal.open();
8await getItemDetail.trigger();