Flutterflow Datatables | Everything You Need to Know - Build Magical Tables

what's up guys and welcome back in today's video we are going to look at data tables in FLA flow from how you can Implement sort the filter how you can Implement search pagination and tie other actions to the entries on your data table now fasten your seat belt and let's get right into it before we continue let me show you what we are going to get by the end of this video this is a little spin up from the latest floter flow update that I recently made so I'm going to link it up if you have not watched it the February update so uh let's get into it you have here now this is uh the updated data table so let's look at the the table that we have this table just shows like a list of employees as you can see here have their name position department and salary and some quick actions I can perform against a particular entry so here we can start by row per page let's view 10 and this is going to show us 10 entries we can switch to 15 or 25 sorry and yeah it shows 25 let's get back to 10 and then we can also pinate like go to the next page you see the entry continues or come back to the previous page now this is what we have here so if you click on this I icon is just going to bring up nice animation and then display the like the um employee information so somebody asked me this question the last time but I'm going to show you how to do that in this video so you can click to view this thing now now um on this pen icon if you click on this pen icon you'll be able to edit like the name and the salary that's just a simple thing I made possible to be edited but you can customize this how you want and let's say we come here and say this user 30 Eva mintiness and we want to delete this entry we can click on this delete uh button and it's going to prompt us like do we want to delete and if we confirm the delete it's going to delete and automatically refresh the table as you can see here so there's no um user with ID3 yeah let's go to uh search so for example if we come here this is the what we currently have if we type something like JN like John to search users that have the name John you're going to see all of this sorted in this way um sorry filed in this way and it's showing John do Alice Johnson all the users that have the the name John I'm going to show you how you can achieve that without having to write any custom function and we can clear the search and everything Still Remains the Same okay uh the next we want to look at is if we select um say three users or four users at random and then we click on this button down here see selected employees if you click on it it's just going to display the name of the employees that we have selected down here now flf flow has a way of doing that with custom function but I'm going to show you also how you can do it without um using a custom function too so I think that's just the basic functionality that we're going to have by the end of this video and uh if you can already please hit the Subscribe button and turn on on the notification Bell this is going to help the Channel all right so this is my flutter flow and what I have here so we going to be working hand in glose with the documentation the data table documentation so here on super base I'm using this employees table for the beginning I'm just going to like try to build like set up a whole and like a new data table from a fridge so that I can see like the basic things or the other functionalities I'll just switch to what we already have here why I explain a couple of Concepts um so that I can understand better okay so this is an empty page that we have here and inside this container we need to display our data table here and flter flow recommends that for us to have access to this data that we can play with we need to query whatsoever um thing that we querying and have it as a state variable so that we can manipulate and have that data to play with so um this is the data table which added here I need number of columns let me say five cuz I need the ID name Department and salary and also actions then come down here I'm just going to leave everything the same I'm going to change this primary header color to secondary like this just so it just shows like this okay so here I can come in and edit this this is just like the basic things I need to know about using um this particular widget so I'll edit this header to be just a hash sign then I'll do here name department and salary and for the next column one beautiful thing about like this both the header or the data table header and also the data table cell is that you can like if you see here on this widget tree you can add other widgets within it so I'm just going to wrap this text in a container right I'm going to wrap widgets in a container so it looks like that now this is just like a rough like um design I'm trying to make remember we're going to go back to what we previously have I just want to show you like everything that's available here so we have our ID name Department salary and actions we need to make our data table selectable so to do that we check this box and if you want to hide pagination you can hide to just see like how I talked about a lot of these other features um I have that video that I did that you can watch okay so now here comes uh the big guy so we need to create a page State variable that is going to hold the data that I want to display on this data table so that we can then use that page State variable like the content that it holds to do our sorting to write our sorting function and whatnot so I'm just going to come here and create a pasted variable that says um list of employees right the type is a super base rle and it's a list of employees and I'm going to confirm now on page load I want to query super base and fetch a list of employees so back out out of my page I'm going to click here and you see this open the action editor and on page load what do I want to do I want to query back end database and I'll do super base cuz that's the database I'm using query rowes and the table I want to query is employees order we order it by the ID so it's ascending the reason I'm ordering by ID is because when you edit a row with super base it automatically gets sorted like it can go below so we don't want it to be mixed like that so want to order it by ID and it should be increasing that's just how we want this data to be so this is going to be called let's say um employees like that and what do we want to do we want to assign the result of that query that we did above to our page state so we going to go to our state management sorry State Management update page State the list of employees page state that we created and what value do you want to do want to set value to be equal to the action output that we fed above employees this one so after doing that now we have that um data that we can play with and now to generate the roles for this data table you just click on the data table right then you come here to generate children what do you want to do let's say employee and we want to use our page State the list of employees confirm and we save so we have that and here what do we want to display under here under the data table cell we can just display this to be um the employee item get R Field ID and the ID the next is we want to display name here we want to display department and salary here so I'm just going to do that real quick so we have this showing like this all of the items showing and now if we test on run mode we should be able to see this display in the data as refreshed so as you can see this is it in test mode and this is the data that we are getting so we can pinate and go to the next page we can do uh our 25 display R page and whatnot so now the next thing we want to do is let me show you how we can sort based on this IG field and probably based on name the same Concepts Remains the Same but let me show you how I can we can do sorting so first off to do sorting you need to enable sorting on the table header that you want to be able to sort with so uh let's come to this first one the one that takes in the ID and let's enable like sortable here as you see on the right we enable sortable now this is going to provide this particular index to be used in our sortable data right so here on the data table itself the data table has a list of actions that you can tie action chain to so if we come here and we open it so we have on page change and on sort change so this is what is going to happen like it's going to be listening for when a sort has been changed and it's going to Broast like the index that is been sort by and whether it should sort if it's ascending or descending so it's just going to be to linger State and that is where we going to tie our um function so um the documentation says uh to do sorting we just need like a sorting function you can either follow this example this a very simple example and this function should work regardless of whatsoever data type not like regardless uh the the function structure should work regardless of whatever data type that you have but I'm just going to be creating one using the cop py so that you can see how you can generate subsequently for your own data type so uh let's get into it and I'm just going to create um a new sorting function I already have one that was using like sort employees for the other data table but let me show you how you can um do the Sorting yourself so as a documentation States when a sorting is been triggered when s is been triggered if it broadcast the sort index therefore the the column that is supposed to be sort by and the order like is it ascending or descending so I'm just going to create a new custom function and I'm going to call it new employee sting function let's just call it like that cuz I believe the name of your function is being used by co-pilot when you want to generate the code I don't know but that's just my understanding so what do we want to return first off we need like after sorting we want to return a list of super base rules right so super Bas employee Ro that's what we want to return it's a list employees now the argument I want to receive is the list of employees therefore the P State list of employees that we have like the general list of employees that we have so let's call it employees and the data type is it's a super base Ro list of employees now let's say the index the sort Index right the index in which you want to sort by so we just going to call it index that is okay an integer and the next argument I want to specify is the sort order like is it ascending or descending so let's just call it order this order is aoan so we have this that I want to use to sort our function now we can come to co-pilot and this is where the magic happens if you don't want to uh like follow what we have here or if you know how to write for certain algorithm to a certain function that's cool still but it should look like this we have bull is ascending in s column index server but Define your data type how you want to use it okay so our sting let's use a CO pilot to say let it generate a sorting function to sort a list of employees that has um say ID name Department like all those columns that we have so let's say sort list of employees based on ID name Department salary it's very important like uh the will supply this order in the function just so that we can use it like in any other uh we have position and then before Department then salary so let's do that so position remember this is uh prompting we are prompting the AI to generate the code so it's very important how you craft The Prompt so what we say is sort list of employees based on ID name position Department salary so if we generate this code let's see what it's going to give us hopefully it's going to give us something correct but yeah that is what uh I've used several times and it gives me the correct answer so we just going to wait for that to go through and Y you see the function looks correct already so we going to copy this function yes we copy into our current code and let's just go through the function so it's going to switch based on the index of course if the case is zero then employees will sort a it changes the order exactly this is what we need this is what we need and this should work very well so I'm just going to save this function and this is the function that we going to to use to do our sorting that is easy to do very very easy using the Code Pilot remember the prompt the way you prompt The Coop pilot is going to determine the way it's it gives you out that response so this right here you may want to like look at this function actually and see if it really covers all what you need but since you want to just Implement sorting based on the index I think this case is going to work perfectly well you can also do based on the name it doesn't matter yeah so I'm going to save and compile my function and this should be good to to go so back here now in our code to actually do the Sorting so that it works is on this data table what do you want to do like when it sorts open we open the action editor on sort changed when sort changes what do we want to do remember we have all the entries that are being displayed in the data table as a page State variable we have all those entry as a pate variable so to have the new sorted data display we just need to update that page State variable I hope that make sense so we come here on State Management they say update page State and what do we want to use to update it we want to update this list of employees with what value set value what value the value returned from our custom function remember our custom function returns a list of employee roles so we're going to see here um custom function is it new employees sting function this the one that I created so I'm going to click on that one the um employee the original list of employees which is our app State sorry our page State our page State list of employees we pass that in confirm the index is our data table sorting index so we click here and we say data table sort column index confirm and that has been sent and the order in which you want to set is the data table is ascending so this is just going to be toggling uh to be toggled based on the particular index that been sort and now now we can yeah we can also add currently we are sorting based on the ID now we can also do sorting based on the name and that has been done with without any uh waste of time so let's also add sorting on this name um column so sortable I'm just going to toggle that on and I think our code is still not done compiling our custom function let's do that and then we refresh our test mode okay so here is our table so let's just view 10 and if everything is working well we should be able to sort based on this index let me see click and that is we are sorting we are able to sort based on this index and we should also be able to sort based on the name Alex I don't know what page we are on but yeah that's now it's starting from William so descending order and ascending order that's a sorting we have not implemented sorting on department and whatnot so that is how you can do um sorting with on your data table now the next thing let's go to see how we can Implement search now to get the search working what we need is just like a simple search bar and an icon that does the search so above this container I'm just going to add a row then put the search bar and the button side by side so we have our input view here and we have our search um button by the side so the way um search works according to this thing uh flutter flow documentation is we need to make use of the simple search functionality right so to actually do that uh since we are using uh super base it's the the process is a little bit uh different as compared to if we're using say Firebase now Firebase we can just like if we do like a simple search take for example let's come here to the actions a simple search action simple search simple simple search and you see that the simple search is available to search on device now what do we want to search by if we had used or if we were using something like um Firebase it would be super super easy to just search like the whole collection that we are fetching like this if you come like this you can just say Fire based collection and then you select the collection that you want to search with which is very very simple but in this case since we're using super base and this should work in that case we want to search based on strings right so and what is going to happen here is we need to map like the list or want to specify that search so that search based on the employee names right so the data that I want to search on is the pasted variable that we have list of employees then we map the data mapped list of items and we use just the name so want to map and search only on the name I don't know if that makes sense what term what search term do we want to use we want to use the wiget state text field that we have here so whatsoever thing that we are typing on that field to search we are going to search based on just the name column of our super base data that we have Fed so real quick since we are mapping our search to the list of names from this our super base um data let me just show you real quick what that search data is going to hold like after searching what is going to hold so that we know how we can translate that to hold like a list of um super base records hopefully that makes sense Below in this container I'm just going to add a row and inside a row I'll just add a text so let me add a text element here and set a spacing of about 10 just so the data shows very well now what do we want to do this rule we want to generate children to be from our search query so I'm just going to say um search rest to be our search results we generate children to be our simple search results right so I'm going to click that confirm and confirm and we have to go we going to have children generated dynamically and what do I want to do I want to display those results here so that we actually see what I mean so I'll click here on this icon and then search item that's just all we need and if I run on test mode so we have this and if we scroll down currently our search result is showing empty so let me type um John up here cuz we know there's a name that start with John and we search right you're going to see these are the names that are showing John do Maya Johnson whatsoever Johnson Alice Johnson all these Johnson so these are just the names again we cannot have like uh we cannot have that data displayed here on the table because we have not updated or have it to to be presented that way currently we have our search results just matching the names of the employees hopefully that makes sense so this is the data that we need to translate in a way that it should be it should be like um super base employee role so we need to map this um name against our super based column our against our super based data so that it it shows anyways let me just show you I think I I can better explain doing it as compared to trying to find the English to uh describe what we need to do okay so what do we say are supposed to do um back here on this search after searching we don't want to just update like the previous upate that we have of list of employees we don't want to update that because it's going to override like everything that we had before it's going to override all the list of employees and maybe that's not want CU what happens now when you cancel the search what happens when you don't want to search anymore so what we're going to do here is let's just create another app state or sorry another page state to hold like search employees I think that's the only logical searched employees and this should be super base role the table name is employee and it's a list after searching what do we want to do want to update the searched employees um page state with the results from our search uh our simple search now we know for a fact that our search result returns a list of usern names or names that matches the particular user for that search query so to update our search employees page state so come here update page State what state you want to search employees this a state I want to update what you want to do want to set the value now how do we actually get that value to derive that value we need to filter from the original list of employees right so we come here and we say page State list list of employees then we filter items filter list items based on the list of items that we have in that our search um results I don't know if that makes sense so we have like say 3,000 employees there's just about let's say one person that has John do and has J Johnson or whatsoever thing and they happen to be the names returned from our search query so want to filter the list of employees just with those that matches match the name so what futter condition do we want to use we want to use um search simple search result available option is list contain item if the list contain what item the item in Index right the item in index is this index that we are filtering the list of employees item in list the super base Ro name so we are saying that if an entry in this our simple search results matches the name of this our filtered item this item that I want to filter by then that's what I want to assign to that um sech result page State I just hope that makes sense now that we have um gotten this we need a means of displaying it to on this same data table right we need a means of display to on this data table and initially the way um search before um flter Flow came out with like conditional parameter or specifying conditional parameter we had to use like the conditional visibility sorry the conditional page builder they have it stated in the documentation but now that they have this ability for us to set like conditional values we can use that to add Advantage the reason I'm saying so is for example if if we want to display like results that have been searched we need to update like a p state that says show but search result if we want to display like full result like all the list of employees then we also need to toggle that pay state but to just save us that stress what we can do is on this our data table instead of just specifying that the um generated children should be list of employees what we can do is we say if the search results actually has an item then let it show the search results otherwise let it show our list of employees hopefully that makes sense cuz when we are not searching there will be no list there will be no item return in our in our simple search so the way we are going to do that is I come here instead of this page St just displaying list of employees let me cut this so I'm just going to copy this variable and what we want to do instead is not just generate the children um directly here we want to do an if conditioner so here we going to do um this they will say conditional what is it conditional if then else so if our simple search result list of item is set and not empty therefore if there's actually an item then what do we want to display we want to instead use our simple search um our page State called search employees the one that updated after each search otherwise we just want to display a list of all employees and this right here my friends is what we need for for the searching so I'm just going to save that now this is going to break our table briefly but I really love what flut FL has done we can switch that um by specifying the return type so just specify the return type to be a super base row a list true and what table name employees so doing this just fixes that I don't know how it's going to look like for Firebase but I suppose it's the same thing but yeah this is interesting and now everything is functional if we save and we come back and refresh our um our table here we should be able to search and actually get the search display here now you can go ahead and Implement like the cancel search like to clear search functionality and whatnot and you should have everything working very well so let me refresh okay so we have here currently it's showing like all the items that we have one five of 86 so if I switch to 10 switch to 10 yeah we should still have like this is like all the items that we have cuz our search is currently empty as you can see down here there's nothing showing so if I search let me search with um John like let's search for John I don't know why cuz I know there's a lot of users with John here so I'm going to search the keyword John and you see this a data and this is the names that we have down here this is just display and this is the real data that we actually have you see the ID don't match or anything but just users that have the name with something having to do with John i' been displayed and currently it's just about about 11 of them 10 is showing and if you go to the next page we just going to see the one remaining if we do something like um uh Sarah for example s let me not add the H just in case so we have some other thing and we search we're going to see just these two and that is how we can Implement our search functionality without actually having to use any custom function as you can see it's working very well and now we've seen all of that uh the next one we want to look at is selectable R like performing an action when a particular um data table row has been selected now the way flut flow handle this is when you select a row it has but the index of the location of that particular entry so it creates a list of all those indexes or indices I think that's how they call the plural of all those indices that you can play with and the documentation currently shows how you can probably fetch those selected rows using custom code to like get the rows and then manipulate or do whatever thing they want to do yeah you can either go that route to use a custom code to do it but I'm going to show you how you can possibly do it without having to use um a custom function so this is just like it this is a custom function that does a selection so um it receives the list of the record that you are you fed earlier then a list of all the indexes or indices that are selected and you can then do all of these and then return the indices so real quick if we come below here currently we have uh we are just displaying here we are displaying the list from our search result we can also try to display the list of selected rules right now that is not available unless we have or say until we have a button to click to make it available or to make it visible well it stated in the docs to you need to trigger like call the data table selected row index to have access to the rows that have been selected so let me show you real quick how we can display first off the list of rows that are selected and how we can map the list of those selected rows to be like a list of our super base row so let's come down here I'm just going to duplicate this row and then hide the previous one or duplicate and leave it anyways the above one is the one that shows a search result and this this one below should be showing uh the list of um how do they call it it selected yeah selected rows okay now for selectable like uh rows that have been selected what I'm going to do here is we need um by default the data table has this property that shows that have like the IND indices of the rows that are been selected so to actually make that visible okay let me create this uh page St just say select selected row item selected row just like that selected row and it should be an integer cuz that's what and it's a list of integers right I'm just going to save that now I will add a button here just a simple button that what is going to do is each time we click that button it's going to just get the currently uh the current selected rows and assign it to that pasted variable something very very simple that I got so I'm just going to tie an action to this Buton here the reason why I'm doing this is is because I want to show you how the IND the index or how the selected row index are are being held by the data table um widget so I'm going to say State Management update page State what page state do I want to update I want to update the selected Row the list of integer and I want to set the value to be the data table let's go to wiget state the data table selected row as you see right then confirm close now here on this row I want to generate children so let me remove this I want to generate this children based on that pasted variable that I just created so I'm just going to say selected should get from the page State called selected row this is it with a list of integer confirm and save and it's going to generate this children and each item should be that selected row item yeah select the item confirm then I can just change the color to something else just so it's able for we are able to identify like this belongs to to that okay I think we are good to go I'm going to save and let's reload here and see what is actually going to happen all right so we are here and let me just do this will display like 10 items now as you can see this ID are this one should definitely be at position zero position one position two and so on and so forth so if I just select the first one the very first one and I click to view this button I should see oh it's not showing I did not tie the action to the button actually this is it as you can see from the widget tray I tied it on this column so let me just click on this column so that we can see okay unselect un select so as we see um if we select this one I click on this column we should see okay zero that's zero being shown there cuz that is at position zero if we select this four it should be at position three anyways but it's just showing the position at that particular this thing so if we click here you should still see this list of item 0 3 and five 0 three correct and five and even if we go to another page and select an item from there we should still see the particular index of that item displayed in that list of selected um how call it selected 24 selected rules right okay so now what we need to do is we already know that we have these particular locations again if you want to go through like using the the custom code or custom function that um FL flu suggest you use which I seriously advise you you try out or maybe use that CU there might be some performance or whatsoever functionality things that are tied to that why you may not want to use like this work around I'm suggesting but I'm just trying to bring about like hey there's a possibility that I can do this so what we want to do now is we already know for a fact that um this data table has the selected row indices like a list of those indexes so what we need to do now is instead map like when we click on this button we want to map it to the list of this um selected employees that we have here okay I hope that makes sense so I'm going to remove this selected R cuz we not going we are no longer going to be needing this a particular variable so I'm going to remove that what I like to do regarding that now is to create a page State variable again to hold like the selected row items right which should still be like a list of employee database U employee types so I'm going to say selected employees it should be um a super base role employees and it's a list confirm and here I'm instead going to generate children using um select sorry selected the other variable what this variable called selected employee variable I'm going to come to page State instead of search employee I'm going to say selected employees this is the one that I want to use and when I save now I have to map this item to the employee name okay so to do that I'm going to do that selected item get R field and let's just display the name here so I think we are good to go now let's remove this this action from this column and we actually tie it to this button we know for a fact that when we select the row we have a list of all the rows the indexes of that um particular element located in the list of all our rowes so to actually map that to form a super base um record or to be a record in the super base type we need to Loop through each selected um row and then get the position that matches on that our original data table um field okay now on this button what we want to do is we need to map remember I told you we need to map the data so that it shows we currently have those indexes again if you want to go through the custom function way I seriously advise you you try that instead so we have all of the list of these items to actually do um like Loop through it and then get the corresponding um super base rule from from our initial list of employees we need a loop Index right you know how we use Loop in F flow so I'm just going to come here outside and I'm going to create a variable called um Index right just call it index and it's an integer it's not nullable CU it has it has it needs to have a default of zero so that our Loop doesn't break or anything okay so we have that we have our Loop index now when this button is being clicked what do I want to happen I need to update the page state by to reset the selected employees first because maybe there's another selected employee or there were employees selected before I need to reset it each time that a selection is been made or each time that that button is been made I need to Res reset the previous um entries or whatsoever data that was on this particular um selected employee state so I'm going to say update page State um and I'm saying selected employees I want to reset reset value sweet then the next action here comes my Loop so I'm going to add a loop and what I want is for my Loop index less than number of items in our um data table selected rows right cuz we are looping through the data table selected rows so I want to say for single condition for my Loop index remember my Loop index starts from zero from my page State Loop index less than like strictly less than and not less than or equal to because we are looping you don't want it to go out of band the second value should be the length of our what is this thing we just State data table selected row number of items so I want to Loop through all of this now for each what do we want to do we need to update our page State our selected um employees page state by adding the employee that matches the index of that particular selected um row I don't know if that makes sense so State Management update page States add field selected employees right what I want to do is add to list what do I want to add I need to add the value of my original list of employees that matches that particular index that I'm currently looking at okay so I'm going to say pay state list of employees item at what index say item at an index I want to specify the index specific index which index which index since we are looping through the list of selected roles I need the item the index of that particular selected r that we are on so I'm going to say um where is it wiet State data table selected row right item at index the index of that current our variable Loop specific index the loop past State Index right okay again let me explain this thing so we have here we are looping through our selected data table selected rowes and we are say for each data table selected rows imagine this is the list of indices that are in that data table selected row so this why is at index Z this is index one so we are saying for each of these index we want to fetch from our original um all employees the value that is at this particular index three that is what all of this logic does so we are getting the loop at this particular index that matches the index that we're currently looping on we are getting the value at this particular index that matches the index that we are currently um looping on so I'm going to save and confirm and when that is done what do I want to do I need to update the page state which page State increment this our Loop Index right the index that we looping on so I'm going to say add action so that iterates like it's one after the other state manage up the page State again if this looks so complex to you see how you can get it done with the custom code but yeah and I want to increment so increment by one remember if our Loop finish uh is done running I want to reset this our Loop Index P all right I want to reset it cuz if we had like six items selected and we don't reset the loop index it's going to be six and so each time that we need it to run it's going to start back from that six and that is not a logical thing to do so I want to reset this value and this right here my friend is what we need to actually get that look to display the data that we have we can make use like say all those items that you have selected if you want to delete we set like a global like um action here to do the delete or list of things to just do something with the data but that is how we can get that data and use it for whatever thing I want to do now if you run on test mode you should be able to see what I what we just did in action all right so here we are and what I'm going to do is I'm just going to say list out okay this five is okay but let's list out um 10 so that can have options to select more and if we select this two James Smith and we click on this button down here okay two Okay click on this but you should see the name j SM here yeah and now this is just making use or it's making available all the um the whole entry like the whole super base Ro and not just the ID or not just the name so you can do a lot of things with that data so if we click here on this button we should see J SM Mich Johnson and David Wilson whatsoever so that's just that guys the next thing we want to look at is how we can view edit or delete a particular rle that is available on our data table and so that can reflect to on our database so um for that I'm going to switch back to this old design that we had and uh what I just have here is just like an icon button like a row under this data table cell or is it data table cell I have this icon button I have this other one that for edit and I have this one for delete now for The View when I click on The View it it's going to open this component that I created and what does a component do the component simply has um employee view this is a component it receives an employee rule as a um component parameter right this is it up here so it receives an employee role as a component parameter and in this component now I just display the name I display the position and I display the salary here the full salary then I TI an action here that like when you click this thing it closes um the component dismisses the bottom shap so back here when you click on this I icon when you click on this I icon to view the particular um details of a of an entry in that our data table it's going to just simply open the bottom sheet that view employee um component and then pass the um parameter the um current employee parameter I don't know if you understand come here on employee emplo item since we are looping based on that page State list of employees so we have access to this particular item to pass to that our component so that is how you can send data to a component to view and just simply overlaying this component over here we can see that information that particular entry has the same thing happens for this um edit icon so what I did was when you click to edit it's simply going to pass um the employee information to the edit employee components right and on the edit employee components what I have here is just a form two forms so it receives an employee role which is our superbase role as a component parameter then displays the default the name that it receives from that Ro here as an initial text the salary as an initial text so you can modify this and when you click update this is how it updates it's going to you see update roles what Ro an employee roles what is it going to match it's going to match based on the ID right the ID of the r should be the ID of that um employee parameter that component parameter that we received in that component so it's going to match that and what Fields do we want to modify want to modify the name to be the text value and salary to be the text value then we dismiss the bottom sheet right that is how the update Works similarly for the delete similarly for the delete when you click on this delete icon what is going to happen is it's going to just ask you like um open this um alert dialogue this confirm dialog for you to confirm saying do you want to delete this user then I display the user name and this is just like um combine text and if you confirm the response like you want to delete it's going to just delete where the ID matches right where the ID is equal to that employee ID and then it refresh freshes the back end uh the back end query that we had on the pitch load and assigns it back to the page state after deleting cuz since we have our data stored in that um page State variable just deleting like this not automatically going to refresh we need to query the new data without the one that we have deleted so it's going to query that and then update our page State our total list of employees right with a response from this this query that we did so our list of employees then we do that why because here we are displaying this data on our data table based on that our particular page state so if all of that is functional you should have something like this we should have this thing that we can click here this I icon that we can click to view let me demonstrate on the live version this thing is taking it's taking a while to load so let me demonstrate here on the live version on the web that I've published so this is a version of the app that I this is the version of the app that I published so if you click on this I yeah you see the data this particular user and everything is functional as it's supposed to be so we click here we have S we can close and if we select a couple of columns and then see select the employees we should see their names down here let me un select all then we can search and do all the other things so let's delete s with it and if we delete it's going to delete s then refreshes this data thank you guys for watching so if you found this video useful or you like the content I put out please consider subscribing it really motivates me and helps the channel to grow so guys that has been uh data table that has been everything you need to know about data tables in flter flow again thank you for watching very much and uh yeah see you around bye-bye

Channel: Nocode Solutions

Views: 958

Keywords: flutterflow, Datatable, Nocode, no code, Flutterflow Datatable, flutter, flutterflow tutorial

Id: XEb3ZrMIB6k

Length: 48min 0sec (2880 seconds)

Published: Tue Feb 20 2024