How to adapt Datatable into Tailwind

DataTables (https://datatables.net) is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. Currently, it’s the most used JS table for web applications and admin panels in the world.

I have used it for several years within Bootstrap, recently, I’m using Tailwind but I have some issue with Datatable CSS so I built a simple “adapter” to fix issues. Let me show it:

.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
color: #4a5568;
margin-left: 5px !important;
padding-left: .5rem !important;
padding-right: .9rem !important;
line-height: 1;
border-width: 2px;
border-radius: .25rem;
border: none !important;
background-color: #edf2f7;
background-position: right 0px center;
font-size: .8rem;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
background-color: #ebf4ff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
font-weight: 700;
border-radius: .25rem;
border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
font-weight: 700;
border-radius: .25rem;
background: #D3D3D3 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #000 !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
font-weight: 700;
border-radius: .25rem;
background: #D3D3D3 !important;
border: none !important;
}
table.dataTable.no-footer {
border-bottom: 1px solid #e2e8f0;
margin-top: 0.75em;
margin-bottom: 0.75em;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
background-color: #D3D3D3 !important;
}

--

--

--

I’m a software engineer based in Milan. Always looking to discover new development methods and technologies, I am an open source enthusiast and supporter.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SpringBoot with Multiple RabbitMQ brokers

[PDF] SQL Database Programming (Fifth Edition) FOR ANY DEVICE

Setup guide: Automate buy on Tradingview signals with gcp-cryptobot

Creating an Infrastructure of AWS using Terraform

My attempt to save money with AWS Elastic Beanstalk actually cost me more

Creating a GraphQL API with .NET5 and HotChocolate

Keycloak Authorization Service RBAC

Tars Labs Experiment #2 : Sending Tars bot data to Google Sheets via Zapier

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrea Pollastri

Andrea Pollastri

I’m a software engineer based in Milan. Always looking to discover new development methods and technologies, I am an open source enthusiast and supporter.

More from Medium

“METROCARD VIRTUAL PAYMENT SYSTEM

Isotope or Nuclide? A short guide

India’s First AI-Based Cooking Robot Nosh

Digital Dérive