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="">
<html class="dark">
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!