Breaking News: Grepper is joining You.com. Read the official announcement!

Tailwind datatable

Rasetz answered on August 7, 2023 Popularity 9/10 Helpfulness 3/10

answer Tailwind datatable

Tailwind datatable

Comment

CSS:
		#DataTables_Table_0_wrapper .row:first-child
        {
            justify-content: space-between;
            display: flex;
            margin: 15px;
        }

        #DataTables_Table_0_length .custom-select
        {
            --tw-bg-opacity: 1;
            background-color: rgb(249 250 251 / var(--tw-bg-opacity));
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgb(209 213 219 / var(--tw-border-opacity));
            --tw-text-opacity: 1;
            color: rgb(17 24 39 / var(--tw-text-opacity));
            font-size: 0.875rem/* 14px */;
            line-height: 1.25rem/* 20px */;
            border-radius: 0.5rem/* 8px */;
            padding: 10px 20px;
        }

        #DataTables_Table_0_length .custom-select:focus
        {
            --tw-ring-opacity: 1;
            --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
            --tw-border-opacity: 1;
            border-color: rgb(99 102 241 / var(--tw-border-opacity));
        }

        #DataTables_Table_0_info
        {
            display: flex;
        }

        #DataTables_Table_0_paginate ul
        {
            display: flex;
        }

        #DataTables_Table_0_paginate ul li
        {
            margin: 5px;
        }

        #DataTables_Table_0_filter .form-control
        {
            --tw-bg-opacity: 1;
            background-color: rgb(249 250 251 / var(--tw-bg-opacity));
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgb(209 213 219 / var(--tw-border-opacity));
            --tw-text-opacity: 1;
            color: rgb(17 24 39 / var(--tw-text-opacity));
            font-size: 0.875rem/* 14px */;
            line-height: 1.25rem/* 20px */;
            border-radius: 0.5rem/* 8px */;
            padding: 0.625rem/* 10px */;
        }

        #DataTables_Table_0_filter .form-control:focus
        {
            --tw-ring-opacity: 1;
            --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
            --tw-border-opacity: 1;
            border-color: rgb(99 102 241 / var(--tw-border-opacity));
        }

        #DataTables_Table_0_wrapper .row:last-child
        {
            padding: 10px;
            margin: 15px;
            justify-content: space-between;
            display: flex;
        }

        .dataTables_empty
        {
            text-align: center;
            padding: 30px;
        }

        @media (max-width: 400px)
        {
            .dataTables_info
            {
                display: none !important;
            }

            #DataTables_Table_0_wrapper .row:last-child
            {
                justify-content: center !important;
            }
        }
        
 js: 
 	<!-- Datatable  SCRIPT -->
    <script type="text/javascript"
        src="https://cdn.datatables.net/v/bs4/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/datatables.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $('.table_main').DataTable({  //add this class to your table
              language: {
              'url': '//cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json' //Translation to spanish, delete if you dont need it
            }
          });
        })
    </script>

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: datatable whatever

Link to this answer
Share Copy Link

Contributed on Aug 07 2023

Rasetz

0 Answers Avg Quality 2/10

Tailwind datatable

Contents

More Related Answers

Tailwind datatable

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.