brianpooe/devtools-bp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #26 from brianpooe/feature/ngx-responsive-table

Browse source 
Feature/ngx responsive table
This commit is contained in:
Brian Pooe 2023-08-05 19:23:47 +02:00 • committed by GitHub
commit 5e154cc1d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
libs/ngx-responsive-table/README.md
View file

@ -52,19 +52,15 @@ export class AppComponent {
##### Default Table
```html
<div class="wrapper">
<!-- Default table-->
<ngx-responsive-table [data]="(user$ | async)!" caption="default table" />
</div>
<ngx-responsive-table [data]="user$ | async" caption="default table" />
```
##### Custom Header Labels
It is important to note with custom headers you need to add #headers to your template.
It is important to note with custom headers you need to add <strong>#headers</strong> to your template.
```html
<!-- Custom Header Labels-->
<ngx-responsive-table [data]="(user$ | async)!" caption="Custom Header Labels">
<ngx-responsive-table [data]="user$ | async" caption="Custom Header Labels">
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
@ -77,11 +73,10 @@ It is important to note with custom headers you need to add #headers to your tem
##### Custom Cells
It is important to note that with custom cells you will need to add data-cell attribute to each custom cell (table td element) and the #rows with let-row to access the table data.
It is important to note that with custom cells you will need to add data-cell attribute to each custom cell (<em>table td element</em>) and the <strong>#rows</strong> with <strong>let-row</strong> to access the table data.
```html
<!-- Custom Cells-->
<ngx-responsive-table [data]="(user$ | async)!" caption="Custom Cells">
<ngx-responsive-table [data]="user$ | async" caption="Custom Cells">
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
@ -110,17 +105,11 @@ It is important to note that with custom cells you will need to add data-cell at
</td>
</ng-template>
</ngx-responsive-table>
</div>
```
#### Styles
```scss
.wrapper {
width: min(900px, 100% - 3rem);
margin-inline: auto;
}
.avatar {
vertical-align: middle;
border-radius: 50%;