How to fix the first coulmn when scrolling table horizontally using jquery-treetable?

Question

User-1764593085 posted

I am using jquery-treetable in my angularjs project. 

However, I want to fix first column(or the first two columns) when I scroll data horizontally.I find some other threads which suggest to use two tables,since I am using this plugin, I do not think that will be solution.

Below is a demo which I want to fix the first column when scroll.(in my project, the data is displayed using `ng-repeat` but it has no impact for the question I think).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

     $("#example-basic").treetable(
                            { 
                                expandable: true ,
                                initialState:"expanded",                        
                            } 
                        );

<!-- language: lang-css -->

    thead {
                   text-align: center;
               }
       
               th {
                   text-align: center;
                   width:200px;
               }
       
               td {
                   text-align: center;
                   width:200px
               }
       

             

              
                table thead, tbody tr {
                    display:table;
                    width:100%;
                    table-layout:fixed;
                
                }

<!-- language: lang-html -->



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>

    <link href="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet"/>

    <table id="example-basic" class="treetable" style="width:100%;overflow-x:auto;">
            <caption>Basic jQuery treetable Example</caption>
            <thead>
              <tr>
                <th>Tree column</th>
                <th>Additional data</th>
                <th>Additional data</th>
                <th>Additional data</th>
                <th>Additional data</th>
              </tr>
            </thead>
            <tbody>
              <tr data-tt-id="1" class="branch expanded">
                <td><span class="indenter" style="padding-left: 0px;"><a href="#" title="Collapse">&nbsp;</a></span>Node 1: Click on the icon in front of me to expand this branch.</td>
                <td>I live in the second column.</td>
                <td>I live in the second column.</td>
                <td>I live in the second column.</td>
                <td >I live in the second column.</td>
              </tr>
              <tr data-tt-id="1.1" data-tt-parent-id="1" class="branch expanded" style="">
                <td><span class="indenter" style="padding-left: 19px;"><a href="#" title="Collapse">&nbsp;</a></span>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
                <td>Interesting.</td>
                <td>Interesting.</td>
                <td>Interesting.</td>
                <td>Interesting.</td>
              </tr>
              <tr data-tt-id="1.1.1" data-tt-parent-id="1.1" class="leaf collapsed" style="">
                <td><span class="indenter" style="padding-left: 38px;"></span>Node 1.1.1: I am part of the tree too!</td>
                <td>That's it!</td>
                <td>That's it!</td>
                <td>That's it!</td>
                <td>That's it!</td>
              </tr>
              <tr data-tt-id="2" class="leaf collapsed">
                <td><span class="indenter" style="padding-left: 0px;"></span>Node 2: I am another root node, but without children</td>
                <td>Hurray!</td>
                <td>Hurray!</td>
                <td>Hurray!</td>
                <td>Hurray!</td>
              </tr>
            </tbody>
          </table>

<!-- end snippet -->

See my so thread: https://stackoverflow.com/questions/63445371/how-to-fix-the-first-coulmn-when-scrolling-table-horizontally-using-jquery-treet