Perfect-scrollbar: How to use perfect-scrollbar for a table?

Created on 21 Nov 2014 · 8Comments · Source: mdbootstrap/perfect-scrollbar

I would like to add the perfect-scrollbar to a table to allow the user vertical scrolling. I didn't find a example for this, so @noraesae is there a way and if so, how?

Source

julmot

Most helpful comment

I want to use the scrollbar over the whole <tbody>-tag. for Angular App.

Vaibhav2812 on 19 Feb 2019

👍2

All 8 comments

If you'd like to use it for <table> element, because table is not a proper container element, you may need to add a div wrapper. If you'd like to use it for <td>, I think you can use it as usual.

Thanks.

hatashiro on 2 Dec 2014

No I want to use the scrollbar over the whole <tbody>-tag.

julmot on 2 Dec 2014

I just added support for this plugin to my locked table header plugin. See:
http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/

mkoryak on 15 Jan 2015

👍1

@mkoryak What does "thead" mean?
Seems to be a cool plugin. However, I have multiple problems with perfect-scrollbar on mobile devices so maybe I'll take a look to your plugin but without perfect-scrollbar.

julmot on 15 Jan 2015

thead refers to the <thead> within the table. The thing that is floated.
You will probably have problems with my plugin on mobile devices also :P the dom manipulations and math require a fast cpu.

mkoryak on 15 Jan 2015

As I said, tbody and table are not typical container elements, and I can't change the fact as it's a browser behaviour. But you may find many answers to make it scroll, changing their display style. For example, this. It means, if you add display: block, you can make it work. I've added an example for table content, so if still interested, please check it out.

Cheers,

hatashiro on 5 Feb 2015

I want to use the scrollbar over the whole <tbody>-tag. for Angular App.

Vaibhav2812 on 19 Feb 2019

👍2

@julien julmot
It is very easy to use perfect scrollbar at prime ng/ any other table.
Use two tables

For table header
For table body

We need to take care of the width of the header columns and table body columns in case if we are having different width of the columns .

<div>
   <p-table>
      <ng-template pTemplate="header">
         <tr>
            <th class="width-40px">Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </ng-template>
   </p-table>
</div>
<perfect-scrollbar>
   <div style="max-height: 300px;">
      <p-table [value]="tableData">
         <ng-template pTemplate="body" let-tableData>
            <tr>
               <td class="width-40px">tableData.id</td>
               <td>tableData.firstName</td>
               <td>tableData.lastName</td>
            </tr>
         </ng-template>
      </p-table>
   </div>
</perfect-scrollbar>