Tailwind integration for FixedColumns with hover/stripe styles for light/dark modes

choc · April 9

Link to test case: https://live.datatables.net/nikiruke/3/edit?html,css,js,output
Description of problem:

I have integrated Tailwind for FixedColumns with hover style (with DT 1.13.8), as I haven't migrated to DT2 yet.
But I managed to create a test case based on https://datatables.net/examples/styling/tailwind.html. And fortunately it works.

The integration requires a change to the file (https://nightly.datatables.net/fixedcolumns/css/fixedColumns.dataTables.css), which by default creates the fixed column with either a white or black background.

What I would like to achieve is: scrollX+fixedColumns+hover+stripe+support for light/dark modes
(see the fixedColumn effect in https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html)
(see the hover effect in https://datatables.net/examples/basic_init/scroll_x.html which supports dark mode as well)

Result:
<html class="">

Works for both Start and end fixed columns

One issue with FixedColumns I found so far:
The width of the FixedColumn header is narrower until it is clicked on

One thing to be aware of:
Since in https://cdn.datatables.net/2.0.3/js/dataTables.tailwindcss.js You use a semi-transparent background for the thead cells and tbody cells. To bring the FixedColumn visually to the top, I need to convert the rgba code to rgb.

One last question:
How can I add custom classes to the tbody itself?

    thead: {
        row: 'border-b border-gray-100 dark:border-gray-700/50',
        cell: 'px-3 py-4 text-gray-900 bg-gray-100/75 font-semibold text-left dark:text-gray-50 dark:bg-gray-700/25'
    },
    tbody: {
        row: 'even:bg-gray-50 dark:even:bg-gray-900/50',
        cell: 'p-3'
    },

I want to add class to tbody, For thead, thead.row:'...' corresponds to the thead class, but tbody.row: '...' corresponds to the class of all tr inside tbody not tbody itself.

Thank you!

The next integration I would like to implement is Search Builder, but that would take some time as I haven't migrate to DT2.

But thanks for the great work!

allan · April 10

Hi,

I haven't yet attempted to integrate Tailwind with any of the DataTables extensions. Only DataTables core has a Tailwind integration thus far.

I would welcome pull requests to the extensions to add such support.

How can I add custom classes to the tbody itself?

There is no option for that using the .ext.classes object at this time. You'd need to add them to the tbody directly (in the HTML or using Javascript). What class do you want to add to the tbody?

Allan

choc · April 10

Hi Allan,

Originally I was thinking of using group-hover to make the hover style that looks like below:

tbody: {
row: 'even:bg-gray-50 dark:even:bg-gray-900/50 group ',
cell: 'p-3 group-hover:shadow-[inset_0_0_0_9999px_rgba(0,0,0,0.1)] dark:group-hover:shadow-[inset_0_0_0_9999px_rgba(255,255,255,0.1)]'
},

this will only work when give tr a group class (in this case, add group class to tbody.row). That works, but every td class will have these long class names whihc I don't like. Then I found out that since Tailwind v3.4, it supports the use of * variants to style children from the parent using utility classes.

Therefore, I use the code below instead to make the class cleaner and avoid duplicating the class name:

tbody: {
row: 'even:bg-gray-50 dark:even:bg-gray-900/50 *:hover:shadow-[inset_0_0_0_9999px_rgba(0,0,0,0.1)] *:dark:hover:shadow-[inset_0_0_0_9999px_rgba(255,255,255,0.1)]',
cell: 'p-3'
},

To be honest, I haven't added a class to tbody yet but out of curiosity and possible future use of tbody or other elements inside the table (using the .ext.classes object to fully play around with the class names). I would like to see all elements accessible with.

A very helpful and much-needed option for me is the dynamic ScrollY height scrollY! I want to add custom class names (e.g., height) to the div element where the class dataTables_scrollBody exists.

see: Scroll - vertical, dynamic height

whihc use

scrollY: '50vh'

for custom responsive height, somethig like:

<div class="dataTables_scrollBody h-[300px] sm:h-[50vh]">

would be one of the possible uses I can think of that changes to a fixed height for small screens

This can be solved using javascript of course, For example, one solution I found in this [thread] (https://datatables.net/forums/discussion/63384/make-scrolly-dynamic) using $(window).resize event. But here I prefer to use CSS if possible.

This works in normal cases, but when I tried to implement Fullscreen function to the table (more precisely, make the Card containing the table fullscreened, see below), my custom scrollY value cuase problem here:

scrollY: 'calc(100dvh - 60px - 1rem - 40.91px - 2rem  - 15dvh - 2rem - 2.5rem - 0.5rem - 3.5rem - 0.5rem - 2.5rem - 2rem - 2rem)',

Here, each value means the height of a single component such as navbar, card header, textarea, search filter, table header, table information, paddings, etc.

which make the dataTables_scrollBody to :

<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%; max-height: calc(-100.91px - 18.5rem + 100dvh - 15dvh); height: calc(-100.91px - 18.5rem + 100dvh - 15dvh);">

Live demo GIF in my website:

You will see that there is extra white space at the bottom because the added fixed heights in scrollY.

The solution I came up with is to use the pseudo class [:fullscreen] (https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen) to the class of the element to fullscreened and target the div element where the class dataTables_scrollBody exists to change its height (which is set by scrollY at init.

For example, in order to remove the extra white space (from the fixed navbar height at top and the paddings around the Card) when in fullscreen mode.

Below is the working code with pseudo class fullscreen set in the tailwind.config.js using addVariant:

<div id="card" class="[&_.dataTables\_scrollBody]:fullscreen:!max-h-[none] 
 [&_.dataTables\_scrollBody]:fullscreen:!h-[calc(100dvh-1rem-40.91px-2rem-15dvh-2rem-2.5rem-0.5rem-3.5rem-0.5rem-2.5rem-2rem)] w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-600">
<table id="example" class="hover" style="width: 100%"></table>
</div>

The [&_.dataTables\_scrollBody]:fullscreen:!max-h-[none] is used to override the max-height property or use js directly:

$(".dataTables_scrollBody").css("max-height", "");

Live demo GIF result of Fullscreen mode Tailwind implementation:

(Please ignore the image sticking due to poor GIF recorder)

The fullscreen example I showed is off topic, but the ability to access the object class would be very helpful to fully utilize the Tailwind class for designing the tables instead of writing CSS.

Best regards

allan · April 11

Thanks for the write up!

I had actually thought I'd included an option to set a class on the thead, tbody and tfoot, but I think I tried it during development of 2.0 and then removed it thinking that there was no use for it. Any CSS targetting it could use a trivial selector. Of course that doesn't really work in Tailwind, so if there is a specific use case for it, I can look at adding that in.

Regarding dataTables_scrollBody - that is a DataTables 1.x class. dt-scroll-body is the one for 2.x and it can be controlled with the scrolling.body property of the classes object.

Regards,
Allan

Tailwind integration for FixedColumns with hover/stripe styles for light/dark modes

Tailwind integration for FixedColumns with hover/stripe styles for light/dark modes

Answers

Howdy, Stranger!

Categories

DataTables

Tailwind integration for FixedColumns with hover/stripe styles for light/dark modes

Tailwind integration for FixedColumns with hover/stripe styles for light/dark modes

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables