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

  • 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

    Monday, August 17, 2020 7:26 AM

Answers

  • User1535942433 posted

    Hi Xing Zou,

    As far as I think,if you don't care of what methods,you could use tableHeadFixer plugin.

    Just like this:

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

    $("#example-basic").treetable( { expandable: true, initialState: "expanded", } ); $(".fixTable").tableHeadFixer({ "head": false, "left": 1 }); <!-- language: lang-css --> #parent { height: 200px; } 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> <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/tableHeadFixer.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" /> <link href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/assets/bootstrap-3.3.2/css/bootstrap.css" rel="stylesheet"/> <div id="parent"> <table id="example-basic" class="treetable fixTable" 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> </div>

    Result:

    Another way is you could use .

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 18, 2020 5:49 AM