React-bootstrap-table2: Vertical headers support

[eylonronen]

Hi, can you please add support for vertical headers(having the headers bar on the left side of the table)?
You can read more of how to implement it here:
Vertical heading in html table:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers

Bootstrap:
https://github.com/twbs/bootstrap/issues/476

Thank you very much :)

[AllenFang]

@eylonronen I will, but this is much minor feature to me currently, so PR is welcome

[masihtamsoy]

Hi, @AllenFang want to work on this, but I'm not sure what process to follow as it would be my first participation to a project.

Could you give me some guidelines?

[AllenFang]

@masihtamsoy I think the the first step is setup the env to develop, please check this

For the vertical header table, I think the mainly changes will be in the react-bootstrap-table-next modules, the source is right there: https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2

I didn't start to think how to implement this feature, so I'm open for this patch. Mostly, i'm much concern your design. But I think this feature is not like row selection, expansion or filter etc, instead it much like a UI re-arrange, so it' maybe will not involve too much functionality changes.

That's it. Feel free to discuss with me if you have any questions, thank you @masihtamsoy 🇮🇳

[masihtamsoy]

I went to this file,
https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2/src/bootstrap-table.js .

<BootstrapTable /> return's table structure.

<table>
  <thead>
      <tr>
         <th></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
       <tr>
          <td></td>
          <td></td>
       </tr>
   </tbody>
</table>

It is difficult to transpose above mentioned table because of <thead /> and <tbody /> convention (Can you provide any vertical header struture using them, if any? or, use jQuery? or, use CSS inverts?)

If we can change <BootstrapTable /> component's render() function to return <table> (without <thead /> and <tbody />) , transposing it to vertical header as mentioned in https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers would be easier. But this will cost us Bootstrap UI breaks.

How should I proceed?

[AllenFang]

@masihtamsoy firstly, I can accept use CSS or native JS to solve this problem. but jQuery is not in my radar.

transposing it to vertical header as mentioned in https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers would be easier. But this will cost us Bootstrap UI breaks.

Yes, correct, the bootstrap UI must broken.

I'm not sure if we can implement this via media query: https://css-tricks.com/responsive-data-tables/
There's a online example: https://codepen.io/myasseen/pen/JdPNzv

Above case, we dont change the layout(tr, td) and also can keep the head and body.

[masihtamsoy]

Hi, sorry for delay, was caught up with work.

I looked into some table transpose structure. Can you please check and confirm, can I use table with thead example's transposed structure?https://rawgit.com/kmclaugh/Transpose_Table/master/transpose_table.html

I will use native JS and CSS to get it done.

[AllenFang]

@masihtamsoy sure, I will look into on it, thanks

[modusV]

Hey @masihtamsoy! Did you manage to implement this feature? I would love to use it

[dobpp]

Is there any update on this ticket?