html table format columns as rows

[RRMX1]

Hi!

I've definitely seen the answer to this on another thread before but can't find it now!

Can anyone tell me how I can flip my html table so that the column headers go down instead of across?

Thanks!

[Anonymous]

Hi @RRMX1 ,

Would that be the thread that you stumbled upon?

https://powerusers.microsoft.com/t5/Power-Automate-Ideas/A-possibility-to-transpose-rotate-quot-crea...

[Paulie78]

I'd like to have a go at creating a solution for this. Seems like a good challenge. Do you have a sample array that you would like to transpose?

[RRMX1]

Thanks!

This is the flow I have (starts When an Item is Created);

 In the compose box I have this (taken from another flow so doesn't really matter what is looks like):

<style>
table {
border: 2.5px solid #aaaaaa;
background-color: #e6e6e6;
width: 120%;
text-align: centre;
border-collapse: collapse;
}
table td, table th {
border: 2.5px solid #AAAAAA;
padding: 6px 6px;
}
table tbody td {
font-size: 15px;
}
table thead {
background: #78787b;
border-bottom: 2.5px solid #aaaaaa;
}
table thead th {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
border-left: 2.5px solid #aaaaaa;
}
table thead th:first-child {
border-left: none;
}
</style>

I just want the list to look similar to this (there will only ever be one line under each header) as I think it will be easier to read on an email:

[Paulie78 · Accepted solution]

It's pretty easy to do with another selection action and then a compose to build the HTML table manually. Check this flow:

The first select is just to represent your array. The second selection builds the HTML rows with the following expression:

concat
(
'<tr><td>PIR Reference</td><td>',item()['PIR Reference'],'</td></tr>',
'<tr><td>Date</td><td>',item()['Date'],'</td></tr>',
'<tr><td>Raised By</td><td>',item()['Raised By'],'</td></tr>',
)

The final compose just manually builds the HTML Table and then puts the contents of the array generated by the second select action. Using the expression:

join(body('Select_2'),decodeUriComponent('%0A'))

So if there was more than one element to the array, then there would be a line break between each batch. This produces a table that looks like this:

And the HTML looks like this:

<table>
<tbody>
<tr><td>PIR Reference</td><td>PIR-2021-001</td></tr><tr><td>Date</td><td>14/04/2021</td></tr><tr><td>Raised By</td><td>Joe Bloggs</td></tr>
</tbody>
</table>

Make sense?

[RRMX1]

Thanks! Makes sense except for Select 2 - it keeps saying invalid expression.  

[Paulie78]

Paste the expression you have built and I will check it for you.

[RRMX1]

Worked it out, it didn't like the last comma at the end - all working perfectly now thank you!

[Jamesbb93]

Hi,

I'm trying to achieve something similar to this and could do with some help!

I'm taking my data from an SP list. For each row, there is 3 columns of information:

• Assessment Criteria - Hardcoded Text
• Score - SP Number column
• Narrative - SP Text column

I've given a sample of the data below. Is what I'm looking to achieve possible? 

Thanks in advance!

[hli_mig]

@Paulie78 you seem to really know your way around this topic. I also want to format my HTML table into rows instead of columns but I do not have the option for inputs in the select field. I included a snip below. Would you be able to help me format my HTML table? Thanks in advance!!

[dperez13]

same. i have one massive select statement. would creating an html table and then replacing the  <th>text</th>

with <tr> do the trick or something?

i have an html that looks like this

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

and i want it like

xxxxxx

xxxxxx

xxxxxx

xxxxxx

[Sohan014]

Hi,

<style>table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    display: flex;
    align-items: left;
    justify-content: left;
}

tbody {
    display: flex;
    flex-direction: row;
}

tr {
    display: flex;
    flex-direction: column;
  
    height: auto;
}

table td,
table th {
    border: 2.5px solid #AAAAAA;
    padding: 6px 6px;
    height: auto;
}

table tbody td {
    font-size: 12px;
}

table thead {
    background: #78787b;
    width: 25%;
    height: auto;
}

table thead th {
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    border-left: 2.5px solid #aaaaaa;

}

table thead th:first-child {
    border-left: none;
}

</style>

I hope this helps! Let me know if you have any further questions. If this solves your question, please accept it as a solution & give it a thumbs up to help other community members find it more.

Thanks!

[AmberInk]

I am having trouble achieving this from a form submission that i want to convert to a pdf. Can you help?