Shows a set of data in a tabular format.

Description

The Data table control shows data in a format that includes column headers for each field that the control shows. You can specify which fields to show and in which order. This control maintains a Selected property that, like the Gallery control, points to the single row that the user selected. Therefore, you can link the Data table control to other controls.

Capabilities

The Data table control is a relatively recent addition to PowerApps. This control already supports some capabilities, while others are planned for later releases.

Now available

  • Read-only data
  • Single-row selection
  • Connected data sources (excluding the Microsoft Excel connector)

Not yet available

  • Show data in local data sources (collections)
  • Customize a column, including width, text, and styling
  • Show images, and add hyperlinks
  • Change column widths while running the app
  • Add a Data table control inside a form or a Gallery control
  • Change the height of all rows
  • Copy and paste a Data table control
  • Edit data, and select multiple rows
  • Show fields from related entities
  • Easily filter or sort data based on column headings

Known issues

  • No data appears if you set the value of the Items property to a formula that uses the FirstN function.
  • If you modify the value of the Items property, your field list is reset, all columns are lost, and you'll lose your data-source connection for some connectors.

Key properties

  • Items – The source of data that the control shows.

  • Selected – The selected row.

Other properties

  • BorderColor – The color of the control’s border.

  • BorderStyle – The style of the control's border. The options are Solid, Dashed, Dotted, and None.

  • BorderThickness – The thickness of the control's border.

  • Color – The default text color for all data rows.

  • Fill – The default background color for all data rows.

  • Font – The default font for all data rows.

  • FontWeight – The default font weight for all data rows.

  • HeadingColor – The text color of the column headings.

  • HeadingFill – The background color of the column headings.

  • HeadingFont – The font of the column headings.

  • HeadingFontWeight – The font weight of the column headings.

  • HeadingSize – The font size of the column headings.

  • Height – The distance between the control’s top and bottom edges.

  • HoverColor – The text color of the row on which the user keeps the mouse pointer.

  • HoverFill – The background color of the row on which the user keeps the mouse pointer.

  • NoDataText – The message that appears if the control can show no records.

  • SelectedColor – The color of the text in the selected row.

  • SelectedFill – The background color of the selected row.

  • Size – The default font size for all data rows.

  • Visible – A value that determines whether the control appears or is hidden.

  • Width – The distance between the control’s left and right edges.

  • X – The distance between the left edge of the control and the left edge of its parent container (or the left edge of the screen if there is no parent container).

  • Y – The distance between the top edge of the control and the top edge of its parent container (or the top edge of the screen if there is no parent container).

Related functions

  • Filter(DataSource, Formula)

  • Search(DataSource, SearchString, Column)

  • Lookup(DataSource, Formula)

Examples

Basic usage

  1. Create a blank app for a tablet.

  2. On the Insert tab, click or tap Data table.

Add a Data table control to a screen

A Data table control is added to the screen.

  1. Rename the new control SalesOrderTable, and resize it to cover the whole screen.

  2. In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Add a data source.

Add a data source

  1. In the list of connections, click or tap the connection for your Common Data Service database.

Select the connection for your data source

  1. In the list of entities, click or tap Sales order, and then click or tap Connect.

Select the **Sales order** entity

SalesOrderTable is now attached to the Sales order data source. However, no data will appear until you select fields.

  1. In the right-hand pane, click or tap the eye icon for each field that you want to show.

    For this example, show SalesOrderId, Account, OrderDate, and Status.

SalesOrderTable shows data from the fields that you specified. Data table

  1. Reorder the fields by dragging them up or down in the right-hand pane.

Reorder the fields as desired

SalesOrderTable shows the fields in the order that you specified.

Updated Data table

Restyle the header

  1. With the Data table control selected, click or tap the Advanced tab in the right-hand pane.

  2. Click or tap the field for the HeadingFill property, and then change the value to RGBA(62,96,170,1).

  3. Click or tap the field for the HeadingColor property, and change the value to White.

  4. Click or tap the field for the HeadingSize property, and then change the value to 14. Data table

Connect a Data table control to another control

  1. Add an Edit form control to the screen.

  2. Resize the Data table and the Edit form controls so that the Data table control appears in the left part of the screen and the Edit form control appears in the right part of the screen.

Data table and **Edit** form on the same screen

  1. Connect the Edit form control to the Sales order data source.

  2. In the right-hand pane, show the SalesOrderId, Status, Name, Description, and Total amount in the Edit form control.

**Edit** form shows five fields

  1. In the right-hand pane, click or tap the Advanced tab.

  2. Set the Item property for the Edit form control to SalesOrderTable.Selected.

    The Edit form control shows information from the row that's selected in the Data table control.

**Edit** form connected to the Data table