{"id":8374,"date":"2025-09-09T07:24:18","date_gmt":"2025-09-09T07:24:18","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=8374"},"modified":"2025-09-09T07:58:18","modified_gmt":"2025-09-09T07:58:18","slug":"change-css-style-of-datatable-components","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/","title":{"rendered":"Change CSS\/style of datatable components"},"content":{"rendered":"<p>In the website programming world, tables are used in a lot of places to show the list of records, for example:<\/p>\n<ul>\n<li>List of users (users using the website portal)<\/li>\n<li>List of employees (in case of Payroll System)<\/li>\n<li>List of leaves (in case of Payroll System)<\/li>\n<li>List of invoices (in case of online payments)<\/li>\n<li>List of orders (for users of e-commerce website)<\/li>\n<\/ul>\n<p>Above are some data lists shown in the form of a table.<\/p>\n<p>To beautify the tables, some libraries are used so that tables are presented more gracefully along with some other operations like searching and sorting, etc. One such popular library is jQuery Datatable. For more information, please refer to the link: https:\/\/datatables.net\/<\/p>\n<p>The very basic Datatable UI is displayed as shown below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8378\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-52-300x186.png\" alt=\"\" width=\"455\" height=\"282\" srcset=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-52-300x186.png 300w, https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-52.png 645w\" sizes=\"(max-width: 455px) 100vw, 455px\" \/><\/p>\n<p>For this basic configuration, please include the required datatable CSS and js files in thetag following is the <a href=\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\">HTML<\/a> sample and js script:<\/p>\n<pre><code>&lt;table id=\"example\" class=\"display\" style=\"width:100%\"&gt;\r\n    &lt;thead&gt;\r\n        &lt;tr&gt;\r\n            &lt;th&gt;Name&lt;\/th&gt;\r\n            &lt;th&gt;Position&lt;\/th&gt;\r\n            &lt;th&gt;Office&lt;\/th&gt;\r\n            &lt;th&gt;Age&lt;\/th&gt;\r\n            &lt;th&gt;Start date&lt;\/th&gt;\r\n            &lt;th&gt;Salary&lt;\/th&gt;\r\n        &lt;\/tr&gt;\r\n    &lt;\/thead&gt;\r\n    &lt;tbody&gt;\r\n        &lt;tr&gt;\r\n            &lt;td&gt;Tiger Nixon&lt;\/td&gt;\r\n            &lt;td&gt;System Architect&lt;\/td&gt;\r\n            &lt;td&gt;Edinburgh&lt;\/td&gt;\r\n            &lt;td&gt;61&lt;\/td&gt;\r\n            &lt;td&gt;2011-04-25&lt;\/td&gt;\r\n            &lt;td&gt;$320,800&lt;\/td&gt;\r\n        &lt;\/tr&gt;\r\n        &lt;tr&gt;\r\n            &lt;td&gt;Garrett Winters&lt;\/td&gt;\r\n            &lt;td&gt;Accountant&lt;\/td&gt;\r\n            &lt;td&gt;Tokyo&lt;\/td&gt;\r\n            &lt;td&gt;63&lt;\/td&gt;\r\n            &lt;td&gt;2011-07-25&lt;\/td&gt;\r\n            &lt;td&gt;$170,750&lt;\/td&gt;\r\n        &lt;\/tr&gt;\r\n        &lt;tr&gt;\r\n            &lt;td&gt;Ashton Cox&lt;\/td&gt;\r\n            &lt;td&gt;Junior Technical Author&lt;\/td&gt;\r\n            &lt;td&gt;San Francisco&lt;\/td&gt;\r\n            &lt;td&gt;66&lt;\/td&gt;\r\n            &lt;td&gt;2009-01-12&lt;\/td&gt;\r\n            &lt;td&gt;$86,000&lt;\/td&gt;\r\n        &lt;\/tr&gt;\r\n        \/\/ Add more tr rows \r\n    &lt;\/tbody&gt;\r\n    &lt;tfoot&gt;\r\n        &lt;tr&gt;\r\n            &lt;th&gt;Name&lt;\/th&gt;\r\n            &lt;th&gt;Position&lt;\/th&gt;\r\n            &lt;th&gt;Office&lt;\/th&gt;\r\n            &lt;th&gt;Age&lt;\/th&gt;\r\n            &lt;th&gt;Start date&lt;\/th&gt;\r\n            &lt;th&gt;Salary&lt;\/th&gt;\r\n        &lt;\/tr&gt;\r\n    &lt;\/tfoot&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\n<p>The js script is convert normal html table to datatable is:<\/p>\n<p><code>new DataTable('#example');<\/code><\/p>\n<p>As you can see in screenshot-1 some components have been added by the jQuery datatable library to the Normal HTML table like<\/p>\n<ul>\n<li><strong>Show the Page Length dropdown<\/strong> at the left top of the table.<\/li>\n<li><strong>Search<\/strong><\/li>\n<li><strong>Sorting up-down<\/strong> arrows on each column of datatable.<\/li>\n<li><strong>Pagination<\/strong> at the end of the table.<\/li>\n<\/ul>\n<p>We can change the CSS\/style of these components in two ways:<\/p>\n<ul>\n<li><strong>With Manual Css<\/strong><\/li>\n<li><strong>With datatable Events like preDrawCallback<\/strong><\/li>\n<\/ul>\n<p><strong>1. Manual Css<\/strong><\/p>\n<p>Suppose we want to change the styling look (like rounded corners) of components like Page Length Dropdown and Search inputs as shown below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8379\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/unnamed-90-300x14.png\" alt=\"\" width=\"686\" height=\"32\" srcset=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/unnamed-90-300x14.png 300w, https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/unnamed-90.png 512w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/p>\n<p>Please add the following CSS for making UI of datatable components as shown in the above screenshot:<\/p>\n<pre><code>.dataTables_wrapper input, .dataTables_wrapper select {\r\n     border-radius: 20px !important;\r\n}\r\n\r\n.dataTables_wrapper input {\r\n     text-indent: 10px;\r\n}<\/code><\/pre>\n<p><strong>2. Datatable Events<\/strong><\/p>\n<p>We can either add custom CSS or via classes and append that class to inputs with datatable events like <strong>initComplete<\/strong> as shown below:<\/p>\n<pre><code>$('#example').dataTable({\r\n    initComplete: function() {\r\n        $('.dataTables_wrapper select, .dataTables_wrapper input').addClass('rounded-pill');\r\n        $('.dataTables_wrapper input').addClass('rounded-pill-indent');\r\n    }\r\n});<\/code><\/pre>\n<p>For small datasets and client-side datatables, the <strong>initComplete<\/strong> event works perfectly to change the UI as shown in the screenshot-2. But for large data records or for server-side datatable, initComplete event shows the UI change effect after 1-2 seconds, which means the user can see the rectangular inputs\/select initially for 1-2 seconds and then after 1-2 seconds, a new UI is displayed to the User.<\/p>\n<p><strong>initComplete<\/strong> event fires when all the data is loaded on the table.<br \/>\nAnother important event is the <strong>drawCallback<\/strong> event, which means everything like data and datatable components is drawn on html table selector. With this event also, new CSS is reflected after 1-2 seconds.<\/p>\n<p>So, the best event is the <strong>preDrawCallback<\/strong> event, which means CSS will be applied or classes will be appended to the datatable components before displaying to the user, which means the user can immediately see the CSS effects whenever datatable is loaded without seeing the original UI.<\/p>\n<pre><code>$('#example').dataTable({\r\n    preDrawCallback: function() {\r\n        $('.dataTables_wrapper select, .dataTables_wrapper input').addClass('rounded-pill');\r\n        $('.dataTables_wrapper input').addClass('rounded-pill-indent');\r\n    }\r\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In the website programming world, tables are used in a lot of places to show the list of records, for<\/p>\n","protected":false},"author":1,"featured_media":8382,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Change CSS\/style of datatable components.<\/title>\n<meta name=\"description\" content=\"Enhance Datatable Components with custom CSS and events like preDrawCallback for instant UI styling, search, sort, and pagination features.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change CSS\/style of datatable components.\" \/>\n<meta property=\"og:description\" content=\"Enhance Datatable Components with custom CSS and events like preDrawCallback for instant UI styling, search, sort, and pagination features.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-09T07:24:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-09T07:58:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/Memento-Pattern-in-Python-with-Examples-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"940\" \/>\n\t<meta property=\"og:image:height\" content=\"788\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Change CSS\/style of datatable components\",\"datePublished\":\"2025-09-09T07:24:18+00:00\",\"dateModified\":\"2025-09-09T07:58:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/\"},\"wordCount\":460,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/\",\"url\":\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/\",\"name\":\"Change CSS\/style of datatable components.\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2025-09-09T07:24:18+00:00\",\"dateModified\":\"2025-09-09T07:58:18+00:00\",\"description\":\"Enhance Datatable Components with custom CSS and events like preDrawCallback for instant UI styling, search, sort, and pagination features.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Change CSS\/style of datatable components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Change CSS\/style of datatable components.","description":"Enhance Datatable Components with custom CSS and events like preDrawCallback for instant UI styling, search, sort, and pagination features.","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:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/","og_locale":"en_US","og_type":"article","og_title":"Change CSS\/style of datatable components.","og_description":"Enhance Datatable Components with custom CSS and events like preDrawCallback for instant UI styling, search, sort, and pagination features.","og_url":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2025-09-09T07:24:18+00:00","article_modified_time":"2025-09-09T07:58:18+00:00","og_image":[{"width":940,"height":788,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/09\/Memento-Pattern-in-Python-with-Examples-1.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Change CSS\/style of datatable components","datePublished":"2025-09-09T07:24:18+00:00","dateModified":"2025-09-09T07:58:18+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/"},"wordCount":460,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/","url":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/","name":"Change CSS\/style of datatable components.","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2025-09-09T07:24:18+00:00","dateModified":"2025-09-09T07:58:18+00:00","description":"Enhance Datatable Components with custom CSS and events like preDrawCallback for instant UI styling, search, sort, and pagination features.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/change-css-style-of-datatable-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Change CSS\/style of datatable components"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":66,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8374"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=8374"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8374\/revisions"}],"predecessor-version":[{"id":8381,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8374\/revisions\/8381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/8382"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=8374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=8374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=8374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}