Search code examples
jquery-uitwitter-bootstrap-3tablesorter

Change position of tablesorter icon at runtime

I'm using the jQueryUI tablesorter plugin with Bootstrap. I have a table with one column right-aligned. I'd like the sort icon for that column to appear on the left side of the header as opposed to the right side. How would I go about doing this?

Solution

  • You just need your custom css to override (have higher specificity) the bootstrap theme definitions.

    Since no HTML was provided, this demo right aligns all the tbody content of the "English" column and left aligns the icon, of the cell in the thead.

    tr td:nth-child(4) {
    text-align: right;
}
.tablesorter-bootstrap .tablesorter-header:nth-child(4) .tablesorter-header-inner {
    padding-right: 4px;
    padding-left: 18px;
}
.tablesorter-bootstrap .tablesorter-header:nth-child(4) i.tablesorter-icon {
    left: 2px;
    right: auto;
}