I would like to click on a table row and have a second table display the related data.

[pmankow]

Hello.

I have two tables. Table Parts has a row Part Number, and another column with a relationship named Alternate to a second table named Alternates. Table Alternates has three columns, table one's Part Number (relationship to table Parts), a Supplier Part, and State. Any one row in table Parts can have many rows in table Alternates.

In a screen view, when I click on a row in the Parts table, I would like the Alternates table to show the related rows.

How can I do this? I want this to be read only data that can be copied by the user or exported. I do not want it editable in this screen so no forms.

[ConorWebb96]

Hey @pmankow,

This can definitely be done, however will change slightly depending on the data source type you are using. For the demo I'll be going through I will be using the inbuilt internal Budibase data source. Furthermore, I will also be using the sample data provided within Budibase.

1. Setup 2 different data providers (rename them to prevent confusion e.g. parts provider, parts number provider)
2. Nest 2 different tables in each data provider
3. For your parts table click the on row click button.

4. Add a `fetch row` action, configure this so the table its using is the relationship table. Pass in the relationship id which should be stored in your relationship field within your parts table. `{{ Clicked row.Jobs.0._id }}` you will need to change jobs to part number or whatever the relationship name is.

5. Add a update state action, name it however you like, then click on the lighting bolt and assign a binding using the fetch row action setup previously. {{ Action 1.Fetched row._id }}

7. Go to your second data provider for part number. 8. Click define filters then set this up using the state created previously. Image below;

End Result

That should be everything setup properly I hope this helps/points you in the right direction.

[pmankow]

It seems to be a long loading delay that was causing issues.

However, I cannot get multiple rows to show in the second table if I select an row such as Suzy in your first table. It should show rows for both Senoir and Manager in the second table.

[ConorWebb96]

Hey @pmankow,

I'm sorry to hear this isn't working for you.

Here is the fetch row screenshot;

Can you trying changing the limit on the second data provider to only 1?

Can you also possibly create a paragraph component and output the state you have created to it, just to verify the id.

Just a note, in your example, I would want the data from the EMPLOYEE LEVEL column to show in the second table when a row is clicked. I don't know if this distinction matters ultimately.

Related to what you said on the above, that is quite a big difference, as the Employee level field isn't a relationship field. It is an options picker.

Just to clarify, all you want is just for that specific field within the same table to be visible below? You likely wouldn't be able to use a table for this as, its a column within the same table. Instead you could output it with a different component e.g. paragraph etc.

If the above is true, you wouldn't need to fetch a row from a different table and instead save the options column and output it elsewhere.

[pmankow]

@ConorWebb96
Sorry for the confusion. Here is my data:
-Part Number data/table:

-AML data/table:

From the above data being utilized in a setup like we have been working with above (two tables on a screen), to click a Part Number row and get the corresponding rows from the AML table. For instance, if they clicked the 0060-1003 Part Number row, the second table would display rows 1 & 2 from the AML data/table. That is what I meant in my original question, "In a screen view, when I click on a row in the Parts table, I would like the Alternates table to show the related rows."

Thanks.

[pmankow]

@ConorWebb96 I have figured this out.

1. I created two data providers with tables. Both data provider's data is Part data.

2. In the table under the first data provider (Data Provider 1); actions:
   a. Fetch Row; Table: Part Data 1, Row ID: {{ Clicked row._id }}
   b. Update State; Value: {{ State.Part_id }}

3. In the second data provider I filtered the Part data to equal {{ State.Part_id }}.

4. Under the second data provider (Data Provider 2) I then added a repeater with the conditions:
   a. Hide Component if {{ State.Part_id }} is empty. This prevents the screen from becoming a mess of empty tables.

5. Under the repeater I then added a third data provider: AML data.
   a. This data provider's data is New Repeater.Parts.AML

6. After the third data provider (AML data) I added a table. Here is the result:
   

[ConorWebb96]

@pmankow happy you got it sorted!

Thank you for the write up, I hope this helps someone else doing similar things if they stumble across this discussion! 🤝