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.

80 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. Tu artículo es muy intersante, gracias por compartir. desde Cuenca - Ecuador

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

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

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

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

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

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

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

    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
  11. لعمل كافة اشكال قرميد
    لدينا في شركة البدر اجود الانواع والخامات والتركيب الموقع الالكتروني::

    http://www.brickksa.com

    ReplyDelete


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

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

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

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

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

    ReplyDelete

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

    ReplyDelete
  18. 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
  19. تمتع بالكثير من خدمات تنظيف سجاد بالبخار بمكة الموجوده في عدة مدن اخري ايضا من خلال فروع شركة تنظيف موكيت بالبخار بمكة التابعة لمجموعة شركات العنود

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

    ReplyDelete
  21. Obat Aborsi,, Obat Penggugur Kandungan,,
    Nice bag you can earn money from that
    Thanks for your posting
    Visit me @, Jual Obat Aborsi,,

    ReplyDelete

  22. يتخصص صيانة كريازى فى التعامل مع كافة اعطال الاجهزة المنزلية وتقديم جميع خدمات الصيانة الفورية ؛ والحرص على تقديم افضل خدمة صيانة على أتم وجه وبأسعار مناسبة فقط تواصلوا معنا على رقم صيانة كريازى الخط الساخن



    http://www.kiriazi-maintenanceg.com/



    صيانة تكييفات يونيون اير


    ارقام صيانة تكييفات يونيون اير


    صيانة توشيبا العربى

    صيانة شارب العربى

    شركة مكافحة حشرات بمصر

    ReplyDelete

  23. أفضل مكافحة حشرات بمصر


    شركة العالمية جروب لـ ابادة الحشرات و القوارض يقدم لكم احدث المبيدات و التكنولوجيا المستخدمة في هذا المجال .


    وتعتبر ابادة حشرات من شركة العالمية جروب لـ ابادة الحشرات هى احدي الشركات الرائدة في هذا المجال حيث توفر افضل انواع المبيدات العالمية و المحلية الغير ضارة بالصحة العامة طبقاً لتوصيات منظمة الصحة العالمية " who " كما ان جميع عمليات ابادة الحشرات و مكافحة الفئران والقوارض تتم علي

    ايدي مهندسين زراعيين و فنيون علي اعلي مستوي من التدريب والخبرة .

    بالإضافة إلي أننا شركة مكافحة حشرات بمصر نهدف إلي زيادة وعي العملاء نحو أهمية ابادة الحشرات ومعرفة القوارض وصفاتها وأنواعها وما يمكن أن تسببه هذة

    الحشرات من الكثير من الامراض


    ابادة حشرات بالضمان :

    تضمن شركة العالمية جروب لـ ابادة الحشرات و القوارض لجميع العملاء المكان خالياً تماماً من الحشرات و القوارض لمدة ثلاث سنوات مع المتابعات المجانية خلال فترة الضمان مع خدمه 24 ساعه.


    https://egantiinsecthouse.wordpress.com/2016/07/27/%d9%86%d8%b5%d8%a7%d8%a6%d8%ad-%d9%84%d9%85%d9%83%d8%a7%d9%81%d8%ad%d8%a9-%d9%88%d8%a7%d8%a8%d8%a7%d8%af%d8%a9-%d8%ad%d8%b4%d8%b1%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d9%86%d8%b2%d9%84




    شقق للبيع بالتقسيط فى حدائق اكتوبر


    شقق للبيع بالتجمع الخامس كاش وبالتقسيط


    ReplyDelete

  24. شركة تنظيف في دبي هي شركة لها خبرة عريقة وذات سمعة مميزة ومشهورة في عالم من شركة تنظيف بدبي النظافة شركة رائدة في مجال النظافة تعمل بأحدث الأساليب المتطورة والألات الحديثة في مجال النظافة من شركة تنظيف بدبي
    خلال فريق متميز من المحترفين ذو مهارة عالية ودرجة عالية من الدقة والإتقان من شركة تنظيف بدبي
    في تقديم خدمات النظافة الان وعلى اعلى مستوى ممكن من شركة تنظيف بدبيكما تحرص الشركة على تقديم خدمات متعددة في مكان واحد بناء على رغبات عملائها في توفير الوقت والمجهود والمال فهي توفر افضل خدمات النظافة من شركة تنظيف بدبي
    فى دبي بأرخص الأسعار وافضلها كما توفر عاملات ذات مهارة عالية لها الخبرة الواسعة في مجال التنظيف شركة تنظيف بدبي
    تقدم خدماتها داخل دبي وفي جميع المناطق المحيطة بها

    ReplyDelete
  25. رقم صيانة كريازى

    نجتهد فى صيانة كريازى بتوفير ارقى خدمة تصليح عالية الجودة لـصيانة كريازي بأجهزتها العريقة و صيانة كريازي بأسعار مناسبة ويمكنكم الاستعانة بنا على رقم صيانة كريازى او زورونا على موقعنا



    ابادة حشرات

    مكافحه حشرات بمصر

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

    ReplyDelete
  27. صيانة وايت وستنجهاوس المجانى

    لدينا قائمة بـاسعار غسالات وايت وستنجهاوس فى مصر وقائمة ثانية بـاسعار ثلاجات وايت وستنجهاوس فى مصر تحت تصرفكم بالتوكيل بالاضافة لمن هم علي درجة عاليه من المهارة ويدركوا جميع التفاصيل الفنية ومدربين من قبل التوكيلات الرسمية لجميع الماركات مهندسين وفنيين للقيام بجميع اعمال الصيانه مع تقديم ضمان متجدد علي جميع الاعطال بالاضافة الا ان صيانة ثلاجات وايت وستنجهاوس يضمن لكم حصولكم علي صيانه مجانية في حالة حدوث اي من الاعطال الغير متوقعة نتيجة الصيانة معنا سوف تكون كافة اعمال صيانة غسالات وايت وستنجهاوس في امان وسوف تحصل علي صيانه وتغير لاي من قطع الغيار عند الضرورة فقط تواصلوا معنا على رقم صيانة وايت وستنجهاوس او من خلال موقع صيانة ثلاجات وايت وستنجهاوس المعتمد


    ارقام صيانة تكييفات يونيون اير

    تكييفات يونيون اير

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

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

    ReplyDelete
  30. للحصول على ترجمة ابحاث علمية يجب زيارة موقع مكتبتك لقدرته على توفير عدد كبير من التراجم في أسرع وقت وبدقه عالية

    ReplyDelete
  31. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
    Data Science training in chennai
    Data Science training in OMR
    Data Science training in chennai
    Data Science Training in Chennai
    Data Science training in Chennai
    Data science training in bangalore

    ReplyDelete
  32. نوفر لكم الحلول التقنية وقطع الغيار الاصلية نساعدكم في اتمام الصيانة اللازمة لأجهزتكم المنزلية في الحدود الآمنة التي تحافظ على الكفاءة المعتادة وايضا متوسط العمر الافتراضي نقدم لكم خدمة مريحة تجمع بين الجودة والسرعة والاسعار المحددة وضمان مابعد الاصلاح ونجنبكم التجارب السيئة التي تهدر الوقت والمال
    صيانة كريازى بالاسكندرية
    صيانة توشيبا بالاسكندرية
    صيانة وايت ويل بالاسكندرية
    صيانة وستنجهاوس بالاسكندرية
    صيانة وايت وستنجهاوس بالاسكندرية
    صيانة شارب بالاسكندرية

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


    كيفية تأسيس شركة في دبي
    اجراءات تأسيس شركة في دبي
    تأسيس شركة فى دبى
    تأسيس شركة في دبي
    خطوات تأسيس شركة في دبي
    إجراءات تأسيس شركة في دبي
    خطوات تأسيس شركة في دبي
    تأسيس شركات في دبي
    تأسيس شركات في دبي
    تأسيس شركة فى دبى

    ReplyDelete
  34. الاستثمار في دبي
    أهم ما يميز دبي عن غيرها من المدن هو البنية التحتية القوية التي تتمتع بها ويظهر هذا من خلال المطار الدولي الذي يوجد بدبي الذي يعد واحد من أكثر المطارات التي تشهد أكبر نسبة إشغال من حركة الركاب والازدحام طوال العام فعدد الركاب على مدار العام يقدر بالملايين هذا إضافة إلى عدد كبير من شركات الطيران الدولية التي توفر خدماتها من نقل ركاب وعمليات الشحن من خلال هذا المطار.
    البنية التحتية القوية:
    - هذا إضافة إلى المناطق الحرة الموجودة في دبي التي تشكل بنية أساسية قوية لعدد من الصناعات، إضافة إلى المميزات التي تمنحها تلك المناطق للبدء بتأسيس الشركة أو صناعة، وقد تأخذ شكل عدد من الإعفاءات الضريبية والمتمثلة في عدم وجود ضريبة على الدخل الشخصي أو على الأرباح الناتجة على رأس المال.
    - المستوى المعيشي في دبي يشهد حالة من النمو والارتقاء، دبي تعد كأفضل مدينة في الشرق من حيث المستوى المعيشي كما أن التقدم التكنولوجي الذي تشهده دبي في العديد من المجالات منها الاتصالات والآلات وتطوير الطرق وسبل المواصلات والتي تسهل من التواصل ونقل الشركة لكافة منتجاتها.
    مميزات مدينة دبي للاستثمار:
    · إضافة إلى الموقع الجغرافي الخاص بمدينة دبي الذي يجعل منها سوقًا محوريًا للمنتجات والإعلان لأي من الشركات التي توجد بها كما أن دبي تعد مركزًا للسياحة في العالم العربي وهذا لكون بها العديد من المظاهر السياحية والرياضيات التي تجذب السياح والذي يجعل منها سوقًا للعديد من العملات العالمية.
    · تعد دبي أكثر المدن تقدمًا وازدهارًا بالمقارنة مع دول أخرى في تكوين أي عمل أو تأسيس شركة بها يكون اختيارًا راجح وهذا لكونها مدينة لا تفرض ضرائب كبيرة كما أن الاستثمار بها يعد بمثابة البوابة للاستثمار في الخليج العربي.
    · تكوين شركة في دبي يمر بعدد من الخطوات أهمها الحصول على الموافقة والتراخيص من الحكومة وتلك الخطوة قد تأخذ وقتًا كبيرًا في العديد من المدن الأخرى أما في دبي في الحكومة تمنح عدد من التسهيلات والإعفاءات من الإجراءات الروتينية العديمة الجدوى.
    · الخطوة التالية هي مرحلة التأسيس وفي تلك المرحلة يتم تحديد عدد الشركاء وسمة الشركة ما إذا كانت شركة ذات مسئولية محدودة أم شركة مكونة من عدة شركاء
    لدى اتقان تأسيس الشركات في دبي فريق عمل محترف على أتم الاستعداد لمساعدتك في تأسيس أعمالك التجارية بدبى وبفضل خدماتها المتكاملة، يمكنك تأسيس شركتك باستخدام نماذج مصممة خصيصاً لتناسب احتياجاتك.
    يمكنك معرفة مزيد من المعلومات عن :

    خطوات الاستثمار فى دبى
    تأسيس شركة فى دبى
    تأسيس شركة في جبل علي
    الاستثمار فى دبى
    تأسيس شركة في دبي للخليجيين
    تكلفة تأسيس شركة في دبي
    خطوات تأسيس شركة في دبي
    الاستثمار في الإمارات

    ReplyDelete
  35. خدمي يقوم العميل تطبيق من خلاله بإختيار منتج من مجموعة من المنتجات المتاحة أمامه ليصل الى المكان الذى يحدده مصر جميلة - مصر جميلة - Misr Gamila - Misr Gamila

    ReplyDelete
  36. Thanks for sharing great information. I like your blog and highly recommendData Science Training in Hyderabad

    ReplyDelete
  37. This splendid article really deserves a courteous bow down. I must own up that this article is very helpful.
    SAP training in Kolkata
    SAP training Kolkata
    Best SAP training in Kolkata
    SAP course in Kolkata

    ReplyDelete
  38. Through this post, I know that your good knowledge in playing with all the pieces was very helpful. I notify that this is the first place where I find issues I've been searching for. You have a clever yet attractive way of writing.
    data science courses

    ReplyDelete
  39. This is one of the best content for this topic and this is very useful for me. Thank you!
    Unix Training in Chennai
    Unix Course in Chennai
    Linux Course in Chennai

    ReplyDelete
  40. Fantastic blog extremely good well enjoyed with the incredible informative content which surely activates the learners to gain the enough knowledge. Which in turn makes the readers to explore themselves and involve deeply in to the subject. Wish you to dispatch the similar content successively in future as well.

    Data Science Training in Raipur

    ReplyDelete
  41. Software Development Engineer Training SDET is an emerging role in the present scenario, this role needs an IT professional that can handle development as well as testing effectively. The entire software development process is handled from developing to the testing phase. So this role has high priority in the industries.

    ReplyDelete
  42. Hi there excellent blog! Does running a blog like this take a lot of work?
    I’ve very little knowledge of coding but I was hoping to start my own blog in the near future.
    Anyways, should you have any ideas or techniques for new blog owners please share.
    I know this is off subject nevertheless I simply wanted to ask.
    Thank you!
    섯다

    ReplyDelete
  43. One of the most important tasks a data scientist performs on an almost daily basis is to collect, manipulate, and analyze data.

    ReplyDelete