How to Use the Data Table Control in Power Apps

An operations manager I worked with wanted a screen that looked like a spreadsheet: every product in a SharePoint list, one row each, with columns for name, category, price and release date. A gallery can do it, but it takes a lot of layout work. The Data table control gives you headers, columns and scrolling out of the box, and it took about ten minutes.

In this tutorial, I’ll show you how to use the Data table control with your own data and with a SharePoint list, how to show the selected row in a form, how to refresh it, and where its limits are, so you know when a gallery is the better choice.

Quick answer: Insert a Data table (under Classic in the Insert pane), set its Items to a data source such as 'Product Details', and choose the columns with Edit fields. To show the selected row in a form, set the form’s Item to DataTable1.Selected. The Data table is read-only: to edit, use a form next to it, or a gallery.

What the Data table control does

A Data table shows records in rows and columns with headers. One row is always selected, and you can show, hide, reorder and resize columns. It’s read-only, so it’s best for browsing and picking a record.

PropertyWhat it does
ItemsThe data to show: a list, a table or a collection
SelectedThe selected row, as a record
NoDataTextThe message shown when there are no rows (also read by screen readers)
HeadingFill, HeadingColor, HeadingSizeHeader background, text color and size
SelectedFill, SelectedColorBackground and text color of the selected row
Header text (FieldDisplayName)The heading of a column
IsHyperlinkShows a column’s values as links
AutoWidthSizes a column to fit its contents

With modern controls turned on, you’ll find it under Classic in the Insert pane:

Insert pane search for data table with the classic Data table control

Show your own data with Table()

You don’t need a data source to try the control. Set Items to a table you type in:

Table(
    {Item: "Violin", Location: "Boston", Owner: "Megan Bowen", ItemAvailable: 4},
    {Item: "Flute", Location: "Chicago", Owner: "Alex Wilber", ItemAvailable: 3},
    {Item: "Saxophone", Location: "New Orleans", Owner: "Lynne Robbins", ItemAvailable: 2},
    {Item: "Trumpet", Location: "Nashville", Owner: "Diego Siciliani", ItemAvailable: 9},
    {Item: "Guitar", Location: "Austin", Owner: "Johanna Lorenz", ItemAvailable: 10}
)

Each {...} is a row; the names before the colons become columns. Then, in the properties pane, select Edit fields > Add field, choose the columns and select Add:

Data table Edit fields pane with columns selected to add

Style the table from the properties pane: font, size, colors, borders, hover and selected colors:

Data table properties pane with color, font, border, hover color and selected fill

In preview, you can drag column edges to resize them. Those changes aren’t saved, so set the widths in Studio.

Show a SharePoint list

Add the list with Data > Add data, then set the Data table’s Items to it:

'Product Details'

If the list has attachments, remove the Attachments field; the table can’t show it and displays an error icon. To rename a column, select it and change Header text. Choose which columns appear in Edit fields.

Each column also has a Text property that takes a formula, so you can format values, for example Text(ThisItem.Price, "$#,##0.00") for prices or Text(ThisItem.'Release Date', "mm/dd/yyyy") for dates. To add calculated columns, shape the Items with AddColumns, such as AddColumns('Product Details', Total, Price * Quantity).

How many rows it shows

The Data table itself doesn’t cap rows. If Items is delegable, such as the list itself or a Filter with =, it loads more as you scroll. If it isn’t, Power Apps only works with the first 500 rows (up to 2,000). See how to fix delegation warnings.

Show the selected row in a form

The Data table can’t edit data, but a form next to it can. Insert an Edit form:

Insert pane with the Edit form control

Set its DataSource to the same list:

Edit form DataSource property set to the Product Details list

and its Item to the table’s selected row:

tbl_product_details.Selected
Edit form Item property set to the data table's selected row

Add an Add icon for new records, with NewForm(frm_ProductTable) in its OnSelect:

Insert pane with the Add icon
Add icon OnSelect property with NewForm

and a Save icon with SubmitForm(frm_ProductTable):

Insert pane with the Save icon
Save icon OnSelect property with SubmitForm

Select a row, and the form shows it; edit and save, and the table updates. After a successful save, a new form switches to Edit mode, so add NewForm(frm_ProductTable) to the form’s OnSuccess if people add several records in a row.

Refresh the data table

After SubmitForm, the list refreshes automatically. To see changes other people made, use Refresh():

  • In Studio: in the Data pane, select the … next to the list and choose Refresh. This only affects your editing session.
  • With a button: set OnSelect to Refresh('Product Details').
  • On a timer: add a Timer control, set Repeat and Auto start to On, and put Refresh('Product Details') in OnTimerEnd.
Insert pane with the Timer control
Timer properties with Duration, Repeat, Auto start and Auto pause
Timer OnTimerEnd property with Refresh of the Product Details list

Use a Duration of at least 60000 (one minute) rather than the 3000 in this screenshot. Refreshing every three seconds sends about 1,200 requests an hour for every person using the app. Turn Auto pause on so it stops when people leave the screen, and set the timer’s Visible to false.

Formatting options

Formatting is limited: you can style the headers, the selected row and the hovered row, but not individual columns or rows based on their values. For example, this SelectedColor formula turns the selected row’s text red when its release date is within a week:

With(
    {d: DateDiff(Today(), tbl_productDetails.Selected.'Release Date')},
    If(!IsBlank(tbl_productDetails.Selected.'Release Date') && d >= 0 && d <= 7, Color.Red, Color.Black)
)
Data table SelectedColor property with a DateDiff formula

The simpler version in the screenshot also turns past and blank dates red, because DateDiff returns a negative number or zero for them. To color every row by its status, use a gallery instead.

Data table or gallery?

Data tableGallery
SetupHeaders and columns automaticallyYou design each row
EditingRead-onlyCan contain inputs and buttons
Row colors by valueNoYes
Images and buttons in rowsNoYes
Default selected rowNo Default property; the first row is selectedDefault property
Horizontal scrolling for many columnsYesNeeds extra layout

For a quick, spreadsheet-like view, the Data table is faster. For anything interactive, use a gallery; see the Power Apps gallery control and gallery conditional formatting examples.

Limits and known issues

  • Read-only, one row selected at a time, fixed row height.
  • No images, per-column styling, or fields from related tables.
  • Can’t be placed inside a form or a gallery.
  • FirstN in Items shows no data. That’s a documented issue; filter or sort instead.
  • A copied Data table shows no data. If Items uses Filter, the copy’s field names get a _1 suffix. Rename the fields.
  • The modern Table control is still in preview, and Microsoft now points to the Data grid control, which supports sorting, searching and multi-select but is documented for Dataverse tables and collections. For a SharePoint list, the classic Data table or a gallery is still the way to go.

These Power Apps tutorials go well with the Data table:

Frequently Asked Questions

How do I show a SharePoint list in a Power Apps data table?

Add the list as a data source, set the Data table’s Items to the list, and pick columns with Edit fields. Microsoft documents the control in its Data table control reference.

Can you edit data in a Power Apps data table?

No. The Data table is read-only. Put an edit form next to it with Item set to DataTable1.Selected.

How do I refresh a data table in Power Apps?

Use Refresh(‘List Name’) in a button, or in a Timer’s OnTimerEnd set to repeat every minute or more.

Can I color rows in a Power Apps data table?

Only the selected and hovered rows. For row colors based on values, use a gallery.

Why does my data table show no data?

Check for FirstN in Items, which is a known issue, or field names with a _1 suffix after copying the control.

2 thoughts on “How to Use the Data Table Control in Power Apps”

Comments are closed.