{"id":26485,"date":"2024-07-29T09:27:00","date_gmt":"2024-07-29T03:57:00","guid":{"rendered":"https:\/\/blogrevamp.cashfree.com\/?p=26485"},"modified":"2024-07-26T18:33:12","modified_gmt":"2024-07-26T13:03:12","slug":"building-data-tables-using-open-source-libraries","status":"publish","type":"post","link":"https:\/\/blogrevamp.cashfree.com\/building-data-tables-using-open-source-libraries\/","title":{"rendered":"Building DataTables using open-source libraries"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #005c31;color:#005c31\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #005c31;color:#005c31\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogrevamp.cashfree.com\/building-data-tables-using-open-source-libraries\/#Selecting_the_appropriate_open-source_library\" >Selecting the appropriate open-source library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogrevamp.cashfree.com\/building-data-tables-using-open-source-libraries\/#Developing_the_table_component\" >Developing the table component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogrevamp.cashfree.com\/building-data-tables-using-open-source-libraries\/#State_Management\" >State Management<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">Tables are an integral part of our merchant dashboard. They empower our merchants with the information they need to make informed decisions. In this blog, we&#8217;ll delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Selecting_the_appropriate_open-source_library\"><\/span>Selecting the appropriate open-source library<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To build a table from scratch with various advanced features and interactions, we must manage event handling, state management, and implementing efficient algorithms. This can be quite challenging and time-consuming. Hence, selecting the right open-source library becomes very important.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The biggest requirement for our use case was that the library must support headless UI. <strong>Headless UI<\/strong> is a design approach where the UI components are provided without any pre-defined styles. Instead, they focus purely on functionality and enable developers to customise by adding their styles. This requirement eliminated libraries like <strong>Material UI React<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The two libraries that supported our requirements were <strong>@tanstack\/react-table<\/strong> and <strong>react-data-table-component<\/strong>. Here\u2019s a feature comparison between the two:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfvNDXKv8QZzsT1uXIgoI_qTWggyv7EFwv0hAN_nLvejYDuNhb98GJR2mWtDk4XOgxaFMpVzPvovUiFxGe7YHyoDDCsa5Lj93R8S-byLPajeNaJtRERKoNLAL6XVMFA-0OtZZScackSJ2ITcfLZTyTDhycF?key=_4fu4Zg585CpjYVTPdSCfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Our parameters for selecting a library were better customisation, a wide range of built-in features, a well-maintained codebase, and a large community of active users. We can also contribute to the community by adding missing features or fixing bugs. After evaluating all the factors, we decided to use <strong>@tanstack\/react-table <\/strong>for its functionalities.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Developing_the_table_component\"><\/span>Developing the table component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">On top of the selected open source libraries, we have built custom use cases like \u2013 loading state, no records found scenario, row selection options, pagination, row highlights, row expansions, footers, column resizing, and more.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All newly created components undergo development within our internal design system library, which acts as a centralised library for our UI components.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From a developer standpoint, using the newer table developed in the component library significantly improves efficiency and reduces redundancy in code. All the functionalities and behaviours will be handled via props. Here\u2019s the code snippet to use the data table component:<br><br><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfL4owXEHuLSdrP6gv4567bZpH4wHAUDPJCzdZYjW005d-TS-0mymZFe1nLkGtntJ1DxqqOrop8T4qH5jyqqes7wGCsspGM2Q3YUcgAjdWR0IZkBVixlOM0lIR74GDW3uLDgKJa--bVozqOOayUOXYurVXo?key=_4fu4Zg585CpjYVTPdSCfg\" width=\"624\" height=\"288\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The data table component is made responsive by providing styles and templates for various screen sizes and adding a window resize listener to trigger the re-render.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeougVkgy7-GKy-vTdL818sgvtn6TkuftgtbMqFLUAG8lZ9TwPa_SDp1vGPGaF-2gOWZLduqNxqZBJrfOTQGWPfLQiCJcRyW167kOv-BTytgWTZkokU4f30-RcDHW1Y7Yr-aEiaR7aHUgHuSfMYkMBhJkzg?key=_4fu4Zg585CpjYVTPdSCfg\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"State_Management\"><\/span>State Management<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We have leveraged tanstack\u2019s state management, which helped us to have a single state for the table and achieve performance improvements. For example, in the row selection interaction within the table, we passed the state directly to the headless table and then down to the checkbox.<br>The below code shows how we achieved row selection by passing the state to the checkboxes:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdA5pKggqH4QRpIzNefFU-5XRXCcrYXNbrL40Y6OctYH66BS2Y5xlwUhb0naIoqWoYHIuikAyin8-GT6X-9OFnr0cXRwU7gBrFg57oiyleL3Gq2gPBBhj629Qik4MBA5qNiEoTqZEkHPCHIe1zZfUTukvGr?key=_4fu4Zg585CpjYVTPdSCfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some snapshots of our new data table.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paginated table:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdkdKNApXaeTcyAjBCMhipjcPAdiOMOYIz3JKUFmZM8dzLU7XYS3re4RcsjQ8LwjJ_OEDICqhbUAXvsJ1VB04z42DZk1RY1mCPAli-DttyCPsEpV-LM5o2k4BPgkKPVgVFwJ8DjF_o30GgmTTnT2XFL8NiB?key=_4fu4Zg585CpjYVTPdSCfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Non-paginated table:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeSXoRRL-8c8NXMNnPQTrM2xFuqDGmg0TOtzgWGBjLv-Aj1VgyI0cMhJMHIsX2anPZBUsYQ1gWNNwG8kCV2VQJ5MS3VpoVyTdpgI5Ro06jAhKCnCQSP5mXZJtYFofOIcw1p_jCyyN9427_XQR0zV56eWfmn?key=_4fu4Zg585CpjYVTPdSCfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br>A paginated table on a smaller screen:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXccgzWXWbJG3q4SkS5JSw97Tgk0OpGpIEVYrA2oE0Ci2klYcHoj5ihgj6KOkC0vpcxMJYQQHLTF9LOUvAIXOQxB3CP9pLJYHSCkJx6scQAtf1H78C29KGCic6RTnCUTWz7V3tw0iCskQe7-o7IH-X3vYkbw?key=_4fu4Zg585CpjYVTPdSCfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">At Cashfree, we always strive to provide the best user experience possible with our products. We aim to add more advanced functionalities to our tables, and as we implement them, we will also contribute back to the open-source community.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tables are an integral part of our merchant dashboard. They empower our merchants with the information they need to make informed decisions. In this blog, we&#8217;ll delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.&nbsp; Selecting the appropriate open-source library<\/p>\n","protected":false},"author":114,"featured_media":26487,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_themeisle_gutenberg_block_has_review":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1497],"tags":[],"class_list":["post-26485","post","type-post","status-publish","format-standard","has-post-thumbnail","category-engineering"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building DataTables using open-source libraries | Cashfree Payments<\/title>\n<meta name=\"description\" content=\"This article delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building DataTables using open-source libraries | Cashfree Payments\" \/>\n<meta property=\"og:description\" content=\"This article delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/\" \/>\n<meta property=\"og:site_name\" content=\"Cashfree Payments Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-29T03:57:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2024\/07\/Cashfree-Blog-thumbnail-for-vinayak.jpg?fit=3402%2C2252&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"3402\" \/>\n\t<meta property=\"og:image:height\" content=\"2252\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tanishk Thilakan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tanishk Thilakan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building DataTables using open-source libraries | Cashfree Payments","description":"This article delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/","og_locale":"en_US","og_type":"article","og_title":"Building DataTables using open-source libraries | Cashfree Payments","og_description":"This article delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.","og_url":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/","og_site_name":"Cashfree Payments Blog","article_published_time":"2024-07-29T03:57:00+00:00","og_image":[{"width":3402,"height":2252,"url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2024\/07\/Cashfree-Blog-thumbnail-for-vinayak.jpg?fit=3402%2C2252&ssl=1","type":"image\/jpeg"}],"author":"Tanishk Thilakan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Tanishk Thilakan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#article","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/building-data-tables-using-open-source-libraries\/"},"author":{"name":"Tanishk Thilakan","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/61f4b3e1940b11efbd53afdaee9e387a"},"headline":"Building DataTables using open-source libraries","datePublished":"2024-07-29T03:57:00+00:00","mainEntityOfPage":{"@id":"https:\/\/blogrevamp.cashfree.com\/building-data-tables-using-open-source-libraries\/"},"wordCount":486,"commentCount":0,"image":{"@id":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2024\/07\/Cashfree-Blog-thumbnail-for-vinayak.jpg?fit=3402%2C2252&ssl=1","articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogrevamp.cashfree.com\/building-data-tables-using-open-source-libraries\/","url":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/","name":"Building DataTables using open-source libraries | Cashfree Payments","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#primaryimage"},"image":{"@id":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2024\/07\/Cashfree-Blog-thumbnail-for-vinayak.jpg?fit=3402%2C2252&ssl=1","datePublished":"2024-07-29T03:57:00+00:00","author":{"@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/61f4b3e1940b11efbd53afdaee9e387a"},"description":"This article delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.","breadcrumb":{"@id":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#primaryimage","url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2024\/07\/Cashfree-Blog-thumbnail-for-vinayak.jpg?fit=3402%2C2252&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2024\/07\/Cashfree-Blog-thumbnail-for-vinayak.jpg?fit=3402%2C2252&ssl=1","width":3402,"height":2252},{"@type":"BreadcrumbList","@id":"https:\/\/www.cashfree.com\/blog\/building-data-tables-using-open-source-libraries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogrevamp.cashfree.com\/"},{"@type":"ListItem","position":2,"name":"Engineering","item":"https:\/\/blogrevamp.cashfree.com\/category\/engineering\/"},{"@type":"ListItem","position":3,"name":"Building DataTables using open-source libraries"}]},{"@type":"WebSite","@id":"https:\/\/blogrevamp.cashfree.com\/#website","url":"https:\/\/blogrevamp.cashfree.com\/","name":"Cashfree Payments Blog","description":"Cashfree Payments- Payment Gateway for India","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogrevamp.cashfree.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/61f4b3e1940b11efbd53afdaee9e387a","name":"Tanishk Thilakan","url":"https:\/\/blogrevamp.cashfree.com\/author\/tanishk-thilakan\/"}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9MjXo-6Tb","jetpack_likes_enabled":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2024\/07\/Cashfree-Blog-thumbnail-for-vinayak.jpg?fit=3402%2C2252&ssl=1","_links":{"self":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/26485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/comments?post=26485"}],"version-history":[{"count":2,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/26485\/revisions"}],"predecessor-version":[{"id":26489,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/26485\/revisions\/26489"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media\/26487"}],"wp:attachment":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media?parent=26485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/categories?post=26485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/tags?post=26485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}