CODEWITHSUNDEEP
jquerytabulator
IanJ
IanJ

Reputation: 3

How to change the sort arrow colour in Tabulator

I'm trying to change the sort arrow colour in the Tabulator column header. Tried all combinations of this:

.tabulator .tabulator-header .tabulator-col .tabulator-arrow

but still can't get the colour to change?

Upvotes: 0

Views: 1037

Answers (2)

Adrian Smith
Adrian Smith

Reputation: 1073

It seems in the latest version you need to include the border-top and border-bottom attributes or you get both the up-arrow and down-arrow at the same time.

Try these examples with primary colors to see how it works.

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
        background-color: red;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid green;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid blue;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
        border-top: 6px solid orange;
        border-bottom: none;
    }

Upvotes: 0

Oli Folkerd
Oli Folkerd

Reputation: 8398

It is because it is a CSS arrow so it is actually the border color you need to change, there are a couple of ways you can do this.

SCSS

If you want to use SCSS to update the actual source files then you can update a couple of variables in the tabulator.scss file and run gulp to get an updated version of the CSS file

//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;

CSS

If you just want to override the existing styles then you will need to tweak the colours in a few places (make sure you do this after you the included stylesheet):

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #666;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
  border-top: 6px solid #666;
}

The #666 and #bbb values relate back to the active and inactive values respectively

Upvotes: 1

Related Questions