Search

p>The DataTables integration with Tailwind CSS is still in

I've been using Tailwind for a little while now and really prefer it. I've used most frameworks (Bootstrap, Foundation and Bulma) but Tailwind is smartly designed and would like to see a Datatables implementation.

DataTables core integration with Tailwind, I'm not currently working

Hey everyone, We have recently built a Tailwind version of the datatables plugin with Flowbite. Includes all major features like searching, filtering, sorting, pagination, and more. Cheers!

Link to test case: https://live.datatables.net/fizuwupi/12/edit Debugger code (debug.datatables.net): irixub Description of problem: I am using tailwind css, I do not know why the column Name overlap with column External ID

problem: I have integrated Tailwind for FixedColumns with hover

Has anyone successfully used Datatables in combination with Tailwind CSS? or seen that anywhere?

Please, is there support for Tailwind CSS styling?

Description of problem: I have created a datatable with a custom "action" column. In that manual "action" slot, I create a button that when clicked, shows a div. This is my DataTable code: <DataTable ref="table" :columns="columns" :data="data" :options="options" class="display"> <template #action="props"> <button id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" type="button">Click me</button> <div id="dropdownDots" class="z-10 hidden bg-white">Works</div> </template> </DataTable> When I click on the rendered button, nothing happens. To make sure that the "click me" button works without the DataTable, I moved the code (button and div) outside of the DataTable declaration. When I click the "click me" button, the div shows.... so I know the functionality works outside the Datatable. Any thoughts on how I can carry this functionality to the cell of the Datatable? Thanks. Note: the "Click Me" button is rendered using Flowbite (https://flowbite.com/docs/components/buttons/)

Hi Allan, Thank you for the update. I add the query string and your test case looks good to me in Chrome and Firefox: https://live.datatables.net/bilecufu/1/edit?html,js,output I also test it with FixedColumn for this thread: https://live.datatables.net/yaroyala/57/edit?html,js,output It looks good for the first page, after going to page 2, page 3, the misalignment issue still occurs. Sometimes the header is shorter, sometimes wider than the table cell. I further tested it without FixedColumn to just check for pagination: https://live.datatables.net/gakuzisi/1/edit?html,js,output My observation is that when the table is not horizontally scrollable, it looks fine when changing the pages. But as long as horizontal scrollbar shows, tiny misalignment shows. But it is less obvious than using FixedColumn. So, in general, the misalignment issue now only occurs when pagination with a horizontal scroll bar is present. If there is no pagination, everything is fine regardless of whether there is a horizontal scroll bar or not.

but it's not got Tailwind installed as with my