Multiple <tbody> elements to define rows

[Bill]

Hi there. It looks like the Kendo Grid generates its own tbody element. I have a situation where I'd like to use multiple tbody elements to define a row. W3C says using multiple tbody tags within a table is the correct way to do this. Here is their example: https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-headers-spanning-multiple-rows-or-columns

Is there a way to accomplish this type of thing?

[Krissy]

Hello Bill,

Thank you for providing the link. 

You can refer to our documentation of the Grid props and see the cellRender and rowRender functions that allow the rows and cells' appearances to be customized: 

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-cellrender 

You can also check out the demo on the page below, it achieves a similar rendering to what is done on the W3C page:
https://www.telerik.com/kendo-react-ui/knowledge-base/merge-row-in-the-grid/ 

This demo shows how the rowSpan property can be used to achieve the visual grouping of the items by the field 'Discontinued'.

Hope this information proves to be useful for your application.

Regards,
Krissy
Progress Telerik

[Bill]

Thanks Krissy.

I already have a solution similar to your example. While visually it achieves what I need, there is no semantic grouping and accessibility may suffer.

[Stefan]

Hello, Bill,

Could you please clarify what specifically is needed by to component in order to achieve the required results?

Both the row and the cell render provide full access to rendering each element of the Grid and allow the developer to modify the structure.

Also, we do have a grouping feature that the accessible, the UX is different but it provides a visual groping that is built-in and accessible:

https://www.telerik.com/kendo-react-ui/components/grid/grouping/

 

Regards,
Stefan
Progress Telerik

[Bill]

Hi Stefan,

If you look at the W3C recommendation, they use multiple tbody elements which I don't believe is possible.

I am able to get the desired results visually but along with the potential accessibility issues I can't target the group on hover with css.

Thanks for your help.

 

[Stefan]

Hello, Bill,

Thank you for the extra details.

We have discussed this with the entire team and come to the conclusion that this will be a nice new enchantment as a new grouping mode for the Grid.

As we are planning the tasks based on the community interest, please log it here and we will plan it accordingly:

https://feedback.telerik.com/kendo-react-ui

Regards,
Stefan
Progress Telerik