Tabulator: Column headers not keep the alignment rules

[Shu-Ji]

Describe the bug

Column headers do not keep the alignment rules:

You can see this on tabulator documentation, the [Fit To Width] section:

http://tabulator.info/examples/4.6#fittowidth

The header should align to 'center' here.

Tabulator Info

• Which version of Tabulator are you using?
  V4.6

Working Example
Please see the document of tabulator.

Expected behavior

Column Headers should use the 'hozAlign' attribute

Desktop (please complete the following information):

• OS: [macOS]
• Browser [chrome]
• Version [80]

[olifolkerd]

Hey @Shu-Ji

This is not a bug, this is intentional behavior, just because you want a columns data to be center aligned does not necessarily mean you want the title that way.

Most people seem to prefer there column headers to have a consistent alignment

Cheers

Oli :)

[Shu-Ji]

@olifolkerd
Thanks for replying. Then how can I make the header keep the same rule with 'his' columns?

[alesvaupotic]

Oli, I agree with you on most people prefering consistent alignment. But to keep it out of sync with cell aligment is far from consistent. I've been writing and selling business apps for over 36 years and have yet to see an app with that approach. Just sharing an article I stumbled upon

https://alistapart.com/article/web-typography-tables

This is not taking anything away from the work you have done here, just something to rethink maybe on adding a hozAlign to the header cells.

Kudos for the lib! :)

[olifolkerd]

Hi Alec,

Thanks for your feedback.

I'm happy to add a property to make it easier to change the alignment in
headers. But I will be keeping the existing hozAlign functionality as it is.

Cheers

Oli

On Sat, 30 May 2020, 14:51 Aleš Vaupotič, [e-mail] wrote:

Oli, I agree with you on most people prefering consistent alignment. But
to keep it out of sync with cell aligment is far from consistent. I've been
writing and selling business apps for over 36 years and have yet to see an
app with that approach. Just sharing an article I stumbled upon

https://alistapart.com/article/web-typography-tables

This is not taking anything away from the work you have done here, just
something to rethink maybe on adding a hozAlign to the header cells.

Kudos for the lib! :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/2813#issuecomment-636333892,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABUGBTESCK7IY5UY7M6GRT3RUEFPHANCNFSM4NILDAFA
.

[alesvaupotic]

Could not ask for more. It is only correct to have them separated and on developers disposal. In the mean time, to help @Shu-Ji out, I came up with CSS snippet which does the job for me, for example on amount field:

  [role="columnheader"][tabulator-field="amount"] * {
    text-align: right;
  }

[Shu-Ji]

@alesvaupotic Thanks a lot. My table is dynamic, so css cannot help here. My column names are dynamic too(column names are fetching from database, and which column to align right, is determined by my user's setting), I have to use js to make it work.

@olifolkerd And it maybe not a 'sync alignment with cell' property, but a propery to set every header's alignment.

Myabe something like the headerHozAlign below:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", hozAlign:"center", headerHozAlign: "left"},
    ],
});

[manuFL]

Totally agree with the headerHozAlign solution, it would definetly solve the problem and prevent messy workarounds with css.
Can we expect to see something like this implemented anytime soon?

Thank you very much in advance