TailwindCSS responsive tables on mobile screens

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ม.ค. 2025

ความคิดเห็น • 45

  • @RandomMusicD
    @RandomMusicD 2 ปีที่แล้ว +4

    Dude, I was really lost using tables with Django and Tailwind, this saved me, so thaaanks,

    • @cdruc
      @cdruc  2 ปีที่แล้ว +2

      Glad you find it helpful! 👊

  • @Ca3yMiX
    @Ca3yMiX 2 ปีที่แล้ว +34

    in a real case we would have dynamic table data, so instead of styling each tr individuality you can use more in the doc, thanks for the video 🙌

    • @cdruc
      @cdruc  2 ปีที่แล้ว +7

      Yup! Forgot there is a tailwind variant for almost everything 🤣. I might do a video on those just to catch up

    • @Ca3yMiX
      @Ca3yMiX 2 ปีที่แล้ว +2

      @@cdruc 😅 btw i came from react .. but tailwind used in jsx part so i can follow .. thanks for the video 🙌

  • @oketafred
    @oketafred 3 ปีที่แล้ว +5

    Your content is the best 👏👏👏👏. You deserve a million likes and subscribers 👏👏👏👏

  • @janiodrey
    @janiodrey 4 หลายเดือนก่อน

    very helpful. thank you

  • @themarksmith
    @themarksmith 3 ปีที่แล้ว +3

    Loving the videos on tailwind... Not into PHP (sorry) but your CSS, JS, etc. stuff is great - thank you!

    • @cdruc
      @cdruc  3 ปีที่แล้ว +3

      If it wasn't for Laravel, I probably wouldn't be into php as well, so that's ok 😂
      Glad you enjoy the others!

  • @binodsharma112
    @binodsharma112 ปีที่แล้ว +1

    Thanks .. I was using table wrong in.. its so much helpful.

  • @gotoslovakia
    @gotoslovakia 2 ปีที่แล้ว +1

    Great! Thank you!

    • @gotoslovakia
      @gotoslovakia 2 ปีที่แล้ว +1

      Also I discovered your website - a lot of useful information, I'll start using it tomorrow.

    • @cdruc
      @cdruc  2 ปีที่แล้ว +1

      Thanks! I hope you’ll find it helpful 👊

  • @aguswidi9316
    @aguswidi9316 ปีที่แล้ว

    I'm lucky to found gems video. Awesome toturial. And thank's

  • @GammaWraith
    @GammaWraith 3 ปีที่แล้ว +2

    Really nice, should definitely add some sticky headers then it will be golden

  • @elfreddy5
    @elfreddy5 2 ปีที่แล้ว +3

    great video, I was able to use the idea in my project. Datatables and mobiles are not visually compatible at all.

  • @DevenSitapara
    @DevenSitapara 9 วันที่ผ่านมา

    Wow, found what i was searching , please Create sorting and paginatiin

  • @CollinsKreation
    @CollinsKreation 3 ปีที่แล้ว +2

    This is sick... I love it...thanks

  • @JokerBench
    @JokerBench 2 ปีที่แล้ว +1

    Awesome video! I hope you can make a tutorial for the pagination as well

  • @barraganroberto
    @barraganroberto 2 ปีที่แล้ว

    This is crazy great! Thank you so much!! 👏

  • @nicolasportu
    @nicolasportu ปีที่แล้ว

    Outstanding! Best of its kind 😃

  • @Curdledx
    @Curdledx 2 ปีที่แล้ว +1

    very good video - even understandable for me as a backend / database guy :)

    • @cdruc
      @cdruc  2 ปีที่แล้ว

      Glad you find it useful!

  • @paschanchik
    @paschanchik 2 ปีที่แล้ว +1

    Реально красиво получилось. Спасибо

  • @theophiluseniayewu6270
    @theophiluseniayewu6270 19 วันที่ผ่านมา

    Thsnk you❤

  • @Doowi92
    @Doowi92 ปีที่แล้ว

    Very helpfull tutorial and well explained it helps me alot, you have earn 1 more sub

  • @jitxhere
    @jitxhere ปีที่แล้ว

    now this is awesome

  • @asselita2463
    @asselita2463 ปีที่แล้ว

    How can i prevent my table from stretching? because now horizontal scrollbar appeared, PLEASE HELP ME 🙏🙏🙏🙏

  • @neilgilroy1629
    @neilgilroy1629 2 ปีที่แล้ว +1

    Great video!

  • @shaikotikbalhridoy2039
    @shaikotikbalhridoy2039 ปีที่แล้ว

    Awesome bro, i like it ❤

  • @namikazedevj46
    @namikazedevj46 2 ปีที่แล้ว

    this is so underrated

  • @kohelet910
    @kohelet910 2 ปีที่แล้ว +1

    Nice job !

  • @marcelosantoscorrea
    @marcelosantoscorrea 3 ปีที่แล้ว +1

    Very very good!!!

  • @arellanojv1
    @arellanojv1 2 ปีที่แล้ว

    for option number 2. in production are you going to render the data at the same time as the table or you will make a trigger if it hits a specific media query?

    • @cdruc
      @cdruc  2 ปีที่แล้ว +2

      Correct! Here: th-cam.com/video/S4MhQ6peq8A/w-d-xo.html
      On line 5 I'm hiding the table on screens less than 768px in width using hidden md:block, and on line 59 I'm showing the grid&cards but only until I reach 768px - from here on the table will be visible.

  • @kimbapslayer1995
    @kimbapslayer1995 2 ปีที่แล้ว +1

    Clean clean

  • @yagovelazquez9140
    @yagovelazquez9140 2 ปีที่แล้ว +1

    good stuff bro

  • @clipocasGames
    @clipocasGames 2 ปีที่แล้ว

    code please

  • @jasonb202020
    @jasonb202020 2 ปีที่แล้ว +1

    nice

  • @maxwellmuhanda7940
    @maxwellmuhanda7940 ปีที่แล้ว

    damn i cant explain how mucn i have learn in such a s small time

  • @programacion5536
    @programacion5536 ปีที่แล้ว

    I think they could be accessibility issues if you use a grid div instead of a the table element. The first approach is the best, imo

  • @NekoJinFel
    @NekoJinFel ปีที่แล้ว

    I’m still trying to understand what advantage tail wind has for developers who already know CSS. It would be even cleaner to write CSS inside dedicated file and not have to clutter the HTML.

    • @hemrastyl6765
      @hemrastyl6765 ปีที่แล้ว

      In Software development, we want to get money as fast as we possibly can unless you have other goals, and how do we achieve that? By being productive and saving time. That's where Tailwind comes in.

    • @whintersby
      @whintersby 9 หลายเดือนก่อน

      I agree with @NekoJinFel. This looks like someone puked up CSS classes all over the page. This is worse than old school Div-itis.

  • @nithinrajendran3091
    @nithinrajendran3091 2 ปีที่แล้ว

    How to deal with table in mobile devices?
    Hide it.
    Awesome content though.