Modern css setup and tailwindcss theme

[tikiatua]

We recently started using tabulator for various projects and really love the library.

This pull requests adds two features:

• Modern CSS styling with custom properties and nested CSS
• Tailwindcss theme with modern look, inspired by tailwindcssplus examples

What benefits does this change offer:
Styling tabulator for a specific project is currently somewhat cumbersome. With new CSS features, now in baseline support for modern browsers (https://web.dev/baseline) and the limited SASS-functionality actually used by tabulator, it is now possible to use native CSS without any preprocessor.

By replacing SASS variables with custom CSS properties, these variables can be very easily overridden in a specific project or tabulator instance, by just redefining the necessary variables in the respective scope. This makes adaptions for colors and font sizes easier. Details on how to use CSS custom properties can be found here: https://css-tricks.com/a-complete-guide-to-custom-properties/

Since many web developers are now using tailwindcss for styling, us included, we decided to also develop a tailwindcss theme, which is inspired by the table examples on https://tailwindcss.com/plus, with various enhancements.

A demo page is included in the theme folder and can be seen here:
https://codepen.io/saccilottor/pen/GgREMZb

Future enhancements:
In-depth styling of tabulator is still somewhat cumbersome due to the limited amount of variables defined and the often deep CSS nesting. This could be enhanced by exposing additional variables (i.e. text color for selected rows) and reducing the nesting for the CSS definitions.

Drawbacks of the pull request:
Older browsers, such as Internet Explorer, are not supported. This would lead to a duplication of work for CSS theming, if these should still be supported in the future.

[rathboma]

Dang! This is a huge PR, thanks for all the work you've put in here. Tabulator only supports modern browsers officially, so I don't think the lack of support for IE is a blocker at all.

I'm less familiar with this part of Tabulator, so I'll probably need @azmy60 to review.

@tikiatua Quick question -- does this break any of the existing themes?

[tikiatua]

@rathboma Thank you for your feedback.

The short answer:
It does not break any existing themes.

The longer explanation:
The existing themes use the scss variables defined in the file src/scss/tabulator.scss. All current themes build on this base definition.

To not break the themes, I created a separate folder src/css. The file src/css/tabulator.css corresponds to the src/scss/tabulator.scss file and the tailwind theme would be a first example of how a theme can be specified using the new css setup. The DOM structure of the tabulator elements is exactly the same as before.

After merging the pull request, we could gradually transition the existing themes from scss to modern css and then finally drop the scss dependency. I am happy to help with this.

It might also make sense to expand the css variables provided in the tabulator base css, to allow for more fine grained adaptation of the theme, without having to overwrite existing css classes.

[olifolkerd]

Thanks for all the hard work there. I would be concerned with moving away from the scss approach.

It makes things easier to manage and most of the other themes actually just pull on the base SCSS files from the external libraries and only apply adjustments for tabulator specifics.

Removing the CSS would then require a full custom build for each library rather than just a copy in of their SCSS themes

[tikiatua]

@olifolkerd Ah, yes. I see the problem. I think it should be possible to actually define the css custom properties using scss variables.

// file src/scss/tabulator.scss

// import the baseline styling
@import "../css/tabulator.css";

// define custom css properties based on scss variables
:root {
  --tabulator-backgroundColor: $backgroundColor default!;
  --tabulator-borderColor: $borderColor default!;
  // …
}

This way tabulator could be setup with modern css while still supporting the scss theming. Would you think this is a feasible approach? I am happy to try this out and see if this would work.

[Jordan-Hall]

@olifolkerd Ah, yes. I see the problem. I think it should be possible to actually define the css custom properties using scss variables.

You are correct. This is how i use scss for a long time. I think its worth making this change so nothing seriously broken. You example code is correct

[Jordan-Hall]

Shouldnt the border come from css var too? Ideally here you do not want to hard code theme & typeography settings

[Jordan-Hall]

There are a few instances in Tabulator where typography and theme settings are hard-coded. These should be moved to variables. To maintain backwards compatibility, use the second parameter in var(--tabulator-x, defaultValue) and set the hard-coded values as defaults.

[yardensachs]

im excited for this one

[floriankuek]

can't wait to check it out 🎉

[Giveback007]

What is the overal status of this? I would love to use the library for an upcoming project, and tailwind css is how we are building all our UIs.