Table - customHeaderLabels - Further Customisation

[daiseybtw]

Background

When creating tables, sometimes each custom header label needs slightly different styling, such as text alignment.

Enhancement request: Currently when providing custom header labels, we get a table looking like the following:

It would be fantastic if we could provide either class names, custom css etc on a per header label so that we can achieve an outcome like this (in this case, header label 3 is text-aligned to the right):

We will add more attributes to provide the ability to add these classNames:

customTheadClassName ={['class1', 'class2', 'class3']}
customTrClassName ={['class1', 'class2', 'class3']}
customThClassName ={['class1', 'class2', 'class3']}
customTbodyClassName ={['class1', 'class2', 'class3']}
customTdClassName ={['class1', 'class2', 'class3']}

Please follow these steps to create your branch:

git checkout release/1.1.0
git pull
git checkout -b 'feature/custom-header-labels-improvements'

[daniele-zurico]

Are you proposing to have something like this? :

<Table
  dataSource={ELEMENT_DATA}
  customTheadClassName ={['class1', 'class2', 'class3']}
  customTrClassName ={['class1', 'class2', 'class3']}
 customThClassName ={['class1', 'class2', 'class3']}
 customTbodyClassName ={['class1', 'class2', 'class3']}
 customTdClassName ={['class1', 'class2', 'class3']}

[daiseybtw]

I would say we could improve CustomHeaderLabel[], so it would be something like:

...
label: 'foo'
customClass: 'bar'

and then wrapping the header label in customClass

[daniele-zurico]

the question will be if your header on the last column is aligned on the right hand side, you don't want as well to align the body?

[daiseybtw]

You could and it would be another good addition, in my use case we are providing a custom element into the last column body so we apply styles that way.

[daniele-zurico]

but this is why I was proposing the following way:

customTheadClassName ={['class1', 'class2', 'class3']}
customTrClassName ={['class1', 'class2', 'class3']}
customThClassName ={['class1', 'class2', 'class3']}
customTbodyClassName ={['class1', 'class2', 'class3']}
customTdClassName ={['class1', 'class2', 'class3']}

it will give you the freedom to do what you want with them