How to display dynamic data tables with Python, Flask, and Jinja2

hi guys and welcome back presenting tables of data on the web is such a popular thing to do that i felt like i had to show you how i normally do it using flask and ginger and html of course so in this video let's take a look at how we can use flask to easily present tables of data like in the way you see on the right side of my screen right now let's get started [Music] [Applause] [Music] in this video we're going to be working with this table of data we're going to have a table where the headings and the data are defined separately because often when we're working with data using flask apps it's dynamic data so let me show you what it looks like if i change the headings and the data as well so here i've gone into my flask app i know you can't see it at the moment i'll show you what it looks like in just a moment and change the data and the headings for my table and i've used jinja 2 to automatically draw my table parting from the data i've given it so it's really easy to modify these tables only with a couple of small lines of code changes in python so let's get started with this video and see how we can do that what i'm going to do first of all is i'm going to create a virtual environment which i've already done down here and install flask init and then i'm just going to go and type flask run whenever we type flask run that's going to start our flask app now if i refresh the page here we're going to get an error that's because at the moment in my project here i don't have any templates to display any html so what we're going to do is create a templates folder and then create here table.html so now we've got a flask app and all it does is it defines an endpoint that when accessed returns the render template of table.html what that's going to do is it's going to go into this html file it's going to evaluate any jinja code that is in it it's going to turn it all into html and it's going to send the html to the user so if we put here some html code for example hello world then when we refresh this page we get hello world so what we want to do here is display a table of data first of all let me hide away these consoles there and focus on the html that we're writing in order to create a table using html we're going to use the table element so that is table just like that so now we have a table element here which is empty and we're gonna populate it with rows of data so we're gonna use the tr element for the first row and in here we're gonna put a th element for a table header cell and here we're going to put something like for example name then in a different row we're going to create another row of data like that and we're going to populate it with td elements for table data elements and here we're going to put for example rolf smith so if we restart the app and refresh the page you see that now we get this table of data with only one header the name and one row of data which contains the person's name we want to also display the people's roles and salaries so what we have to do is go ahead and add a couple more headers another one for the role and another one for the salary and then of course a couple more rows each one with a couple more table data elements so we're going to do rob smith is a software engineer and his salary let's say is something like 42 000 okay then we'll actually do the same thing for these other table data elements but we'll change the names okay so i've gone ahead and changed the names and their salaries and now when we refresh the page we get the default styled html table where the styles are the default for my browser we're going to change these styles in just a moment every time we access the endpoint here we're returning the table.html and render template is going to evaluate any jinja 2 code and is going to convert it to html before sending the html to the user at the moment we don't have any jinja 2 code in here the ginger 2 code is used to take some data and use it to create html code the data has to come from our flask app so we're going to extract the table data into our flask app and how we're going to do that is by using a couple of tuples so i'm going to have a tuple of headings the headings of the table and a tuple of tuples where this is a tuple containing one tuple of data for each row so you can see here we've got rolf software engineer for 2000 and so forth for every other person now when we return render template we have to pass the template our data so that it can then work with it we're going to do headings equal headings and data equal data what this does is it creates a variable headings inside our template for ginger two to use and the value of that variable is the headings variable notice that we can call this variable whatever we want we could put table headings here if we wanted and then the template would use table underscore headings as its variable but i want to keep it as headings so that they match what we've got here in python and the same for the data variable in our template has the value of our data variable in python so now we can go into our template and use jinja 2 to create this html table instead of hard coding everything in here so what we'll do is for every header cell we're going to use a for loop for header in headings we're going to use a for loop in here and four right there and in every iteration of this for loop we're going to draw one header cell that contains the header information just like that so this behaves very much like a python for loop but every time we go through the for loop we're actually adding an element to the html similarly for our rows of data we're going to first of all iterate over our data so we'll do for row in data and that is going to give us a for loop that goes through each tuple in our data so the first row will be this tuple the second row will be this tuple and so on and then what we'll do inside this for loop is we're going to have another for loop which has four cell in row so then we're going to be able to use this inner for loop to access every individual cell in the tuple notice though that each row has a tr element and every cell has a td element so we do need the tr element to be out here surrounding this for loop and we need the tv elements to be inside the cell for loop now instead of putting raw smith in here we're going to put the cell contents notice that we're not using the row contents anywhere inside our html we're only using that to iterate over it so that we can get every cell out of it now we can delete all of these other table rows now you can see that we've got here a table row that draws a table header for every element in our headings tuple and then we've got a for loop that draws table rows and the contents of each row is each cell inside that row of data now i'm going to restart my application and you can see the contents are identical but you can see if we go to app.py in here and add a couple more rows of data when we restart our app they show up here immediately without us having to change the template at all we can also add more headings and more elements to each tuple to display more columns in our table let me show you real quick how we can style this table a bit better first of all i'll open my sidebar and then i'm going to create a new folder called static at the top level so that's in my project folder in the same folder that app.py is so now i've got the app.py the templates and the static folders all in the same place and in here i'm going to create styles.c this is going to be my css file that i'm going to link to my html file so that the styles are applied to this table how do we link css files to html files in flask very easy we'll just do a link element where the rel is stylesheet and the hrev is equal to slash static styles.css and then we'll close that link if you know a bit more about flask and you attempted to use the url4 helper here feel free to do that but it's not the focus of this video so we're going to stick to this whenever you create a static folder in flask at the top level of your application it automatically serves all its contents so they are accessible by any browser that's accessing the website so we can just access it like this and it'll just work let's go back to styles.css and i'll close this sidebar because we don't need it anymore the first thing that we want to do with basically any table is color the even rows with a slightly different color so that it's easier to scan through the table what i'm going to do is i'm going to type tr and then in here we're going to do background color e5 e5 e5 what this will do is it will color everything using this new background color just like that if we use the pseudo selector nth child even then it'll only do that on the even rows you can see them there it's generally bad practice to target elements directly using css instead we normally prefer to target them using classes so let me go to my html document and give each of my elements a class my table is going to have a class of table this first table row that contains the headings is going to have a class of table underscore underscore header here i'm using the b e m css methodology to give class names to my elements feel free to read up on that i'll leave a link in the description of this video here i'm going to give this a class of table on the scroll underscore cell these rows that we're creating programmatically are going to have a class of table underscore underscore row and all of these table data elements are going to have a class of table underscore underscore cell so you can see that basically all my cells have a class of table cell the header has a class of table header every row has a class of table row and the table itself is the table now we can go to styles.css and target these appropriately using table underscore underscore row i want my headers to be left aligned so i'm going to do dot table underscore underscore header and i'm going to do text align left doing this is going to move the headers over to the left but you can see that everything is very squished together so i'm going to do table on the screen to score cell and give them a padding of 8 pixels now everything is a bit more separated finally we may also want to give some styles to our table we can do border spacing is zero and that is going to get rid of all the borders between our cells if we give our table a bit of margin that is going to separate the table from other elements in case this belongs inside a main website we can also give the table a background color so that we can tell it apart from the background all right that's everything for this video something that you might want to do later on as you learn more jinja 2 is extract some of the html building into ginger 2 macros we'll talk more about those macros in a later video as well thank you so much for joining me in this video i hope you've enjoyed it remember to check out our channel subscribe and like the video if you can and i'll see you in the next one [Applause] [Music] you

Channel: teclado

Views: 145,800

Keywords: html table tutorial, flask table example, flask table tutorial, flask html table, python flask, flask tutorial, flask templates, jinja2 flask example, jinja2 table, jinja2 html table, flask html, python tutorial, python flask web development, python flask tutorial, python flask tutorial for beginners, flask tutorial for beginners, html table css, jinja html table, jinja html css table, flask dynamic table, python flask corey schafer

Id: mCy52I4exTU

Length: 11min 50sec (710 seconds)

Published: Fri Oct 09 2020