# twentyfive-accordion-table

> The **Twentyfive Accordion Table Angular** library provides a simple and flexible way to display data in an expandable table. With this library, you can create dynamic tables where rows can be expanded to show additional details when clicked by the user.

Latest version **0.0.47** (published 2024-10-01) · 0 weekly downloads

## Install

```sh
npm install twentyfive-accordion-table
pnpm add twentyfive-accordion-table
yarn add twentyfive-accordion-table
bun add twentyfive-accordion-table
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.47 |
| Published | 2024-10-01 |
| First published | 2024-03-26 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 18 |
| Unpacked size | 136.7 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | twentyfivesrl |
| Keywords | angular, twentyfive, table, accordion, expandable, row, ng-bootstrap, animation |

## Links

- npm: https://www.npmjs.com/package/twentyfive-accordion-table
- npm.io page: https://npm.io/package/twentyfive-accordion-table

## Dependencies (18)

- [rxjs](https://npm.io/package/rxjs.md) ~7.8.0
- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [zone.js](https://npm.io/package/zone.js.md) ~0.14.3
- [bootstrap](https://npm.io/package/bootstrap.md) ^5.3.3
- [ngx-bootstrap](https://npm.io/package/ngx-bootstrap.md) ^12.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^17.2.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^17.2.0
- [bootstrap-icons](https://npm.io/package/bootstrap-icons.md) ^1.11.3
- [twentyfive-style](https://npm.io/package/twentyfive-style.md) ^0.0.100
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^17.2.0
- [@angular/localize](https://npm.io/package/@angular/localize.md) ^17.2.0
- [twentyfive-switch](https://npm.io/package/twentyfive-switch.md) ^0.0.9
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^17.2.0
- [ngx-skeleton-loader](https://npm.io/package/ngx-skeleton-loader.md) ^9.0.0
- [twentyfive-dropdown](https://npm.io/package/twentyfive-dropdown.md) ^0.0.12
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^17.2.0
- [@ng-bootstrap/ng-bootstrap](https://npm.io/package/@ng-bootstrap/ng-bootstrap.md) ^16.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^17.2.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.47 (latest) — 2024-10-01
- 0.0.46 — 2024-10-01
- 0.0.45 — 2024-07-09
- 0.0.44 — 2024-05-14
- 0.0.43 — 2024-05-12
- 0.0.42 — 2024-05-10
- 0.0.41 — 2024-05-10
- 0.0.40 — 2024-05-09
- 0.0.39 — 2024-05-09
- 0.0.38 — 2024-05-09
- 0.0.37 — 2024-05-09
- 0.0.36 — 2024-05-09
- 0.0.35 — 2024-05-09
- 0.0.34 — 2024-05-09
- 0.0.33 — 2024-05-08
- … 32 more at https://npm.io/package/twentyfive-accordion-table/versions

## README

# TwentyfiveAccordionTable
The **Twentyfive Accordion Table Angular** library provides a simple and flexible way to display data in an expandable table. With this library, you can create dynamic tables where rows can be expanded to show additional details when clicked by the user.  
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
## Key Features
* Creation of dynamic tables with expandable rows.
* Customization of columns and displayed data.
* Simple and efficient handling of row expansion.

## Installation
You can install the library via npm using the following command:
`npm install twentyfive-accordion-table`

## Usage
To use the library, import the main module into your Angular module and use the table component paired with the desired data.
```
import { NgModule } from '@angular/core';
import { TwentyfiveAccordionTableModule } from 'twentyfive-accordion-table';

@NgModule({
imports: [
TwentyfiveAccordionTableModule
]
})
export class AppModule { }
```
### Html
````
<twentyfive-accordion-table
[data]="data"
[headers]="headers"
[extras]="extras"
[singleOpen]="true"
[templateRef]="templateRef"
(detailsEmitter)="getDetails($event)"
[dataDetails]="dataDetails"
[isSortable]="false"
[page]="page"
[pageSize]="pageSize"
[maxSize]="maxSize"
[collectionSize]="collectionSize"
(changePageEmitter)="changePage($event)"
(selectEmitter)="selectSize($event)">
</twentyfive-accordion-table>


<!-- Template reference to display the information specified in deepDisplay. -->
<ng-template #templateRef let-detailLabel="detailLabel" let-detailInfo="detailInfo" let-getValueByPath="getValueByPath" let-isObject="isObject">
  <p class="d-flex">
    <span >{{detailLabel?.name}}</span> :
    <show-data-object [dataDetails]="detailInfo[detailLabel?.value]" [deepDisplay]="deepDisplay"
                          [getValueByPath]="getValueByPath" [isObject]="isObject" [loading]="loading" ></show-data-object>
  </p>
</ng-template>
````
### Ts

```
@ViewChild('templateRef', { static: true }) templateRef!: TemplateRef<any>;

  data:User [] = [];
  headers: Header[] = [];
  extras: Header[] = [];
  deepDisplay: Header[] = [];
  dataDetails: any [] = [new User()];
  pageSize: number = 2;
  page:number = 1;
  maxSize: number = 5;
  collectionSize!: number;
  loading: boolean = false;
 
```



## Contributions
We welcome contributions from the community! If you'd like to contribute to this library, please follow the contribution guidelines in the GitHub repository.

## Bug Reporting
If you encounter a bug or have suggestions to improve the library, please report the issue in the GitHub repository.

## License
This library is distributed under the MIT license. See the LICENSE file for more information on copyright and usage terms.

---
_Source: https://npm.io/package/twentyfive-accordion-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._