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

docs: ngx-responsive-table

Browse source
This commit is contained in:
Brian Pooe 2023-08-05 16:25:47 +02:00
parent a4defab4b0
commit 8c701ceaca
10 changed files with 278 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -34,7 +34,12 @@ To get started with the devtools-bp monorepo, follow these steps:
### Angular Libraries
Coming soon...
1. **ngx-responsive-table**: A game-changing Angular library that offers complete customization and responsiveness for tables with seamless user experience on all devices.
Its flexibility allows users to design tables that fit their project needs with an intuitive API and dynamic data handling.
- Usage:
- Installation: `npm install @devtools-bp/ngx-responsive-table`
- Documentation: [Link to documentation](https://github.com/brianpooe/devtools-bp/blob/main/libs/ngx-responsive-table/README.md)
## Contributing

49
apps/ngx-responsive-table-demo/src/app/app.component.html Normal file
View file

@ -0,0 +1,49 @@
<div class="wrapper">
<!-- Default table-->
<ngx-responsive-table [data]="(user$ | async)!" caption="default table" />
<!-- Custom Header Labels-->
<ngx-responsive-table
[data]="(user$ | async)!"
caption="Custom Header Labels"
>
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
<th>First Name</th>
<th>ID</th>
<th>Last Name</th>
</ng-template>
</ngx-responsive-table>
<!-- Custom Cells-->
<ngx-responsive-table [data]="(user$ | async)!" caption="Custom Cells">
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
<th>First Name</th>
<th>ID</th>
<th>Last Name</th>
<th>Actions</th>
</ng-template>
<ng-template #rows let-row>
<td data-cell="avatar">
<img
[ngSrc]="row.avatar"
alt="Avatar"
class="avatar"
width="50"
height="50"
/>
</td>
<td data-cell="email">{{ row.email }}</td>
<td data-cell="first_name">{{ row.first_name }}</td>
<td data-cell="id">{{ row.id }}</td>
<td data-cell="last_name">{{ row.last_name }}</td>
<td data-cell="actions" id="actions">
<button data-cell="edit">Edit</button>
<button data-cell="delete">Delete</button>
</td>
</ng-template>
</ngx-responsive-table>
</div>

40
apps/ngx-responsive-table-demo/src/app/app.component.scss Normal file
View file

@ -0,0 +1,40 @@
.wrapper {
width: min(900px, 100% - 3rem);
margin-inline: auto;
}
.avatar {
vertical-align: middle;
border-radius: 50%;
}
button {
padding: 8px 12px;
border: none;
background-color: #995b00;
color: #fff;
cursor: pointer;
border-radius: 4px;
margin: 0.5rem;
}
button:hover {
background-color: #ff9800;
}
@media (max-width: 650px) {
.avatar {
vertical-align: center;
}
#actions {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0.5rem;
}
#actions:before {
content: '';
}
}

97
apps/ngx-responsive-table-demo/src/app/app.component.ts
View file

@ -7,101 +7,8 @@ import { AsyncPipe, NgOptimizedImage } from '@angular/common';
standalone: true,
imports: [NgxResponsiveTableComponent, AsyncPipe, NgOptimizedImage],
selector: 'root',
template: `
<div class="wrapper">
<ngx-responsive-table
[data]="(user$ | async)!"
caption="default table format"
/>
<ngx-responsive-table
[data]="(user$ | async)!"
caption="Custom Header Labels"
>
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
<th>First Name</th>
<th>ID</th>
<th>Last Name</th>
</ng-template>
</ngx-responsive-table>
<ngx-responsive-table [data]="(user$ | async)!" caption="Custom Cells">
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
<th>First Name</th>
<th>ID</th>
<th>Last Name</th>
<th>Actions</th>
</ng-template>
<ng-template #rows let-row>
<td data-cell="avatar">
<img
[ngSrc]="row.avatar"
alt="Avatar"
class="avatar"
width="50"
height="50"
/>
</td>
<td data-cell="email">{{ row.email }}</td>
<td data-cell="first_name">{{ row.first_name }}</td>
<td data-cell="id">{{ row.id }}</td>
<td data-cell="last_name">{{ row.last_name }}</td>
<td data-cell="actions" id="actions">
<button data-cell="edit">Edit</button>
<button data-cell="delete">Delete</button>
</td>
</ng-template>
</ngx-responsive-table>
</div>
`,
styles: [
`
.wrapper {
width: min(900px, 100% - 3rem);
margin-inline: auto;
}
.avatar {
vertical-align: middle;
border-radius: 50%;
}
button {
padding: 8px 12px;
border: none;
background-color: #995b00;
color: #fff;
cursor: pointer;
border-radius: 4px;
margin: 0.5rem;
}
button:hover {
background-color: #ff9800;
}
@media (max-width: 650px) {
.avatar {
vertical-align: center;
}
#actions {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0.5rem;
}
#actions:before {
content: '';
}
}
`
]
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
user$ = inject(UserService).users$;

2
apps/ngx-responsive-table-demo/src/styles.scss
View file

@ -1,2 +1,2 @@
/* You can add global styles to this file, and also import other style files */
@import 'libs/ngx-responsive-table/src/lib/styles/default.scss';
@import 'libs/ngx-responsive-table/src/lib/assets/styles/default';

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

@ -1,7 +1,175 @@
# ngx-responsive-table
This library was generated with [Nx](https://nx.dev).
AN Angular library offering customizable and responsive tables for seamless user experience on all devices.
Its flexibility allows users to design tables that fit their project needs with an intuitive API and dynamic data handling.
Elevate your Angular applications with this powerful table solution.
## Running unit tests
## Installation
Run `nx test ngx-responsive-table` to execute the unit tests.
```shell
npm install @devtools-bp/ngx-responsive-table
```
or
```shell
yarn add @devtools-bp/ngx-responsive-table
```
## Configuration
To use the ngx-responsive-table you need to import styles from the package itself.
```scss
@import 'node_modules/ngx-responsive-table/dist/libs/ngx-responsive-table/assets/styles/default';
```
### Usage
#### In Component
```typescript
import { Component, inject } from '@angular/core';
import { AsyncPipe, NgOptimizedImage } from '@angular/common';
import { UserService } from './user.service';
import { NgxResponsiveTableComponent } from '@devtools-bp/ngx-responsive-table';
@Component({
standalone: true,
imports: [NgxResponsiveTableComponent, AsyncPipe, NgOptimizedImage],
selector: 'root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
user$ = inject(UserService).users$;
}
```
#### In HTML
##### Default Table
```html
<div class="wrapper">
<!-- Default table-->
<ngx-responsive-table [data]="(user$ | async)!" caption="default table" />
</div>
```
##### Custom Header Labels
It is important to note with custom headers you need to add #headers to your template.
```html
<!-- Custom Header Labels-->
<ngx-responsive-table [data]="(user$ | async)!" caption="Custom Header Labels">
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
<th>First Name</th>
<th>ID</th>
<th>Last Name</th>
</ng-template>
</ngx-responsive-table>
```
##### 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.
```html
<!-- Custom Cells-->
<ngx-responsive-table [data]="(user$ | async)!" caption="Custom Cells">
<ng-template #headers>
<th>Avatar</th>
<th>Email</th>
<th>First Name</th>
<th>ID</th>
<th>Last Name</th>
<th>Actions</th>
</ng-template>
<ng-template #rows let-row>
<td data-cell="avatar">
<img
[ngSrc]="row.avatar"
alt="Avatar"
class="avatar"
width="50"
height="50"
/>
</td>
<td data-cell="email">{{ row.email }}</td>
<td data-cell="first_name">{{ row.first_name }}</td>
<td data-cell="id">{{ row.id }}</td>
<td data-cell="last_name">{{ row.last_name }}</td>
<td data-cell="actions" id="actions">
<button data-cell="edit">Edit</button>
<button data-cell="delete">Delete</button>
</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%;
}
button {
padding: 8px 12px;
border: none;
background-color: #995b00;
color: #fff;
cursor: pointer;
border-radius: 4px;
margin: 0.5rem;
}
button:hover {
background-color: #ff9800;
}
@media (max-width: 650px) {
.avatar {
vertical-align: center;
}
#actions {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0.5rem;
}
#actions:before {
content: '';
}
}
```
## Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a
pull request on the GitHub
repository. [Learn how to contribute to the project.](https://github.com/firstcontributions/first-contributions)
## License
The devtools-bp monorepo is released under
the [MIT License](https://github.com/brianpooe/devtools-bp/blob/main/LICENSE). Please make sure you understand its
terms and conditions when using the libraries and tools provided in this repository.
## Authors
- [Brian Pooe](https://github.com/brianpooe)

7
libs/ngx-responsive-table/ng-package.json
View file

@ -1,6 +1,13 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/libs/ngx-responsive-table",
"assets": [
{
"input": "src/lib/assets/styles",
"glob": "**/*.scss",
"output": "assets/styles"
}
],
"lib": {
"entryFile": "src/index.ts"
}

0
libs/ngx-responsive-table/src/lib/styles/default.scss → libs/ngx-responsive-table/src/lib/assets/styles/default.scss
View file

3
libs/ngx-responsive-table/src/lib/ngx-responsive-table.component.ts
View file

@ -1,11 +1,8 @@
import {
AfterContentInit,
ChangeDetectionStrategy,
Component,
ContentChild,
ElementRef,
Input,
Renderer2,
TemplateRef
} from '@angular/core';
import { KeyValuePipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';

3
libs/ngx-responsive-table/tsconfig.lib.prod.json
View file

@ -5,5 +5,6 @@
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
},
"include": ["src/lib/assets/styles/default.scss"]
}