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

Sdílet
Vložit
  • čas přidán 5. 09. 2024
  • Learn how to render HTML tables dynamically using Python and Flask! In this video, you'll learn how to take data from your Flask app and create HTML tables with it.
    If you want to learn more about Flask, check out our Flask Tutorial for Beginners playlist: • Flask Tutorial for Beg...
    -- Links --
    🐍 Our Complete Python Web Course: www.udemy.com/...
    ✅ Subscribe to the channel: www.youtube.co...
    ✅ Our Discord server: / discord
    ✅ Instagram: / tecladocode

Komentáře • 72

  • @bilalkhann16
    @bilalkhann16 Před 3 lety +9

    Here is the body code:

    {% for header in headings %}
    {{ header }}
    {% endfor %}
    {% for row in data %}
    {% for cell in row %}
    {{cell}}
    {% endfor %}
    {% endfor %}

    • @bara6082
      @bara6082 Před 3 lety

      Thx, man. We should take it higher

  • @avendanod
    @avendanod Před 2 lety +1

    finally, someone who speaks clearly and precisely !!! Thank you very much !!!!

  • @alicejbbennett
    @alicejbbennett Před 3 lety +3

    Thanks! for some reason I had a really hard time figuring out how to do this, and an even harder time finding a useful resource explaining it. This is exactly what I needed.

  • @pgallovich
    @pgallovich Před 3 lety +6

    I’m really loving Flask even more after watching this video. This was a great intro and helped me understand Jinja2 templates. I love how they work with Flask. Now I want to implement with a database. Thank you! 🙏

    • @tecladocode
      @tecladocode  Před 3 lety +1

      Thank you Paul! I really like Woking with Flask and Jinja2. There’s a lot you can do!

  • @kaelabbott
    @kaelabbott Před 3 lety +6

    Great video!
    Is there away to have a live table? like to render every miliseconds the table in case my source of data changes in miliseconds.

  • @varunsagartheegala
    @varunsagartheegala Před 3 lety +4

    Exactly what I wanted. I was thinking it will be extremely tricky. But you made it seem so easy. Loads of Thanks.

  • @user-rf4vc7mt4d
    @user-rf4vc7mt4d Před 2 lety

    I have an assignment due tomorrow and ur literally saving my ass. Like you are saving my ass. Thanks

  • @kedar09
    @kedar09 Před 2 lety +1

    Hi. Is there any way through which the same can be done by making use of API data? I have created my own API in flask which gives me a response in a JSON format. I don’t want to hardcode my data into a tuple/list. I’m kind of stuck. Please help. Thanks.

  • @sizwencikana9215
    @sizwencikana9215 Před rokem

    I applied the same concept on Fastapi and it worked like a charm. Big ups bro👌

  • @reghaabraham
    @reghaabraham Před 3 lety

    It's not a cliché, that was an awesome video! , didn't comment immediately, had to watch again before dropping this comment.
    In 11mins, you taught us this so powerful!
    Awesome work Jose.
    Sincerely want to be like you when I grow up 😀💪

    • @tecladocode
      @tecladocode  Před 3 lety +1

      Glad you liked the video Regha! You can do anything you set your mind to, but you can aim higher than being like me 😆

  • @TheRosso84
    @TheRosso84 Před 3 lety +1

    How do you output data like this with dictonaries?

  • @tapioms
    @tapioms Před 3 lety

    aún no entiendo como este tipo no tiene más susbcriptores! pero con el tiempo e de esperar que este canal estalle!!!
    Que buenos videos.

  • @winnieip9851
    @winnieip9851 Před 3 lety +1

    Yes thanks a lot. I understand Jinja2 better now

  • @dzheyms
    @dzheyms Před 3 lety +3

    Another great video, really like the new format. The content is straight to the point and well presented. Good work Jose.

    • @tecladocode
      @tecladocode  Před 3 lety

      Thanks for the feedback James, we’ll keep this format for future videos!

  • @KishorKumar-on2lw
    @KishorKumar-on2lw Před 2 lety

    i am getting below error
    jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'endfor'.

  • @tecladocode
    @tecladocode  Před 3 lety +4

    Hope you guys enjoyed the video! Some questions were left unanswered, so here goes:
    --- Why use classes instead of targeting elements directly in CSS?
    It's to do with specificity. By always using classes instead of element or id selectors, we can make sure our CSS can be overridden easily.
    --- How did I create the HTML boilerplate so quickly?
    In VSCode, type ! and press tab, you'll get the default boilerplate.
    --- What does {% and {{ mean in Jinja2?
    {% is used to create statements, like if statements, for loops. {{ is used for interpolation (to put values into the resultant string or HTML).
    --- If you want to learn more about HTML and CSS, we've got a great course on Udemy that is getting some massive updates over the next few days. Link: www.udemy.com/course/the-complete-python-web-course-learn-by-building-8-apps/?couponCode=HTML_TABLES_FLASK
    --- I mentioned Jinja2 macros at the end. I'll be making a video on them really soon!

  • @prezlamen
    @prezlamen Před měsícem

    How to dynamically add forms on page with flask and python?

  • @mervecengiz7988
    @mervecengiz7988 Před 2 lety

    You speak very clearly, thank you for this tutorial. I just subscribed 🙂

  • @godzero1995
    @godzero1995 Před 2 lety

    would it be very costly to have nested for loop? any better solution to fetch the table?

  • @srujanayasa3672
    @srujanayasa3672 Před 2 lety

    How to delete a table with id given directly from html script using flask???

  • @bilalkhann16
    @bilalkhann16 Před 3 lety +1

    Great video. Exactly, for what I was looking for! Thankyou.

  • @diogodallorto1
    @diogodallorto1 Před 3 lety

    very helpful for who are from backend lol
    Thank you a lot!

  • @robertpfaff4834
    @robertpfaff4834 Před 2 lety

    Thank you for a great video. I was finally able to make my table. But I wondering how can I make the content editable given that I am using flask and jinga. What do I need to add or learn? Thanks in advance for your response.

  • @romuloalvarez007
    @romuloalvarez007 Před 2 lety

    Thanks for the video, could you please give some clue on how we can create a table that could be editable for the user.

  • @manarma7536
    @manarma7536 Před rokem

    That's amazing. I was Wondering if i can create a dropdown on cell level to filter the table, is it possible ?

  • @martinoneill7631
    @martinoneill7631 Před 3 lety

    really great video! one question regarding to the {{cell}}, when pasing in a string like"

  • @sujan679
    @sujan679 Před 3 lety

    how would you retrieve the same data back to a new python dictionary using GET, POST methods?

  • @rje4242
    @rje4242 Před 3 lety

    absolutely brilliant! the next step is sqlalchemy methods to determine the headers/columns for a table

  • @memrecunkus404
    @memrecunkus404 Před 3 lety

    jinja2 code doesnt recognised by html files in pycharm. I am stuck. Can you help me?

  • @soldadopreciso
    @soldadopreciso Před 2 lety

    interesting, how can we use fetch and add a search option

  • @HenryQHe
    @HenryQHe Před 2 lety

    Awesome video! I'm a Python beginner writing an image processor app for fun / learning, if I want to display the processing status of each image in real-time in the HTML template, is that straightforward with Python, or is it really more of a JavaScript thing? (btw I'm using Bottle for simplicity, but seems like many of the Flask concepts apply). Thanks!

  • @qwalorblera293
    @qwalorblera293 Před rokem

    Is it possible to create table using dictionary? I stead of tuple

  • @pareshgawand5375
    @pareshgawand5375 Před 3 lety

    Can we display bar plot on HTML file the way we display this dataset

  • @anand7764
    @anand7764 Před 2 lety

    @teclado can you pls tell how to add links in this tables column.

  • @godspeed2124
    @godspeed2124 Před 3 lety +1

    Thanks a lot for this video. Exactly what I was looking for!

  • @soldadopreciso
    @soldadopreciso Před 3 lety

    Thanks pal, go ahead, nice and useful tutorial. I will goto search next about retrieve data from a mysql/mariadb database , and next somthing about using asynchronous events.

  • @uzmapatil1045
    @uzmapatil1045 Před 3 lety

    i have integer values in my database, what to do?

  • @SonuPandey-me4fs
    @SonuPandey-me4fs Před 3 lety

    Thanks it's really nice and solved my problem.... you are just awesome man! explained very well.

  • @paulorosado6888
    @paulorosado6888 Před rokem

    Thank you very much, my friend

  • @pratikpd5460
    @pratikpd5460 Před 3 lety

    Very nice video! Could you please suggest how to colorcode the last Salary field? if its less than 45k then yellow and more than 55k then Green?

  • @nickapeed
    @nickapeed Před 3 lety

    Thank you! This was impressively concise… I am looking for a tutorial on building a flask application where the user can enter values in a table and the table will produce real-time calculations, like an excel spreadsheet. Do you have any suggestions?

    • @tecladocode
      @tecladocode  Před 3 lety +2

      Thank you very much Nick! That's a tricky one. Any interactivity on your page (e.g. making a table editable, and performing calculations more or less live) will need to use JavaScript. I'd say you're probably looking to make a JavaScript app more so than anything with Python (although you can use Python to communicate with a server and store data)

  • @rahulshetty3849
    @rahulshetty3849 Před 2 lety

    Thank you

  • @Qualidadetodososdias
    @Qualidadetodososdias Před 2 lety

    Excellent tutorial!

  • @cipolletti7
    @cipolletti7 Před 2 lety

    Excellent video!!!

  • @maxwellansah6978
    @maxwellansah6978 Před 2 lety

    Excellent video. very precise

  • @elenaperez6327
    @elenaperez6327 Před 2 lety

    Great video, thanks a lot! Do you know how I could insert a dict value into the src of an html img tag please??? I tried this but it is not
    working

  • @GabrielM01
    @GabrielM01 Před 2 lety

    Wow, thank you so much, helped me a lot

  • @joseantoniosanchezarteaga9116

    as it shows the results of a linear congruncial function in a table in python web

  • @selcukkok
    @selcukkok Před 2 lety

    very good tutorial, I like it

  • @tolosricardos2111
    @tolosricardos2111 Před 2 lety

    Nice video
    thank you very much

  • @riteshsingh2791
    @riteshsingh2791 Před 2 lety

    very nice

  • @antdinodevguitar8063
    @antdinodevguitar8063 Před 3 lety

    Thanks for this video, i've been trying to figure this out for weeks but getting nowhere

  • @falconxx777
    @falconxx777 Před 3 lety

    hellow ! How can i return data from table to flask request...??

  • @lilbuckbreaker3868
    @lilbuckbreaker3868 Před 2 lety

    THANK YOU BRO!!!!

  • @sujithkumar3908
    @sujithkumar3908 Před 3 lety

    can i get the code for explained example gentle man ?

  • @shinigamiryuk786
    @shinigamiryuk786 Před 3 lety

    Thanks, Really Helpful

  • @nathanbustamante1479
    @nathanbustamante1479 Před 2 lety

    Nice Video!

  • @vibewithhaadi
    @vibewithhaadi Před 2 lety

    useful, thanks

  • @mbonuchinedu2420
    @mbonuchinedu2420 Před 3 lety

    Thanks teclado.

  • @marvinlanger1155
    @marvinlanger1155 Před 2 lety +1

    04:57 main.py
    10:15 table.html
    11:20 styles.css

  • @avxavx
    @avxavx Před 2 lety

    where is source code in this video?2

  • @m_t_d2758
    @m_t_d2758 Před 3 lety

    the output on the right.... could be so much better! (Just one mans opinion)

  • @mathiashenderson4288
    @mathiashenderson4288 Před 3 lety

    👍 subbed

  • @user-xd3gu6vr2n
    @user-xd3gu6vr2n Před 3 lety

    Спасибо.