# Need help displaying pair of players

**URL:** <https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912>\
**Category:** Ask for Help\
**Created:** [April 28, 2024, 9:16am UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912 "2024-04-28T09:16:30Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 28, 2024, 9:16am UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/1 "2024-04-28T09:16:30Z")

</div>

My table has the structure

Player1, array of possible opponents P2,P4

Player2, array of possible opponents P1,P3

etc

The goal is to display list of all possible pairs with player names and photos in another form

I am struggling to find component that would display two images (each for single opponent from the pair) in a card.

The solution to came on my mind is to have a custom collection with two title components or to use cloudinary to merge images into a single image.

Really stuck currently. Not even sure how to connect relations

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [April 28, 2024, 2:29pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/2 "2024-04-28T14:29:52Z")

</div>

Whenever I need something a little more custom, I create a template column with HTML. Usually that HTML includes an HTML table to lay everything out the way I want. Then I only need a Rich Text component in the custom collection to display that template column.

This is an example in my app. This is a custom collection with only a rich text component. I dynamically build the html in the table for each row. Glide doesn’t have a collection layout that I was satisfied with, so I created my own. Nothing extravagant, but you get the idea. Have all of the player images and details in each row, and then you can piece it together with some html to get the look you want.

 ![Screenshot_20240428-091745](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/f/2feb15e45db102e0e8981b8975cabfa9e85c7a26.jpeg)

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 28, 2024, 3:54pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/3 "2024-04-28T15:54:17Z")

</div>

Thanks Jeff, great out of the box solution.

There is an even tougher problem to solve before that. I’ve scratching my head for hours and can’t find a solution:

The opponents data are currently in a table with two columns:

Player 1 ID, arrayPotentialOpponents (P2,P4,P5)  
Player 2 ID, arrayPotentialOpponents (P1,P3)

My goal is to display all potential pairs in a new collection so it looks like:

P1 - P2 (with player names and images)  
P1 - P4  
P1 - P5  
P2 - P1 (ok, this is redundant, will eliminate redudant pairs at the end)  
P2 - P3

I don’t know how to transform my data structure from initial table into a new structure that contains pairs.

Is it possible to create a new column containing arrays of pair opponent IDs? This should be arrays of arrays column in Glide, if this is supported.  
Even than, I need to create relation to main Players table to obtain player Name, photo etc which I don’t know it is possible from array or arrays column

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [April 28, 2024, 3:58pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/4 "2024-04-28T15:58:52Z")

</div>

Could we see a screenshot of the data? I have a pretty good idea how I would do it

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 28, 2024, 4:12pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/5 "2024-04-28T16:12:07Z")

</div>

sure, here is the playerID column screen shot containing playerIDs

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/5545c9361ebcdda53a98f63cd4a47d6d23169f11.png)

and here is screen shot of the column that represents possible opponents list (array of other playerIDs)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/6336656bc9517ff644fbd5bea8ca4deddd82b64a.png)

These all RowIDs of players from Players table.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [April 28, 2024, 4:15pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/6 "2024-04-28T16:15:52Z")

</div>

What’s the reason behind the repeating player Id’s in the Player ID column? Normally I’d expect to see a unique list of player ID’s

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 28, 2024, 4:44pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/7 "2024-04-28T16:44:40Z")

</div>

Player can play at different time slots  
E.g Monday 7, Tuesday 9 etc

Therefore repetition

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 28, 2024, 4:45pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/8 "2024-04-28T16:45:18Z")

</div>

At each specific time slot, each player has a list of unique opponents

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [April 28, 2024, 4:55pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/9 "2024-04-28T16:55:38Z")

</div>

Ok and for the list you want to see every permutation with all players… or … you want to click on a player and on that players screen you see a list of all his matches

Because the ladder is the one I’m thinking of

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 28, 2024, 5:11pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/10 "2024-04-28T17:11:39Z")

</div>

Well there are different options:

1. I want to display all possible pairs for a time slot listing time slots in a collection. Under each time slot in the collection, I want to display possible pairs (without redundant pairs)

2. The second view is again pairs, but this time by players view. I want a list of all possible pairs regardless of time slot. Some pairs can play on different time slots. Also not redundant

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 28, 2024, 5:22pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/11 "2024-04-28T17:22:18Z")

</div>

Already have a click view.

When I click on player i see a list of his possible opponents but not in the pair view but inline list.

What i want is display a pair of players with their names and images as an item in collection

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 5, 2024, 6:58pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/12 "2024-05-05T18:58:42Z")

</div>

> [@Jeff\_Hager](#):
>
> HTML tabl

I tried this (very early draft), created just rich text component as a single component within custom collection. But the html look is not what I wanted (it breaks into 2nd column etc). I am aware I need to play more with CSS to achieve the desired look.

Just before I continue investing effort into CSS/html fine tunning - wanted to check if rich text component does not impose any limitations in terms of displaying html. You mentioned you used HTML table to keep the look under control.

Thanks for advice.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 6, 2024, 12:15am UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/13 "2024-05-06T00:15:05Z")

</div>

I don’t have an exhausted list of what the rich text component can not support, but Jeff and Darren have very good examples of what it can achieve in terms of table. Please beware that you should use inline CSS.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 6, 2024, 2:12pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/14 "2024-05-06T14:12:22Z")

</div>

If you share your HTML, some screenshots and explain what you want it to look like, then maybe we can see what needs to be adjusted.

The main things you can’t use in a rich text component are any form of javascript or header based CSS. As @ThinhDinh mentioned, inline CSS is possible though, so generally I don’t need to resort to using Glide’s implementation of CSS through the builder. I just build any CSS into the template column that builds the table.

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 6, 2024, 4:30pm UTC](https://community.glideapps.com/t/need-help-displaying-pair-of-players/72912/15 "2024-05-06T16:30:07Z")

</div>

I achieved what I wanted with inline CSS and divs. Many thanks!
