How to Set Alternate Row Color in Power Apps Data Table?

When working with the Power Apps Data table, you may need to design the table as per the requirement. Unfortunately, the data table has no property to change the alternative row color.

In this case, instead of using a Data table, you can use a Blank vertical gallery control where you can insert some labels inside the gallery to look like a data table.

This article will show you how to set an alternative row color in the Power Apps data table with simple examples.

Alternate Row Color in Power Apps Data Table

Let’s take a simple scenario.

I have a SharePoint Online list [Vacation Budget], and inside this list, I have added some records based on the different columns.

Input:

Alternate Row Color in Power Apps Data Table

Now, I would like to add these records to the Power Apps data table and set the alternative row color using with TemplateFill property. Have a look at the below screenshot for the output.

Output:

Set Alternate Row Color in Power Apps Data Table

To achieve it, follow the below-mentioned steps. Such as:

1. Open your Power Apps app -> On the Power Apps Screen -> Insert a Blank vertical gallery control and set its Items as:

Items = 'Vacation Budget'

Where,

  • ‘Vacation Budget’ = SharePoint Online List
Set Alternate Row Color in the Power Apps Data Table

2. Next, select the Edit icon inside the gallery, insert respective Text labels, and set their Text properties as shown below.

Text = ThisItem.Title

Text = ThisItem.'Expense Name'

Text = ThisItem.Category.Value

Text = ThisItem.'Estimated Cost'

Text = ThisItem.'Number Of People'
Set Alternate Row Color in a Power Apps Data Table

3. Now, select the gallery control and set its TemplateFill property to the code below.

TemplateFill = If(
    Mod(ThisItem.ID,2) = 0,
    Color.LightBlue,
    Color.Pink
)

Where,

  • If() = This Power Apps If() function is used to find a set of records that match one or more criteria
  • Mod() = The Mod function returns the remainder after a number is divided by a divisor
  • ThisItem.ID = SharePoint list ID column
Power Apps Data Table Alternative Row Color
Note: While using the SharePoint list ID column for setting a Power Apps data table alternative row, sometimes it might be give wrong results, i.e., [If the SharePoint list items are removed or added, the data table will mismatch the row colors].

Refer to the below image:

Set the Alternate Row Color in Power Apps Data Table

To overcome this issue, there is another way, unlike using the ID column, to set the alternative row color in the Power Apps data table. To do so, follow the below steps.

See also  How to Create Power Apps App From Excel?

4. Select the Gallery control and change the Items property with the following code.

Items = With(
    {Records: 'Vacation Budget'},
    ForAll(
        Sequence(CountRows(Records)),
        Patch(
            Last(
                FirstN(
                    Records,
                    Value
                )
            ),
            {rowIndex: Value}
        )
    )
)

Where,

  • rowIndex = Provide a name to create a sequential row number for the data source
How to Set Alternate Row Color in Power Apps Data Table

5. Next, set the gallery’s TemplateFill property using with below code.

TemplateFill = If(
    Mod(ThisItem.rowIndex,2) = 0,
    Color.LightBlue,
    Color.Pink
)
How to Set a Alternate Row Color in Power Apps Data Table

6. Once your app is ready, Save, Publish, and Preview the app. The Power Apps data table displays all the rows with alternative colors like the one below.

Set a Alternate Row Color in Power Apps Data Table

I hope you find this Power Apps tutorial helpful. Here, we learned how to set the Power Apps data table alternative row color with a simple scenario.

Also, you may like some more Power Apps articles:

>