Power Apps Table Control Tutorial: From Beginner to Intermediate

hello everyone Resa here in this video we will take a first look at the new modern table control in power apps the table control allows us to connect to any data source of our choice pick the columns that we would like to show in the table SL grid control reorder columns the control is fully responsive by Design we can connect this control to a for control I will show how we can filter and sort data in this control as well and a lot more so let's check it out in this [Music] video the modern table control in power apps is a responsive control that shows a set of data in a tabular Or List format the table control here is connected to a data set and I have selected The Columns from that data set that I would like to represent now as an app maker I have full control over what fields or columns I would like to add to the control including the order currently I'm viewing this on a desktop experience if I view this on a tablet experience you can see how it's responsive by Design also if I was to increase the width some of these columns you can see how I get both a horizontal scroll experience and a vertical scroll experience and if I view this on a mobile experience you can see how the table control completely transforms into a list format experience where it displays only the initial three field values to get the modern control currently you need to ensure that you have the modern feature turned on so under insert we have the new modern table control the table control now supports more connectors including Excel SQL and SharePoint connectors so let's go ahead and build a modern screen experience from scratch and leverage the table control to explore its properties the data set that I'm leveraging is a table in data was called employe record that has Columns of various types texts Choice columns and More in my power app I will add the responsive screen layout header and footer in the header container I can click insert and add controls we have a nice header modern control so I'll simply leverage that in the main container I will go and insert the modern table control this control I will connect it to my employee record data ver table that's connected in my power app this control I will set its alignment and container to stretch and flexible height to on now let's explore the properties of the table control first is items this is the source of data for the items that appear in the table which in my case is my data verse table because I'm connected to data verse I get an additional benefit wherein I can can leverage data verse views as well Fields if I go to edit this will list out the columns that are being represented currently on the table I can go ahead and remove the columns that I do not want to show on the table I've gone ahead and removed them I can also reorder columns by simply drag and drop you can see as I do that it will start repositioning The Columns I have different types of columns here that are coming in from data verse and the table control now supports the data ver Choice columns allow range selection Now by default this is yes meaning the user who is running the app has the ability to select data from cells in this table control and copy it as an example if I start selecting this contrl C and let's say I open an Excel file control V all that data from my table control I've literally copied and pasted it right here in Excel then we have Reflow Behavior now this control is a responsive control Reflow Behavior Reflow means if there is not enough real estate to fit the tabular data it will change its Behavior to a list only experience to show the data so here on a wi screen experience it's in a grid format but if I go to a mobile device you can see how it reflows to the list format you can decide if you do not want that be Behavior to take place meaning I wanted to always show the list only format now you can see how it only shows it in that specific format or I can Target the grid only format no data text if there is no data available to render in this table control in that scenario you can Define the no data text that would display base pallet color table is a modern control modern controls support modern themes by Design we also have custom themes coming now in a table control I can select a specific row so notice the selected row here is highlighted with the theme color and as I change the theme for my power app the table control experience also changes that specific color with base palette color you can pick any color of your choice irrespective of the theme for example if I want to show this blue you can see it's showing blue even though my theme is red and if you want the table control to respect the theme color then simply leave the base palette color as empty and then it will go back to respect it the color of the theme font size you can Define the size of the font that's the font size for the data header font size allows me to define the size for the header experience of this table control if I head over to Advanced we have some additional properties here show column headers by default it is yes if I change this to no the headers will not be displayed same goes for fooo if I change to no it will not display the fooo so Avatar if I turn this to no and if I was to look at this in a list like experience that small Avatar image that shows up that is hidden now I can select a row in the table and you can see that the footer mentions that I have a row selected it also gives me the total number of rows which says thousand and as I start scrolling it will load more and more data so this completely supports the concept of Delegation which is handling large data as long as the query that's being performed for the items property of the table control is delegable in this case the items property is simply my data verse table which is fully delegable and if I was to view this in a list format experience here it shows data in batches of 25 and I have pagination which allows me to move from one page to the other I want to give the user the ability to select a row and make changes if desired I select this specific row you can see when this row got selected a separate container has been made visible that container is leveraging the form control to show the data for the selected Row in my table control if I pick Elena you can see how the form displays the information for that selected user let's change the job title here to senior analyst I'll click save once it's saved you can see how the data changes in the table control and the way this was done I have my table control right next to it I have another container the visibility of this container depends upon whether the user has selected a row in the table control my table control is called power apps 1 Grid 2 so here I check to see if that control do selected is that not equal to blank in this container I have the modern form control the data source is my data ver table which is the same data source as the table control and the item property for the form control is my table control do selected and here I have a save button on select of this I simply go ahead and submit the data in the form control by calling the submit form function so table control. selected will give you the information of the selected record let's say I would like to print the full name of the selected user in the header control so for the title property of the header control I can simply append my table control do selected Dot and intelligence will list out all the columns from my table I would like to show the full name so you can see how as I select a row in the table that selected Records full name will be displayed we can also provide filtering and sorting capabilities to our table for example here I have a modern combo box control that is listing out all the Departments from my department Choice column as I start selecting the Departments you can see how the table is filtering based on that selected Department this is a multi select combo box control so show me all the employ employe details for Department finance and it or let's just go ahead and reset and the way I did this is for the table controls items property go and filter my table it's a combo box control so I make a couple of checks up front it's the selected items of the combo box control blank or the number of rows that are selected is that equal to zero any of these are true the entire filter condition becomes true so it will showcase all the rows however when I make a selection on the combo box both of these become false the final filter function then comes into effect which is check to see if the department value is in the selected items of the combo box it's a fully delegable query because in is a delegable function with respect to data verse as a data source and then I have this icon control to reset the combo box control we can also add sorting capabilities here I have a table that is connected to a SharePoint list I am sorting based on the ID column in ascending order if I select this it will change the sort direction to descending for ID I can even decide which columns I would like to sort on I can also filter my column data show me all the items that are blocked you can see I only have 10 rows that are in blocked status and this is a large SharePoint list as large as 10,000 plus rows and the reason why the table control is able to handle it is because I am respecting delegation my query that I'm performing is fully delegable show me all the items that are in progress you can see it says 500 plus and as I start scrolling through all the records once I reach 500 it will start loading the next 500 records and so and so forth so in this scenario here my connected data source as a SharePoint list my table controls items property is as follows I check to see if the column that I'm sorting on if it is ID then I sort this based on the ID column else I sort it based on the title column but the key part here is the filter action that I'm performing filter SharePoint list and my condition here is this drop down control for progress is this blank if this is blank it will return true true or any other condition is true so it will show all the data but the moment I make a selection the first condition will be false and the second condition will decide what's displayed in that table control progress is a choice column so I check to see if the choice column do value is equal to drop down do selected do value here I I'll insert a text input control we will check to see if the title column value starts with the text entered my table controls items property where I was filtering I'll add another condition starts with the title column starts with the text txt title that's my text input control. value and this I will run in an and condition with my previous filter and I will repeat the same for my bottom filter condition so now if I type the text develop it will return all the items where the title begins with that text let's say I would like to only show the items that are completed and begin with that text I do not have any these are the ones which are in progress now the reset button when this is clicked I would also like to reset my text input control so if I select this it will reset if you enjoyed this video then do like comment and subscribe to my YouTube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 49,479

Keywords: powerapps table, powerapps table gallery, power apps table control, table, modern table control, power apps modern design, power apps, powerapps, tutorial, reza dorrani, power apps beginner, learn power apps, power apps microsoft, powerapps tutorial, power apps modern ui, modern, modern controls, how to, power apps grid, powerapps tables, power apps table gallery, powerapps intermediate, table control, microsoft, learn, table reflow, grid, powerapps responive table, canvas apps

Id: I-b0_KK4ur8

Length: 17min 18sec (1038 seconds)

Published: Mon Nov 20 2023