Tabulator: Bootstrap 4 Theme HeaderFilter Inputs

[cgountanis]

Why are the inputs not simply class="form-control" when using BS4 theme? Am I missing something looks much better. Suggestions on the most standard way to fix that?

[olifolkerd]

The styling is purely CSS based on the standard Tabulator styles.

The tabulator JS has no idea what theme is being applied, so custom classes cannot be applied to elements based on the theme being used by the user. You will notice all classes that tabulator adds to DOM nodes are prefixed with "tabulator-" to ensure there is no undesired conflict with styles used outside of the table.

Any of the standard bootstrap table styling classes such as table-dark are applied by the developer, not automatically by Tabulator

The extra bootstrap classes are mapped on to tabulator styles through a variables file in the tabulator SCSS.

If you feel that the header filters could be styled to better match the bootstrap theme then i would welcome a PR on the style sheet with proposed updates.

Cheers

Oli :)

[takuy]

I think I fix this in my tables using some Javascript to insert the class
during table creation.

[takuy]

I do this in dataLoaded() for some reason.

dataLoaded: function() {
  this.element.querySelectorAll(".tabulator-header-filter input").forEach(function(elem) { 
    elem.classList.add("form-control"); 
    elem.classList.add("input-sm"); 
  }); 
},

[cgountanis]

I do this in dataLoaded() for some reason.

dataLoaded: function() {
  this.element.querySelectorAll(".tabulator-header-filter input").forEach(function(elem) { 
    elem.classList.add("form-control"); 
    elem.classList.add("input-sm"); 
  }); 
},

Thanks by the way. This worked like a charm. Still not 100% sure why the bootstrap4 theme doesn't automatically use form-control on header filter inputs. I would think this would be time well spent and improve the visuals of the filters by leaps and bounds. If I get some time I will take a look and see what I can do about a SCSS PR.

[olifolkerd]

Hey @cgountanis

I am doing a patch release this evening, if you or @takuy got a PR in today i would be happy to include it in that, other wise it will be included in the 4.7 release in a few weeks.

If you are going to make a PR please make sure that any colours and sizes pull in from the variables.scss as this is copied straight from the bootstrap source.

Cheers

Oli :)

[cgountanis]

I want to help if I can free up some time, being it's mother's day in the US but I am not an expert at SCSS. Did not know if it was easy to reference the BS4 class "form-control" when using the BS4 theme and using headerFilter (as shown in the screen shot above, it looks nice).

Seems like LESS can attach an existing class to say, tabulator-header-filter input but that does not work in regular CSS. Can SCSS do that? Anyway thanks for the time and efforts. Loving the LIB, will differently donate if used in test/production.

[olifolkerd]

Hey @cgountanis

No additional classes be attached to Tabulator. that would be a violation of the way it isolates its classes from everything else.

You should map the styles from a bootstrap form control onto the tabulator classes for the header elements, which is the way all other theming has been done.

Dont worry about rushing it out today, im probs gonna publish the release in an hour or so. it can be included in the 4.7 release in a few weeks, which will give you time to get to grips with how the SCSS works.

Cheers

Oli :)

[cgountanis]

I do this in dataLoaded() for some reason.

dataLoaded: function() {
  this.element.querySelectorAll(".tabulator-header-filter input").forEach(function(elem) { 
    elem.classList.add("form-control"); 
    elem.classList.add("input-sm"); 
  }); 
},

@takuy By the way input-sm should be form-control-sm.

elem.classList.add("form-control");
elem.classList.add("form-control-sm");

[cgountanis]

@olifolkerd I tried to use extend but I am sure that is not up to par since it requires @import "bootstrap"; (might want to look into @use). I have no clue what I am doing in SCSS (SASS). Recomendations? The last thing you want to do is copy all the CSS over in case BS4 changes. Seems like this is the best route?

Added to tabulator_bootstrap4.scss (line:212ish)

.tabulator-header-filter input{
    @extend .form-control !optional;
    @extend .form-control-sm !optional;
}

[olifolkerd]

Hey @cgountanis

For sake of clarity of the styling of the element i prefer the properties of the class to be explicitly set in that class rather than pulled in from third party libraries as there is no guarantee that they wont conflict with one another.

Also extending in that way will only work if the classes are already defined when the SCSS is compiled, as the tabulator library does not contain any of the bootstrap classes then they arnt defined in the first place to be used in the extend.

All you need to do is look at the class definition in the bootstrap source and pull over an key properties like border, border radius and padding. these will likely be set against variables, which you need to make sure are in the variables4.scss

Cheers

Oli :)

[cgountanis]

I am just doing this for now.

$(".tabulator-header-filter input").addClass("form-control");
$(".tabulator-header-filter input").addClass("form-control-sm");

Funny thing though table.clearHeaderFilter(); drops them. So I have to reissue the addClass after reset as well.

[olifolkerd]

@cgountanis It will do because it rebuilds the header when that function is called. that is why the SCSS needs to be update to include the styling

[olifolkerd]

I have pushed this styling update onto the 4.8 branch which should be released in a weeks time.

Cheers

Oli :)

[cgountanis]

Great so soon on next release no need to do the add class routines?

[olifolkerd]

No need to do anything, it will just work

[cgountanis]

Finally got to test this using v4.8.2. Works great!