angular-horizontal-scroll-table
v1.0.4
Published
angular-horizontal-scroll-table is A simple solution for horizontal scroll in any table.
Downloads
26
Maintainers
Keywords
Readme
Angular Horizontal Scroll table
angular-horizontal-scroll-table is A simple solution for horizontal scroll in any table.
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.