angular-horizontal-scroll-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Angular Horizontal Scroll table

    angular-horizontal-scroll-table is A simple solution for horizontal scroll in any table.

    Live Demo "StackBlitz ⚡️"

    Installation

    Install the npm package.

      npm i angular-horizontal-scroll-table
    

    Import module:

      import { NgHorizontalScrollModule } from 'angular-horizontal-scroll-table';
    
      @NgModule({
          imports: [
          NgHorizontalScrollModule
          .....
          ]
      })

    Usage

    • add the directive selector (bassHorizontalScroll) on div that have the table, and give it id of your table, thead and thead tr. ex:
      <div class="overflow-auto p-2 " bassHorizontalScroll [tableId]="'cutomTableId'"
        [tableTHeadId]="'cutomTableTHeadId'" [tableTHeadTrId]="'cutomTableTHeadTrId'"
         [pageUpdated]="pageUpdated" [pageDestored]="pageDestored">
        <table id="cutomTableId" class="table table-striped table-bordered table-hover">
          <thead id="cutomTableTHeadId">
            <tr id="cutomTableTHeadTrId">
              <th scope="col" class="heightAndwidth thStyles">Email</th>
              <th scope="col" class="heightAndwidth thStyles">Name</th>
            </tr>
          </thead>
          <tbody id="cutomTableTBodyId">
            <tr *ngFor="let item of dataList">
              <td class="heightAndwidth">{{item.email}}</td>
              <td class="heightAndwidth">{{item.name}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    • pageUpdated input you can toggle it when u want to resize the the bar. like the table columns changed.
    this.pageUpdated = !this.pageUpdated;

    CSS configurations

    • this styles to change scrollbar shape, not important if you like the default style.
     #BassScrollBar::-webkit-scrollbar,
    .BassBarContainer::-webkit-scrollbar {
      width: 10px;
      height: 17px;
      background: transparent;
    }
    
    #BassScrollBar::-webkit-scrollbar-thumb,
    .BassBarContainer::-webkit-scrollbar-thumb {
      background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.44, rgb(0 0 0 / 40%)),
        color-stop(0.72, rgb(0 0 0 / 40%)),
        color-stop(0.86, rgb(0 0 0 / 40%))
      );
      border: #b0acac 1px solid;
      border-radius: 5px;
    }
    #BassScrollBar::-webkit-scrollbar-thumb:hover,
    .BassBarContainer::-webkit-scrollbar-thumb:hover {
      background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.44, rgb(0 0 0 / 67%)),
        color-stop(0.72, rgb(0 0 0 / 67%)),
        color-stop(0.86, rgb(0 0 0 / 67%))
      );
    }

    Directive options ( inputs )

    • tableId : give it your table Id.
    • tableTHeadId : give it your table thead Id.
    • tableTBodyId : give it your table tbody Id.
    • pageUpdated : toggle it when tab changed, or u want to resize the header again.
    • pageDestored : toggle it when tab destored.

    Install

    npm i angular-horizontal-scroll-table

    DownloadsWeekly Downloads

    3

    Version

    1.0.4

    License

    none

    Unpacked Size

    80 kB

    Total Files

    14

    Last publish

    Collaborators

    • thebassemnabil