Centred table headers pushed left when column sortable == true

[dev-lep]

Vuestic-ui version: 1.9.10

Centred table headers pushed left when column sortable == true

When sort icons are added to a column header with thAlign set to 'center', header text is pushed left.

Reproduction

Demo

[m0ksem]

Hi. Thanks for the report.

How do you expect this to be fixed? Obviously, it is because header have sort icon on the right - it is extra 14px.

You can add padding on the left to compensate this size. Having 10 default padding + 14px to compensate icon size.

      {
 		key: 'SortableHeader',
        label: "Sortable Header",
        thAlign: "center",
        tdAlign: "center",
        thStyle: 'padding-left: 24px',
        sortable: true
      }

or add padding-left in every td, just like if there was an icon.

      {
 		key: 'SortableHeader',
        label: "Sortable Header",
        thAlign: "center",
        tdAlign: "center",
        tdStyle: 'padding-right: 24px',
        sortable: true
      }

We could make sort icons position absolute, but it will cause overflows...

Do you have a solution for this, expect quick fixes I provided?

[dev-lep]

Hi @m0ksem, thanks for your quick fixes, I will definitely use them. Sorry, I am not advanced in my knowledge enough to supply a solution, but I will set myself a task to look into it and perhaps gain some more experience.

[m0ksem]

Hi @m0ksem, thanks for your quick fixes, I will definitely use them. Sorry, I am not advanced in my knowledge enough to supply a solution, but I will set myself a task to look into it and perhaps gain some more experience.

Let's see if padding-left solution is helpful.