Introduction

Hello, PowerApps enthusiasts!

In this article, I'll be sharing how you can create a dynamic HTML table using collection data.

Let us explore how to create such a table

Implementation Steps

Step 1: Since I'll be showing you creating a table with collections, our first step is to create a collection.

(Note: You can use your data source instead of collection)

ClearCollect(
        colMultiLevel,
        {
            FirstName: "Jill",
            LastName: "Smith",
            Age: 50
        },
        {
            FirstName: "Eve",
            LastName: "Jackson",
            Age: 94
        },
        {
            FirstName: "John",
            LastName: "Doe",
            Age: 50
        }
    )

Step 2: Let's add an HTML control on the screen.

Insert the following code:

1. Property "Items"

With(
    {
        BGColor: "#2196F3",
        TextColor: "white"
    },
    "<table style='border-collapse: collapse; width: 100%;'>" &
"<thead style='border-bottom: 1px solid black;'>" &
"<tr><th style='border: 1px solid black; padding: 5px; text-align: left; background-color: "&BGColor&"; color: "&TextColor&";'>First Name</th>" &
"<th style='border: 1px solid black; padding: 5px; text-align: left; background-color: "&BGColor&"; color: "&TextColor&";'>Last Name</th>" &
"<th style='border: 1px solid black; padding: 5px; text-align: left; background-color: "&BGColor&"; color: "&TextColor&";'>Age</th></tr></thead>" &
"<tbody>" &
Concat(colMultiLevel, "<tr><td style='border: 1px solid black; padding: 5px;'>" & FirstName & "</td>" &
"<td style='border: 1px solid black; padding: 5px;'>" & LastName & "</td>" &
"<td style='border: 1px solid black; padding: 5px;'>" & Age & "</td></tr>") &
"</tbody></table>"
)

1. Property "AutoHeight" - True

I have inserted a Container with Shadow to give a better visual experience

1. When data is not inserted in the collection

1. When data is inserted into the collection

Summary

That's it! I hope you found this article simple and useful to leverage HTML Table using Collections.

Reference Materials

1. About Collection - Microsoft Documentation

2. About HTML Control - Microsoft Documentation

3. Containers - Microsoft Documentation

4. PowerApps Community