Docs: How to use CSS with examples

[0o-de-lally]

I'm struggling to see how to override the default css. For example the filter search label 'Filter', how would I change the text color there? After a while I preferred to just install this as a private package so I could change the templates.

[aslagle]

You have to look at the CSS classes on the elements and create a CSS selector that matches what you want to modify.

For the filter label, it could be

.reactive-table-filter {
    color: red;
}

That's a simple example since the package doesn't actually specify a color, so you don't need to override anything. If you're trying to change something that's in the reactive-table CSS, you have to use a selector that's more specific than what's in the package.

For example, the package specifies a font size for the navigation elements:

.reactive-table-navigation .previous-page,
.reactive-table-navigation .next-page {
    font-size: 130%;
}

So if you wanted to increase it, you could put your table in a wrapper element with a specific id or class and include that in your selector.

<div id="tableId">{{ > reactiveTable settings=settings }}</div>

#tableId .reactive-table-navigation .previous-page,
#tableId .reactive-table-navigation .next-page {
    font-size: 160%;
}

Hope that helps. I'm hoping to make it easier to customize the templates at some point.