React table with pagination

Поділитися
Вставка
  • Опубліковано 6 січ 2025

КОМЕНТАРІ • 98

  • @CodewithVoran
    @CodewithVoran  3 роки тому

    If you want to support my channel, you can buy me a coffee:
    👉👉👉 buymeacoffee.com/Voran
    Thank you

  • @Reverse-sg5rn
    @Reverse-sg5rn 2 роки тому

    thanks this helped a lot.
    don't know what is more epic. The background music or the tutorial.

  • @miguelalvarez3471
    @miguelalvarez3471 3 роки тому +1

    excellent video..

  • @oguz9340
    @oguz9340 2 роки тому +1

    The video was very helpful. Thanks.

  • @adamantine001
    @adamantine001 2 роки тому +1

    Thank you for this, I'm currently working on project where we use react-bootstrap (which doesn't have ready to use paginated table) so we had to implement the pagination manually.

  • @QasimAli-ge7ow
    @QasimAli-ge7ow 2 роки тому

    Good bro

  • @8294685725
    @8294685725 2 роки тому +1

    Thank you Sir for a very good tutorial

  • @sruthik846-u9s
    @sruthik846-u9s Рік тому

    I recieve the error : ERROR in ./node_modules/lodas/index.js 3:12-36
    Module not found: Error: Can't resolve 'child_process'. How cal i solve this?

    • @CodewithVoran
      @CodewithVoran  Рік тому

      I think lodash didn't installed properly. You might made typo

  • @Mohammad-qs3ld
    @Mohammad-qs3ld Рік тому

    Nice bro

  • @alicantopaloglu7060
    @alicantopaloglu7060 2 роки тому

    I have a question. I have so many page but if a use this formula i don't see the first and last pages how can i pass next line in ul item

  • @RikzB
    @RikzB 2 роки тому +1

    pagination starts at 12:00

  • @0x0abb
    @0x0abb 3 роки тому +2

    very good lesson, thank you!

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      welcome buddy. subscribe for more useful tutorials

  • @naselp.nazeer5751
    @naselp.nazeer5751 3 роки тому +1

    thanks brother it help me a lot one day i spend on searching

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      thanks brother. subscribe and give your support

  • @sadiairam9208
    @sadiairam9208 Рік тому

    if (pageCount ===1) return null;
    causes empty page display when there is only 1 page.how to handle this.

  • @danilofandino9117
    @danilofandino9117 2 роки тому +1

    Thanks, very easy to understand!

  • @remixowlz
    @remixowlz 2 роки тому +1

    amazing job!

  • @nijathasanov3155
    @nijathasanov3155 3 роки тому

    Thank you. It is what I was looking for!

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Welcome nijat. Subscribe to my channel for more tutorials

  • @lucasnobaixo
    @lucasnobaixo 3 роки тому

    This helped me a lot! Thanks and congrats

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      thanks lucas. subscribe to my channel for more useful tutorials

  • @nguyenhanhtuan1206
    @nguyenhanhtuan1206 2 роки тому

    Thank you so much for the tutorial !!!

  • @jhonromero6527
    @jhonromero6527 2 роки тому

    Thanks a lot. It works perfectly!

  • @zainrehmanansari865
    @zainrehmanansari865 3 роки тому

    I have 2000 Records, 10 per page it will display 200 list items below 1->200 what should I do now? I'm confused

  • @lifewithysa2461
    @lifewithysa2461 3 роки тому

    This what ive been looking for many thanks it helps a lot😃😃

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      welcome. subscribe to my channel for videos. thanks

    • @osmanhamashool6396
      @osmanhamashool6396 Рік тому

      yeah cause every where there is the react table lib

  • @nikhilhaspe2734
    @nikhilhaspe2734 2 роки тому +1

    thanks men!

  • @malharijadhav8816
    @malharijadhav8816 2 роки тому

    Sir if i have 10,000 records in table then how i can show pagination

  • @kouawoualexrussel3812
    @kouawoualexrussel3812 Рік тому

    am unable to use lodash _ it says "_" not define

  • @prabhatkantipandit8214
    @prabhatkantipandit8214 3 роки тому +3

    git link or source code?? please share

  • @calvinlee4346
    @calvinlee4346 2 роки тому +1

    Great video! Only problem I am having is nothing is showing on my application.

  • @divyasingh_4015
    @divyasingh_4015 2 роки тому

    I get the error as missing key prop for element on line pages.map((page)=>..)
    I am unable to resolve it, I googled stuffs and it says, we must have a key element..can you please explain this?

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      You should give a property called key to the parent element.
      For example:

  • @sepamer
    @sepamer 3 роки тому

    I receive the error: TypeError Cannot read properties of undefined (reading 'map'), in the line of post.map((post. index)=> but when I use only the console output it works fine. Is this a problem because I am calling data when I don´t have it?

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      The parameters should be post, index. Not post.index

    • @sepamer
      @sepamer 3 роки тому

      Thank you!!

    • @sepamer
      @sepamer 3 роки тому

      Sorry, in my message I wrote post.map((post. index)=> but in the program I have post.map((post, index)=> The problem persists.

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@sepamerpost.map((post, index)=> please rename post to something else (the first parameter). eg: post.map((p, index)=>

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      To Solve × TypeError: Cannot read properties of undefined (reading 'map') Error There is a prop “post” in your component. That variable has higher priority than the map you have outside, and your .map is using it. I would recommend to rename one of them, to avoid variables with the same name.

  • @biniamabebe1394
    @biniamabebe1394 3 роки тому +1

    how can I display an image from a local json object?

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Hi brother. Mostly the json object have the image url. Just pass that url in image tag as src

  • @mathushanthsrikandarajah1324
    @mathushanthsrikandarajah1324 2 роки тому

    How to set Sidebar and Table in responsive way?

  • @abhishekverma2568
    @abhishekverma2568 3 роки тому +1

    1 bug - if no nav page is there for last page.

    {
    pages.map(page =>

    Pagination(page)}>
    {page}


    )
    }

    • @abhishekverma2568
      @abhishekverma2568 3 роки тому +1

      Solution - const pageCount = Products? Math.ceil(Products.length/pagesize)+1 : 0;

  • @melkammekonnen5121
    @melkammekonnen5121 3 роки тому

    Thank you so much! this worked very good for me!

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Thanks . Subscribe to my channel, react tutorials are on the way

    • @zanderalijah615
      @zanderalijah615 3 роки тому

      Pro trick : watch series at Flixzone. I've been using it for watching a lot of movies recently.

    • @allanuriah3436
      @allanuriah3436 3 роки тому

      @Zander Alijah definitely, have been watching on Flixzone for since december myself :)

  • @ashutoshshukla1907
    @ashutoshshukla1907 3 роки тому

    How to get th(table haader) from the api dynamically...

    • @ceop1239
      @ceop1239 3 роки тому

      You can get the first object and extract keys from it.

  • @rajdipghosal6845
    @rajdipghosal6845 3 роки тому +2

    Can you give the source code please..it will be helpfull

  • @JyotiKumari-ki4tw
    @JyotiKumari-ki4tw 2 роки тому

    Thanks a lot

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      Welcome jyoti. Subscribe to my channel for more useful tutorials

  • @abhishekverma2568
    @abhishekverma2568 3 роки тому +2

    15:19

  • @adnanshaikh3624
    @adnanshaikh3624 3 роки тому

    how to do this in redux??

  • @vipinpatel9572
    @vipinpatel9572 2 роки тому

    page not found error show kar raha hai

  • @udayjprg2988
    @udayjprg2988 3 роки тому +1

    Can you please tell us important topics should know for React JS while learning it.
    I like your videos they are very understandable

    • @CodewithVoran
      @CodewithVoran  3 роки тому +1

      check this article. it will be useful for beginners blog.glitch.com/post/react-starter-kit

    • @udayjprg2988
      @udayjprg2988 3 роки тому

      @@CodewithVoran
      Thank you brother will follow it.
      Can you please are for JavaScript like important topics to cover and wanted to do small projects in it.

  • @pbharathi8549
    @pbharathi8549 3 роки тому

    How to download table data

  • @saroj_shrestha
    @saroj_shrestha 3 роки тому +1

    please add sorting as well on it

  • @anikettari1057
    @anikettari1057 3 роки тому

    Tahnkyou

  • @sreejith_m_nair627
    @sreejith_m_nair627 2 роки тому

    can you share the github code for this

  • @RajuRaju-pj3ni
    @RajuRaju-pj3ni 3 роки тому +1

    Bro you have class component

  • @divyakerekar8971
    @divyakerekar8971 2 роки тому +1

    Code in github

  • @RajuRaju-pj3ni
    @RajuRaju-pj3ni 3 роки тому

    Brother I have all page, not able to replicate pagination can you help me

  • @richardokonicha
    @richardokonicha 3 роки тому +1

    not React-table

  • @huy9251
    @huy9251 2 роки тому

    where is the source code ?

  • @jaysingh5402
    @jaysingh5402 2 роки тому

    bro send code link

  • @user-888azim-97
    @user-888azim-97 2 роки тому +1

    oh no……

  • @bobbyG883
    @bobbyG883 2 роки тому +1

    Can you help me with my pagination code 🤣😂🤣😂

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      Do you get any errors?

    • @bobbyG883
      @bobbyG883 2 роки тому +1

      @@CodewithVoran I have ty to implement your pagination code into my code. I need to pass the pagination into my onClick function. is there a way I can show you my code?

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      @@bobbyG883 put the code in GitHub and send me the link

  • @nguyentoanhnt
    @nguyentoanhnt 3 роки тому +1

    good video, but music :(

    • @CodewithVoran
      @CodewithVoran  3 роки тому +2

      sorry brother. I will consider this in my future videos

  • @rootMedia21
    @rootMedia21 2 роки тому

    Sir thanks for your lifesaver video!
    I have one question for you, how to use the Prev and Next Buttons instead of listing all pages in numbers. Thanks!
    ⏮ -1- ⏭

  • @asgharali6907
    @asgharali6907 2 роки тому

    bro help me in pagination i am facing one error