Saturday, March 20, 2010

A Really, Really Big HTML Table

I recently needed to create a scrollable HTML table which could handle a lot of rows quickly. My first target was about 3,000 rows, but as you will see, I managed to put together something that will "render" 1 million rows without breaking a sweat.

This problem has already been solved before. A typical approach for handling large amounts of data is what I like to broadly refer to as data partitioning. There are many ways to partition data, one of which is pagination. The most common example? Google. When you perform a Google search, even if there are a million results, only 10 are displayed at a time. This principle is also commonly applied to "table components" in many Javascript frameworks. For example, the YUI DataTable supports pagination.

One slant on pagination is the concept of making a scrollable table which somehow "paginates" on the data which is actually visible. Quite a few frameworks now support this concept, such as qooxdoo's virtual table. My goal was to create a table component which used this scrolling concept to allow for Really, Really Big tables. This article describes a generic method for creating such a table, as well as a proof-of-concept implementation.

The first step in the method is to assume a fixed row height. While this is not ideal, in most cases the row heights are fixed anyways, and it helps us to do simple calculations. For instance, if we know the row height, and we know the number of rows, then the scrollable height of the container should be (row height * number of rows). We know that for a particular scroll position, rows i through n are visible, where i is (scroll position / row height) and n is ( (scroll position + visible area height) / row height). So now we have the math to set up a scrollbar with the correct height and how to figure out which rows need to be rendered when the user scrolls.

The next part is structuring this in HTML.We want fixed headers and a scrollable body.


The blue outline is the visible header area. The red outline is the visible body area. Both the headers and the body extend outside of the visible region which creates scrollbars for the body (gray). The blue and red outlines are simply divs, each containing a table.

Next, we need to make the table body tall enough to force a vertical scrollbar. In addition to this, we need a way to very selectively "fill in" rows. One approach is to go ahead and create the table row elements (but not cells) for each row. This is surprisingly pretty fast, but not fast enough (will work for 3,000 rows, won't work for 1,000,000). The solution I came up with is to create "filler" row elements to fill in the gaps between rendered rows.


The green areas are rendered rows. The yellow area is a filler row with an explicit height set. This "pushes down" the rows beneath it to their correct positions. When initially creating the table, one filler row is created for the entire height of all rows.

When the user scrolls (and on initial creation), the table determines which rows are visible based on the scroll position. Those rows are created if not already done. The filler rows are then created, removed, or updated as necessary to keep everything in the right spot. Maintaining the filler rows is the most complicated piece of the puzzle, but not overly difficult.

The end result? For a table of 1 million rows, only the visible rows + 1 are actually created in the DOM. One nice thing about this approach is that it practically scales in a constant (not linear) time.

Click here for a proof-of-concept example with 1,000,000 rows

The source code for the proof-of-concept is available at http://github.com/jbrantly/bigtable. Note that it is not ready for production. Instead, it simply demonstrates that this technique is feasible and could be used to create a more full-featured component. Also note that many details crucial to the successful implementation of such a component were omitted or glossed over in either the article or the source code.

66 comments:

  1. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

    ReplyDelete
  2. Thanks for your contribution. Its a well programmed structure for implementing big tables. Pls can you say me whether it works the same with mysql data.?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Great idea. You should check out Michael Liebman's slickgrid https://github.com/mleibman/SlickGrid/wiki.

    ReplyDelete
  5. patriots jerseys, http://www.newenglandpatriotsjerseys.us/
    saints jerseys, http://www.neworleanssaintsjerseys.us/
    fitflop, http://www.fitflop.in.net/
    karen millen uk, http://www.karenmillendressesoutlets.co.uk/
    air jordan 11 free shipping, http://www.airjordan11.net/
    hollister canada, http://www.hollistercanada.com/
    hollister uk, http://www.hollistershirts.co.uk/
    tods outlet, http://www.todsoutlet.us.com/
    air jordan 4 free shipping, http://www.airjordan4.org/
    pandora jewelry, http://www.pandora.eu.com/
    coach outlet online, http://www.coachoutletstores.com.co/
    tiffany and co, http://www.tiffanyandco.in.net/
    prada outlet, http://www.pradaoutlet.us/
    ravens jerseys, http://www.baltimoreravensjerseys.us/
    supra shoes, http://www.suprashoes.us.com/
    hogan,hogan outlet,scarpe hogan,hogan sito ufficiale,hogan interactive
    michael kors outlet, http://michaelkors.outletonlinestores.us.com/
    juicy couture tracksuit, http://www.juicycoutureoutlet.net/
    chicago bulls, http://www.chicagobullsjerseys.net/
    jets jersey, http://www.newyorkjetsjersey.us/
    cai2015912

    ReplyDelete
  6. Quester is a Pakistan-based questioning answering website where people can ask questions and we try our best to provide them with the best answers. Anyone can ask any legit question in English or Roman Urdu and we provide answers in the same language format. www.quester.pk

    ReplyDelete
  7. Tu artículo es muy intersante, gracias por compartir. desde Cuenca - Ecuador

    ReplyDelete
  8. لدينا فريق عمل متكامل لعمل كافة خدمات الصيانه لجميع الاجهزة باختلاف انواعها في مراكز صيانه سوني
    و مراكز صيانه جليم جاز
    لاننا نهتم بالتخصص ولدينا مهندسين وفنين متخصصين وذو خبرة في فك وتركييب الاجهزة وصيانتها الموقع الالكتروني:
    http://www.maintenanceg.com/Sony-Agent-Service-Company.html

    http://www.maintenanceg.com/Glemgaz-Agent-Center-Egypt.html

    ReplyDelete
  9. الخبرة والتخصص لدينا فقط في مركز صيانه سوني
    و ايضامراكز صيانه جليم جاز
    لاننا نعمل في مجال صيانه الاجهزة منذ عشرات السنوات التي استطعنا خلالها الحصول على ثقة كافة عملائنا في اساليب الصيانه المتبعة والاسعار المناسبة موقعنا الالكتروني::
    http://www.maintenanceg.com/Sony-Agent-Service-Company.html

    http://www.maintenanceg.com/Glemgaz-Agent-Center-Egypt.html

    ReplyDelete
  10. نتميز في صيانة ويرلبول بأننا نقدم فترة ضمان على الصيانهمما يتيح لك فرصة طلب الصيانه مجانا خلال فترة الضمان اذا تكررت الاعطال وتحصل ايضا على قطع الغيار مجانية الموقع الالكتروني
    https://www.almyaa.com/Whirlpool-Maintenance

    ReplyDelete
  11. توجة الى الفرع الاقرب اليك من مراكز صيانة كريازي عندما تواجهك اعطال الاجهزة الكهربائية لتحصل على صيانه فورية ومتخصصة الموقع الالكتروني:
    http://www.kiriazi-maintenance.com/

    ReplyDelete
  12. الصيانه المتخصصة في مراكز صيانه وستنجهاوس
    لاننا نهتم بادخال التقنيات الحديثة والمتطورة واسعار مناسبة من خلال مراكز الصيانه المختلفة وقطع غيار اصلية الموقع الالكتروني

    http://egy.help/maintenance/%D8%B5%D9%8A%D8%A7%D9%86%D8%A9-%D9%88%D8%B3%D8%AA%D9%86%D8%AC%D9%87%D8%A7%D9%88%D8%B3

    ReplyDelete
  13. انتميز في اسرة العمل الموجودة في دار مسنين بالجيزة
    وايضا دار مسنين بالهرم
    وفرع دار مسنين بالمهندسين
    بالخبرة والكفاءة والتنوع حيث ان لدينا كفاءات في كافة مجالات الرعاية الطبية والنفسية وعاملات وتتميز الدار بجودة الطعام المقدم للمسنين الذي يناسب الحاله الصحية لكل مسن الموقع الالكتروني:



    http://www.careolder.com/%D8%AF%D8%A7%D8%B1-%D8%B1%D8%B9%D8%A7%D9%8A%D8%A9-%D9%85%D8%B3%D9%86%D9%8A%D9%86-%D8%A7%D9%84%D8%AC%D9%8A%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D9%87%D9%86%D8%AF%D8%B3%D9%8A%D9%86-%D9%87%D8%B1%D9%85





    ReplyDelete
  14. لعمل كافة اشكال قرميد
    لدينا في شركة البدر اجود الانواع والخامات والتركيب الموقع الالكتروني::

    http://www.brickksa.com

    ReplyDelete


  15. الحراسة تحتاج الى افراد مؤهلين ودربين وذو قدرات جسمانية خاصة لذلك نحن في شركة حراسات امنية لدينا افراد امن متميزين من افضل الكوادر التي قد تجدها في اي شركة امن وحراسة اخرى لمعلومات اكثر عن خدماتنا زوروا موقعنا:
    http://www.guards-security.com

    ReplyDelete
  16. يمكنك الان الحصول علي خدمات صيانة معدات فنادق من خلال الشركات المتخصصه في خدمات الصيانة في دليل معدات الفنادق و الذي يحتوي ايضا علي شركات صيانة معدات مطاعم و تجد كل ما يخص محتويات و معدات المحلات فستحصل علي صيانة معدات محلات باسعار مميزه من خلال الدليل المتخصص .

    ReplyDelete
  17. تعد الخدمات المقدمه من افضل شركة عزل اسطح بالقصيم من الحلول التي تساهم في حل المشكلات التي تكتشفها شركة كشف تسربات بالقصيم و التي تكتشف المشكلات الموجوده في المياه و الصرف و يوجد ايضا خدمات مقدمه من شركة عزل خزانات بالقصيم و هي لحماية الخزانات و ما بها من مياه و لدي الشركة الام و هي شركة البيت السعيد شركة مكافحة الحشرات في القصيم لخدمات الابادة والتطهير من الحشرات

    ReplyDelete
  18. Selamat menunaikan ibadah puasa Salam dari Obat Epilepsi Semoga barokah

    ReplyDelete
  19. needed to thank you for this very good read! pantangan kista

    ReplyDelete
  20. اطلب الان الخدمات المعتمده المقدمه من فروع مراكز صيانة جولدي الموجوده بالمححافظات لوصول اسرع للعميل و تمتع بخدمة الدعم الفني الفوري من المركز

    ReplyDelete
  21. احصل الان علي اقل اسعار شركات مكافحة الحشرات في مصر من خلال الشركة الفرنسية لخدمات ابادة حشرات باقصي سرعة و اطول فترة ضمان لفاعلية المبيدات المستخدمه

    ReplyDelete

  22. كبرى الشركات المتخصصة في اعمال مكافحة الحشرات شركة العنود نقدم شركة مكافحة حشرات بمكة
    ونعمل على ابادة الحشرات بكافة الطرق والاساليب الحديثة ونضمن لك عدم ظهورها مرة اخرى وايضا في شركة ابادة حشرات بمكة
    اسعار مناسبة وعروض صيفية موقعنا:
    http://www.el3nod.com/5/company-anti-insect-termite-Pesticides-mecca

    ReplyDelete

  23. الصيانه المتخصصة من مراكز صيانه وستنجهاوسلدينا صيانه شاملة لكافة الاجهز باحدث الاساليب وافضل الاسعار و موقعنا::
    https://www.almyaa.com/White-Westinghouse-Maintenance/

    ReplyDelete

  24. نتميز في اكبر دار مسني بمصر دار مسنين بالقاهرة بالاهتمام بالمسن من كافة النواحي الصحية من خلال جليسة مسنين واسعار جليسة مسنين مناسبة موقعنا الالكتروني:
    http://www من.careolder.com/

    ReplyDelete
  25. thank for information, is the nice post. Informasi yang sangat bermanfaat sekali, terima kasih banyak atas informasinya yah obat iritasi kulit karena kosmetik

    obat asam lambung tinggi untuk ibu hamil

    ReplyDelete
  26. تمتع بالكثير من خدمات تنظيف سجاد بالبخار بمكة الموجوده في عدة مدن اخري ايضا من خلال فروع شركة تنظيف موكيت بالبخار بمكة التابعة لمجموعة شركات العنود

    ReplyDelete
  27. تتميز مراكز صيانة جولدي للعمل بشكل دائم علي تميزها حيث اصبحت من المراكز المتقدمة في تقديم جميع خدمات الصيانة الممكن الاحتياج اليها بشكل مستمر
    https://www.almyaa.com/Goldi-Maintenance/

    ReplyDelete
  28. خدمات متنوعه من شركة تنظيف بالدمام لنظافة دائمة للمنزلو جميع ملحقاته من اسطح و سلالم و حدائق و يوجد خدمات صيانة منزلية من شركة تسليك مجاري بالدمام و غيرها الكثي رمن شركة ابراج دبي

    ReplyDelete
  29. تعلن مؤسسة ابراج دبي ان يوجد بها شركات مميازة في اعمال المجاري الخاصة بتسليكها وطرق الوقاية من تلك المياة وهي شركة تسليك مجاري بالدمام فهي من اكبر الشركات التي تعمل علي تبيطق احدث الاساليب لتخلص منها .
    http://abraj-dubai.net/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D8%B3%D9%84%D9%8A%D9%83-%D9%85%D8%AC%D8%A7%D8%B1%D9%89-%D8%A8%D8%A7%D9%84%D8%AF%D9%85%D8%A7%D9%85-%D9%88%D8%A7%D9%84%D9%82%D8%B7%D9%8A%D9%81/

    ReplyDelete