Align column table header to the left and change sort arrow position from left to right

[kaede28]

I think the title is self-explanatory.

We have a system with multiple columns and the column header breaks in 2 or 3 lines (I told my employer to use few columns but you know how this works ...)

My employer would like to left-align the column text and replace the sort arrows from the left position to the right position, including the one that is opaque.

I tried to play with CSS to do it but I was not able to.

Any help would be appreciated, thank you.

[daniel-v]

I can give you a couple of pointers, as much as my time allows. Try this:

skawa-data-table thead th {
  clear: both;
  text-alignt: left !important;
}
skawa-data-table thead th.sort>a:before {
  display: none !important;
}
skawa-data-table thead th.sort>a:after {
  font-family: "Material Icons";
  opacity: .87;  
  content: "arrow_upwards";
  display: inline-block;
  float: right;
}

skawa-data-table thead th.sort.desc>a:after {
  content: "arrow_upwards";
}

Quick browser experiment shows that this is mostly what you want. I think everything you want to do can be done by css overrides.

You will want to override .sort-enabled>a:hover too for pretty effect on inactive sort columns, probably text-align: left.

This is the SCSS file you can look at to try to figure out what to override: https://github.com/skawa-universe/skawa_components/blob/master/skawa_material_components/lib/data_table/data_table.scss

Hope this helps.

[kaede28]

Thanks a lot, I really appreciate it. Em seg., 28 de set. de 2020 às 06:55, Daniel Varga-Hali < [email protected]> escreveu:

…

I can give you a couple of pointers, as much as my time allows. Try this: skawa-data-table thead th { clear: both; text-alignt: left !important; }skawa-data-table thead th.sort>a:before { display: none !important; }skawa-data-table thead th.sort>a:after { font-family: "Material Icons"; opacity: .87; content: "arrow_upwards"; display: inline-block; float: right; } skawa-data-table thead th.sort.desc>a:after { content: "arrow_upwards"; } Quick browser experiment shows that this is mostly what you want. I think everything you want to do can be done by css overrides. You will want to override .sort-enabled>a:hover too for pretty effect on inactive sort columns, probably text-align: left. This is the SCSS file you can look at to try to figure out what to override: https://github.com/skawa-universe/skawa_components/blob/master/skawa_material_components/lib/data_table/data_table.scss Hope this helps. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#69 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABSKWKVMLYCUCCUXFLVZIYTSIBMRHANCNFSM4R3YQFEQ> .

-- Daniel Vieira *Chief Executive Officer* Sattva Company