{"id":832,"date":"2022-03-30T10:00:31","date_gmt":"2022-03-30T09:00:31","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=832"},"modified":"2022-11-27T03:47:02","modified_gmt":"2022-11-27T02:47:02","slug":"how-to-use-data-tables-in-react-js","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/","title":{"rendered":"How to Use Data Tables in React JS"},"content":{"rendered":"\n

Knowing how to use dataTables in React JS can be very rewarding and time-saving.<\/p>\n\n\n\n

DataTables is a powerful Javascript library for adding advanced interaction features to HTML tables.<\/p>\n\n\n\n

This is generally useful especially when you need to not just merely display data from database in your software application, but to also do more like pagination, sorting, searching, etc. DataTables<\/a> comes bundled with all those functionalities.<\/p>\n\n\n\n

And while this explanation seems plausible enough, it can appear quite daunting to get started. However, taking those first steps and getting DataTables running on your web-site is actually quite straight forward as you need only include, maybe, just two files in your page. But with React JS, you’ll have to do more than that.<\/p>\n\n\n\n

In this tutorial, we shall exploring dataTables with all of its in-built functionalities like sorting, copying records, printing records and downloading records as CSV file.<\/p>\n\n\n\n

Let’s just get started.<\/p>\n\n\n\n

First, we’ll need to add the following dependencies to our project:<\/p>\n\n\n\n

yarn add jquery\nyarn add datatable\nyarn add datatables.net\nyarn add datatables.net-buttons\nyarn add datatables.net-dt\nyarn add bootstrap<\/code><\/pre>\n\n\n\n
We’re adding jquery because that’s a necessary dependency for dataTable to work. Next, we’re the dataTable dependency itself and the one for sorting and also bootstrap for styling.<\/p>\n\n\n\n
I’m already assuming you know the basics of creating and setting up a new React project, if not please go through the tutorial here.<\/p>\n\n\n\n
Next, we’ll import these dependencies to our project<\/p>\n\n\n\n
\"codeflare<\/a><\/figure>\n\n\n\n
import \"jquery\/dist\/jquery.min.js\";\nimport \"datatables.net-dt\/js\/dataTables.dataTables\";\nimport \"datatables.net-dt\/css\/jquery.dataTables.min.css\";\nimport \"datatables.net-buttons\/js\/dataTables.buttons.js\";\nimport \"datatables.net-buttons\/js\/buttons.colVis.js\";\nimport \"datatables.net-buttons\/js\/buttons.flash.js\";\nimport \"datatables.net-buttons\/js\/buttons.html5.js\";\nimport \"datatables.net-buttons\/js\/buttons.print.js\";\nimport $ from \"jquery\";\n\nclass App extends Component {\n  render(){\n  return(\n  <div>\n\n<\/div>\n)\n}\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
We’re just going to have an array of objects and map the values to our table. But first, let’s define our array of objects, something simple.<\/p>\n\n\n\n
const names = [\n  {\n    \"title\" : \"mr\",\n    \"firstname\" : \"Lawson\",\n    \"lastname\" : \"Luke\",\n    \"age\" : 28,\n    \"occupation\" : \"Software Developer\",\n    \"hobby\" : \"coding\"\n  },\n  {\n    \"title\" : \"mr\",\n    \"firstname\" : \"Michael\",\n    \"lastname\" : \"Jackson\",\n    \"age\" : 35,\n    \"occupation\" : \"Singer\",\n    \"hobby\" : \"dancing\"\n  },\n  {\n    \"title\" : \"mr\",\n    \"firstname\" : \"Janet\",\n    \"lastname\" : \"Jackson\",\n    \"age\" : 35,\n    \"occupation\" : \"Singer\",\n    \"hobby\" : \"dancing\"\n  }\n]\n<\/code><\/pre>\n\n\n\n
To specify the rows to be viewed, show both print button, copy data records and download data as a CSV, we need to add the following code immediately our page loads.<\/p>\n\n\n\n
Learn about component life cycles here<\/a><\/p>\n\n\n\n
componentDidMount(){\n if (!$.fn.DataTable.isDataTable(\"#myTable\")) {\n            $(document).ready(function () {\n              setTimeout(function () {\n                $(\"#table\").DataTable({\n                  pagingType: \"full_numbers\",\n                  pageLength: 20,\n                  processing: true,\n                  dom: \"Bfrtip\",\n                  select: {\n                    style: \"single\",\n                  },\n      \n                  buttons: [\n                    {\n                      extend: \"pageLength\",\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                    {\n                      extend: \"copy\",\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                    {\n                      extend: \"csv\",\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                    {\n                      extend: \"print\",\n                      customize: function (win) {\n                        $(win.document.body).css(\"font-size\", \"10pt\");\n                        $(win.document.body)\n                          .find(\"table\")\n                          .addClass(\"compact\")\n                          .css(\"font-size\", \"inherit\");\n                      },\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                  ],\n      \n                  fnRowCallback: function (\n                    nRow,\n                    aData,\n                    iDisplayIndex,\n                    iDisplayIndexFull\n                  ) {\n                    var index = iDisplayIndexFull + 1;\n                    $(\"td:first\", nRow).html(index);\n                    return nRow;\n                  },\n      \n                  lengthMenu: [\n                    [10, 20, 30, 50, -1],\n                    [10, 20, 30, 50, \"All\"],\n                  ],\n                  columnDefs: [\n                    {\n                      targets: 0,\n                      render: function (data, type, row, meta) {\n                        return type === \"export\" ? meta.row + 1 : data;\n                      },\n                    },\n                  ],\n                });\n              }, 1000);\n            });\n          }\n}<\/code><\/pre>\n\n\n\n
Moving on, let’s define a function that will map our array values to our table.<\/p>\n\n\n\n
showTable = () => {\n        try {\n          return names.map((item, index) => {\n            return (\n                <tr>\n                <td className=\"text-xs font-weight-bold\">{index +1}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.title}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.firstname+ ' ' + item.lastname}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.age}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.hobby}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.occupation}<\/td>\n<td><\/td>\n<\/tr>\n                );\n          });\n        } catch (e) {\n          alert(e.message);\n        }\n      };<\/code><\/pre>\n\n\n\n
Finally, in our render method, we will define our table headings and call our showTable() function.<\/p>\n\n\n\n
<div class=\"container-fluid py-4\">\n         <div class=\"table-responsive p-0 pb-2\">\n       <table id=\"table\" className=\"table align-items-center justify-content-center mb-0\">\n           <thead>\n               <tr>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">S\/N<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Title<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Name<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Age<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Hobby<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Occupation<\/th>\n<th><\/th>\n<\/tr>\n           <\/thead>\n\n           <tbody>\n                   {this.showTable()}\n           <\/tbody>\n       <\/table>\n           <\/div>\n           <\/div><\/code><\/pre>\n\n\n\n
Now, putting all our code together …<\/p>\n\n\n\n
import \"jquery\/dist\/jquery.min.js\";\nimport \"datatables.net-dt\/js\/dataTables.dataTables\";\nimport \"datatables.net-dt\/css\/jquery.dataTables.min.css\";\nimport \"datatables.net-buttons\/js\/dataTables.buttons.js\";\nimport \"datatables.net-buttons\/js\/buttons.colVis.js\";\nimport \"datatables.net-buttons\/js\/buttons.flash.js\";\nimport \"datatables.net-buttons\/js\/buttons.html5.js\";\nimport \"datatables.net-buttons\/js\/buttons.print.js\";\nimport $ from \"jquery\";\n\nconst names = [\n  {\n    \"title\" : \"mr\",\n    \"firstname\" : \"Lawson\",\n    \"lastname\" : \"Luke\",\n    \"age\" : 28,\n    \"occupation\" : \"Software Developer\",\n    \"hobby\" : \"coding\"\n  },\n  {\n    \"title\" : \"mr\",\n    \"firstname\" : \"Michael\",\n    \"lastname\" : \"Jackson\",\n    \"age\" : 35,\n    \"occupation\" : \"Singer\",\n    \"hobby\" : \"dancing\"\n  },\n  {\n    \"title\" : \"mr\",\n    \"firstname\" : \"Janet\",\n    \"lastname\" : \"Jackson\",\n    \"age\" : 35,\n    \"occupation\" : \"Singer\",\n    \"hobby\" : \"dancing\"\n  }\n]\n\n\nclass App extends Component {\n\n  componentDidMount(){\n if (!$.fn.DataTable.isDataTable(\"#myTable\")) {\n            $(document).ready(function () {\n              setTimeout(function () {\n                $(\"#table\").DataTable({\n                  pagingType: \"full_numbers\",\n                  pageLength: 20,\n                  processing: true,\n                  dom: \"Bfrtip\",\n                  select: {\n                    style: \"single\",\n                  },\n      \n                  buttons: [\n                    {\n                      extend: \"pageLength\",\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                    {\n                      extend: \"copy\",\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                    {\n                      extend: \"csv\",\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                    {\n                      extend: \"print\",\n                      customize: function (win) {\n                        $(win.document.body).css(\"font-size\", \"10pt\");\n                        $(win.document.body)\n                          .find(\"table\")\n                          .addClass(\"compact\")\n                          .css(\"font-size\", \"inherit\");\n                      },\n                      className: \"btn btn-secondary bg-secondary\",\n                    },\n                  ],\n      \n                  fnRowCallback: function (\n                    nRow,\n                    aData,\n                    iDisplayIndex,\n                    iDisplayIndexFull\n                  ) {\n                    var index = iDisplayIndexFull + 1;\n                    $(\"td:first\", nRow).html(index);\n                    return nRow;\n                  },\n      \n                  lengthMenu: [\n                    [10, 20, 30, 50, -1],\n                    [10, 20, 30, 50, \"All\"],\n                  ],\n                  columnDefs: [\n                    {\n                      targets: 0,\n                      render: function (data, type, row, meta) {\n                        return type === \"export\" ? meta.row + 1 : data;\n                      },\n                    },\n                  ],\n                });\n              }, 1000);\n            });\n          }\n}  \n\nshowTable = () => {\n        try {\n          return names.map((item, index) => {\n            return (\n                <tr>\n                <td className=\"text-xs font-weight-bold\">{index +1}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.title}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.firstname+ ' ' + item.lastname}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.age}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.hobby}<\/td>\n               <td className=\"text-xs font-weight-bold\">{item.occupation}<\/td>\n<td><\/td>\n<\/tr>\n                );\n          });\n        } catch (e) {\n          alert(e.message);\n        }\n      };\n\n  render(){\n  return(\n  <div class=\"container-fluid py-4\">\n         <div class=\"table-responsive p-0 pb-2\">\n       <table id=\"table\" className=\"table align-items-center justify-content-center mb-0\">\n           <thead>\n               <tr>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">S\/N<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Title<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Name<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Age<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Hobby<\/th>\n               <th className=\"text-uppercase text-secondary text-sm font-weight-bolder opacity-7 ps-2\">Occupation<\/th>\n<th><\/th>\n<\/tr>\n           <\/thead>\n\n           <tbody>\n                   {this.showTable()}\n           <\/tbody>\n       <\/table>\n           <\/div>\n           <\/div>\n)\n}\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\"\"
DataTable in React JS<\/figcaption><\/figure>\n\n\n\n
\"\"
DataTable search<\/figcaption><\/figure>\n\n\n\n
\"codeflare
Download our mobile apphttps:\/\/play.google.com\/store\/apps\/details?id=com.codefussion<\/a><\/figcaption><\/figure>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
With this we have demonstrated how to use DataTables in React JS.<\/p>\n","protected":false},"excerpt":{"rendered":"
Knowing how to use dataTables in React JS can be very rewarding and time-saving. DataTables is a powerful<\/p>\n","protected":false},"author":1,"featured_media":843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[98],"tags":[106],"class_list":["post-832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softare-development","tag-react-js"],"yoast_head":"\nHow to Use Data Tables in React JS How to use DataTables in React JS<\/title>\n<meta name=\"description\" content=\"How to use dataTables in React Js with its in-built functionalities like sorting, copying, printing and downloading records as CSV file.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Data Tables in React JS How to use DataTables in React JS\" \/>\n<meta property=\"og:description\" content=\"How to use dataTables in React Js with its in-built functionalities like sorting, copying, printing and downloading records as CSV file.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-30T09:00:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-27T02:47:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/03\/Untitled-Design.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"753\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"How to Use Data Tables in React JS\",\"datePublished\":\"2022-03-30T09:00:31+00:00\",\"dateModified\":\"2022-11-27T02:47:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/\"},\"wordCount\":360,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Untitled-Design.jpeg\",\"keywords\":[\"react.js\"],\"articleSection\":[\"softare development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/\",\"name\":\"How to Use Data Tables in React JS How to use DataTables in React JS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Untitled-Design.jpeg\",\"datePublished\":\"2022-03-30T09:00:31+00:00\",\"dateModified\":\"2022-11-27T02:47:02+00:00\",\"description\":\"How to use dataTables in React Js with its in-built functionalities like sorting, copying, printing and downloading records as CSV file.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Untitled-Design.jpeg\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Untitled-Design.jpeg\",\"width\":1500,\"height\":753,\"caption\":\"Use DataTable in React JS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/how-to-use-data-tables-in-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"softare development\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/softare-development\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Data Tables in React JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Data Tables in React JS How to use DataTables in React JS","description":"How to use dataTables in React Js with its in-built functionalities like sorting, copying, printing and downloading records as CSV file.","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:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Data Tables in React JS How to use DataTables in React JS","og_description":"How to use dataTables in React Js with its in-built functionalities like sorting, copying, printing and downloading records as CSV file.","og_url":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2022-03-30T09:00:31+00:00","article_modified_time":"2022-11-27T02:47:02+00:00","og_image":[{"width":1500,"height":753,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/03\/Untitled-Design.jpeg","type":"image\/jpeg"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"How to Use Data Tables in React JS","datePublished":"2022-03-30T09:00:31+00:00","dateModified":"2022-11-27T02:47:02+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/"},"wordCount":360,"commentCount":2,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/03\/Untitled-Design.jpeg","keywords":["react.js"],"articleSection":["softare development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/","url":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/","name":"How to Use Data Tables in React JS How to use DataTables in React JS","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/03\/Untitled-Design.jpeg","datePublished":"2022-03-30T09:00:31+00:00","dateModified":"2022-11-27T02:47:02+00:00","description":"How to use dataTables in React Js with its in-built functionalities like sorting, copying, printing and downloading records as CSV file.","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/03\/Untitled-Design.jpeg","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/03\/Untitled-Design.jpeg","width":1500,"height":753,"caption":"Use DataTable in React JS"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/how-to-use-data-tables-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"softare development","item":"https:\/\/codeflarelimited.com\/blog\/softare-development\/"},{"@type":"ListItem","position":3,"name":"How to Use Data Tables in React JS"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/03\/Untitled-Design.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":4,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"predecessor-version":[{"id":1130,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions\/1130"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/843"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}