PyQt5 QTableWidget tutorial: Load data, fill tables, format tables [Table Widget]

okay hi everyone welcome to a brand new video so in this video we're going to explore the pi qt5 q table widget so this is one of the many widgets that piquet5 provides us with so we're going to explore how this table works how to load some data into this table and how to select different items from the table and perform all sorts of operations so without further ado let's get started so to prepare for this tutorial this is what i have set up so this is a sort of basic ui designed in pi 25 designer now if you're completely new to this here's what i suggest that you do i have a short four minute video i believe concerning how to install python as well as installing qt designer and how to actually after installing it actually find cutie designer and be able to open it and create guise with it so it's a very short video if that's what you're looking for if you're not exactly sure how to operate by qt5 or qt designer then watch this video first and then you can directly resume with this video otherwise you can just continue so this is a simple ui design and cutie designer what this ui has is basically nothing it just has a styled background as well as this rectangle right here which is just styled in the sort of pinkish color as well as a label so this is a text label displayed on the screen it has no value whatsoever whatsoever except just being a display widget it does not take neither input nor give out output so it's just a label so this is what we have so far there is no table yet all right so let's get started let's actually put a table on the widget and and just start working with it and start the code here we have these two different groups of items you could say so let's just check this out so we have the item views versus the item widgets so we have these two different type of tables there is the table view versus the table widget now many could argue here that these two things could essentially produce the same output or visualize the exact same table however the functions inside the code differ for each one so for this tutorial we're going to work with the table widget maybe in a future tutorial we can work with the table view as well as the tree view as well as different types of python widgets so let's just grab a table widget from here and drag it onto our screen and we can just maximize it and here we go so we have an empty table now this looks sort of like an empty square with pretty much nothing inside it well that's because we haven't really added anything to this table so here's what we have it's called table widget so this is the object name and it's empty so to add some columns to it all i have to do is right click and press edit items and now i can create some columns so here i can say name and then i can say age and then i can say address for example and this is what we have and if i press ok i know how i now have these columns now these columns obviously look a bit too small for the table right now but they are resizable if i preview so if i ctrl r and i open up a preview for the for this um dialog in qt designer this is what i have and i can resize these different columns as well as select columns and sort of do different types of things so this is sort of what we have for now this is everything that we've done manually now we can choose to add rows manually as well so if we go here we have rows we can add a new row and have this row sort of have a label to it so i can say uh first name for example and then if i add this row here i go i have a row and a and columns right here and i can add these different types of rows so for now for our thing we're not going to have rows however if you choose to have them then that's totally okay so going back to the code so this is pycharm and this is what we have so this is basically a simple program now if you're confused as to why there is code on the screen let me just tell you that this code is simply just what is required to be able to launch this application and sort of launch this window so if i run this up so let's just run it this is what i get so this is essentially the same thing that i just saw when i was trying to preview this dialogue we have not coded anything related to the table just yet so i'm just going to go over the code quickly in case someone is not familiar with py25 at all so i'll be able to explain it otherwise if you already know this then you're definitely good so here i just have the required imports to be able to run this application i have a queue application so i can create an app and run it i have a queue dialog which is essentially what we're opening so it's the sort of window that we have i have qt widgets so qt widgets contains everything from queue dialog to hue text edit to sort of everything else i have the load ui function that we import from this module right here and this load ui function is what allows me to load a ui that we designed in qt designer by using the drag and drop functionalities of qt designer and load it into our python code with just one line of code without having to code every single part um of this dialogue all right so that's pretty much it for the imports now for what the actual window is so we create a class called main window and this class this main window is actually a queue dialog like we just said we define the constructor function and then we just have to say that we want to load the ui for this constructor inside the constructor when we're initializing when we're opening when we're opening up a new window we want to load this ui which is called table tutorial dot ui which is what we actually saved the ads right here and we want to open it up so that's basically it for defining the sort of class and then to actually run this application we create an app and it's a queue application we create a main window or any sort of variable and we initially instantiate a new instance of this class and then we add this to a cue stacked widget which is what we use in case we ever want to navigate navigate between different pages and then we set a fixed width and height for this and we widget.show to be able to actually display it on the screen and then we execute our application so very briefly that's sort of how everything works within pi qd5 so now that you know that this is the code required to run this application let's add the parts related to our table now going back here let's just verify what the object name for this table is and it's simply called table widget all right so we can get started now for table widget inside our constructor we sort of need to set some maybe um let's say dimensions for this table so if you want to set the column widths so like we said here when we run it this is resizable and obviously by default they're way too small we can set our own width without having to sort of change anything simply by doing so from the code so here's what we have to do all we have to do is self dot table widget and then we can dot set column width and let's say 0 400 and now let's just run it and see if there's any any difference and this is what we have so here we just set the zeroth column so essentially the first column if we're indexing by zero and we set this column to have a width of 400 pixels now obviously we can make this much smaller so i would say here maybe go for 200 or 250 so this is essentially what we have now let's just go back here and verify the names of the columns so if we move this down and just have this to be the age all right so that's good enough now going back to the code we can set the column width for every other column so here we say table widget dot set column width and now we can give it maybe a since it's the age we can give it a shorter value so maybe 100 and then self dot table widget dot set column width for the i'm sorry here this should be the first column and then for this one the second and now we can say maybe uh 250 and that's pretty much it so just to give an overview here we're setting the if a fixed column width or the default column width and we're giving it a value in pixels and then here we're just saying which column we're giving this width to so here is the zeroth column here to the first here it's the second so essentially we're indexing by zero now if we run it and we check the different sizes that we have here are our new sizes obviously we can still increase them so maybe we should go ahead and do that so if i change this to 350 and i change this to 250 right here and i can run it and this is what i have so this is okay now we have a default scroll bar if the thing is too big but essentially it's sort of almost exact so now that we've set the column width our next goal right now is to actually load some data into this table so actually visualize what's inside this table so i'm going to create a function so i'm going to call this function load data and it's going to have self and now here i'm just going to call it so dot load data so here's what i want to do so i want to load this data so how am i going to do so where am i going to be able to get this data from so any general application obviously ideally you have this data within a database be it an sql database so mysql or sqlite or maybe perhaps a nosql database like mongodb or firebase real-time database or pretty much any other database and you would get this data from this database and you display it in the table in this case what we want to do what we want to do is actually just take some sample data and display it because obviously here it's not focused on the database itself but on the act of putting things inside the table so what i'm going to do is create some sample data so i'm just going to create a list of people and this list of people is going to have these different people objects with this different type of data within them so here i can have for the first object and the objects are going to be hash tables or python dict and this is where i'm going to be able to store this data and then take it and put it inside the table so name and i give this name maybe a john and then i can give that person an age and i can give that person an age of 45 or an address of new york and obviously since we're inside a list so we can create multiple versions of this python dict for different types of people so here i can create another one so name and then give it to let's say mark and then this is etc etc so i'm just going to copy it and make some minor changes so here i can have this to be 40 and now i can let this person live in l.a all right so now we have these two sort of um hash tables inside this larger array or this larger list and now inside this list of people i want to take each person and translate each person to a row so this data like i'm going to repeat this could be taken from any sort of database so you can take this from an sql database that has sort of three columns or three attributes and they are name age and address you can just take them from or extract them from this database read them from this database and then post them inside the table so that's just sort of what you can do or you can get this in the exact sort of json format from a nosql database such as mongodb and put them inside the table so here's how we're going to do it so we're going to create a for loop so four person and people here's what we're going to do for each person we're going to self.table the table widget dot set item and now with set item we're going to specify a location for this item so this item is going to be inside a sort of box or and this box is like a cell and the cell exists on one row and one column so let's say um row and then zero index and then qt widgets dot q table widget item and then we're going to just give it the um person sub name all right now what is row in this case now we can set row to be zero so row is equal to zero and then increment row as we go so row equals rho plus one however we must note one important thing is that when we set the columns manually inside here so inside this part we set the columns manually according to the fields that we know we are certain that we're going to have so here we are certain we're going to have a name we are certain we're going to have an age and we're certain we're going to have an address however what we're not certain about is the number of people we're going to have to display inside this table so this is why we do not set a defined row count so when we're going to do that we're going to do that inside the load data function so the way we're going to do it is simply just cells dot table widget dot set row count and we're going to give it the number of people with within this list so let's say the length of people all right so this is how many rows we're going to have so in this case we're going to have two rows so now now we have we start at row zero we increment row as we go let's just run this show the output and then i'm going to explain exactly how this code works so this is the output that we have so obviously we only sort things within the first column so we have the name and we have the first name of the first person so john and we have the name of the second person who is mark now let's just see exactly how this code is working so i'm just going to scroll up a bit and then open up the application again so here's what we're doing so we set the row count to be the number of people obviously we're filling in all the people inside the table so we set the row count to be the number of people we start at row 0. so the first cell that we fill is the cell with row with row 0 with row index of the row is 0 and the index of the column is zero in this case so obviously here this could be more dynamic but in this case it's a fixed type of column thing so we have only three columns and they're indexed at 0 1 and 2. so at row 0 and column 0 i want to put person sub name and in this case we're still at the first person so i want john and then in the second iteration at row one and column zero so row one here and column zero we're still in the name column i want to set the value of this cell to be the person sub name and in this case the person is mark now we can have the exact same thing for the last two columns so here's what we're going to do so for condom number one so or we're saying here the second column or the first if you refer to the first one as the zero column and now we want to say it's person sub h however one thing to note here is that we usually put strings inside this table so we just have to cast this into a string because here it's an end and then in the last one we just have to say at column two we want to put person sub address and now if i run it let's just check out what the data looks like inside the table so this is what we have we successfully filled in the data from the um from the data that we have within the list from the python hash table into the table in python the q table widget and this is how we have them so obviously we can add more and more data and this would increase dynamically because we are setting the row count to be according to the number of data items or the number of data points so let's just paste this here and say um for example george and then we can give this an age of 30 and address of london all right so running it this is what we have so we have these people within this um the table and it displays all of their data in a sort of nice and neat fashion now obviously you can change the font size and the font color here just the same way we did it by styling pi to d5 so if you are interested in styling these styling the font styling the colors and as well as styling the background and the different type of ways that we can create nice layouts in pipe 85 you can refer to a previous video that i have on specifically about styling pi qt5 widgets and dialogues so that's basically it for this pipe 85 tutorial stay tuned for more and obviously i'm going to tackle more and more of the pike t5 widgets so thank you very much for watching see you for the next one and bye bye

Channel: Code First with Hala

Views: 43,516

Keywords:

Id: xL2NdSubiNY

Length: 18min 4sec (1084 seconds)

Published: Mon Aug 24 2020