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

Memento Design Pattern

Grief, Empty Nest, and My Relentless Longing for the Past

Firing the Butler (Migrating from Jenkins to Bitbucket Pipelines)

Testing Spark Applications

9 Paid Technical Writing Programs for Developers

7th Launchpad — Agora

What to do after you do a Python course?

Brisqi — Offline first personal Kanban app released

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

5 Style Tips for Plus Size Women

Self hosted Email vs Gmail

AmyDewFan27 Flashback: Former 2-Time XFINITY Series champ of Tyler Reddick’s Richmond scheme from…

Asbury dreaming