Have ideas to improve npm?Join in the discussion! »

    ngx-accordion-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    Introduction

    This is a small component to create accordion tables (table inside another table) allowing
    different number of columns for Angular apps, this component is using bootstrap and
    small javascript functions behind the scenes.

    Please feel free to fork, contribute and open pull requests for this project.

    V1.X.X - This first version have low flexibility and features but the idea is to improve for everything which is needed.

    • V1.0.6 - Added flexibility to specify interactive column behavior and design.
    • V1.0.8 - Added support to subscribe click events on columns both html and non-html columns.
    • V1.0.10 - Added option to create hidden columns to use with subscribe event and identify potentially elements.

    Getting Started

    To install the component on your app run

    npm install ngx-accordion-table --save  

    Install dependencies

    npm install jquery bootstrap@4 --save  

    Note: Bootstrap is an Optional dependency.

    In your angular-cli.json you need to add CSS and Javascript files (considering which you installed bootstrap).

    "styles"[    
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]"scripts"[    
      "../node_modules/bootstrap/dist/js/bootstrap.min.js",    
      "../node_modules/jquery/dist/jquery.min.js",    
    "../node_modules/ngx-accordion-table/js/ngx-accordion-table-script.js" ]  

    Now we need to change the your main app.module.ts. You need to import BrowserModule and NgxAccordionTableModule and import as below:

    import {NgModule} from '@angular/core';  
    import {BrowserModule} from '@angular/platform-browser';  
    import { NgxAccordionTableModule } from 'ngx-accordion-table'  
      
    @NgModule({  
      declarations: [  
     ..., ], imports: [ BrowserModule, NgxAccordionTableModule ], bootstrap: [YourComponent]})  

    In your component HTML code you need to write the accordion-table directive with a couple parameters:
    [template] which will the reference of your accordion template;
    [data] which be the representation of all data

    <ngx-accordion-table [template]="accordionTemplate"   
                    [data]="accordionData">  
    </ngx-accordion-table>  

    Now we need to build our template, in your component.ts you will use the class AccordionTemplate to write your template.
    Lets imagine that we want to show all Marvel Movies already created in parent table and for each movie we want to show all avengers which participated of that movie.

    import {AccordionTemplate} from 'ngx-accordion-table';   
    [...]//Your @component declaration    
     export class YourComponent {   
     accordionTemplate: AccordionTemplate;    
     constructor() {    
           this.accordionTemplate = YourComponent.buildTemplate();    
        }    
    private static buildTemplate() {    
           let template = new AccordionTemplate();    
           template.addColumn("Marvel Movie", "*")    
                   .addColumn("Year", "100px")    
                   .addColumn("Main Character", "150px")    
                   .addHtmlColumn("Revenues", "100px")
                   .addHiddenColumn("identifier");    
          template.addAccordionColumn("Avenger Name", "200px")    
                   .addAccordionColumn("Avenger Codename", "400px")    
                   .addAccordionColumn("Main Power", "400px")
                   .addAccordionHiddenColumn("in-identifier");
           return template;    
    }  
      

    Done we already defined our template, we can see three different methods:

    • addColumn //adds a column to parent table
    • addHtmlColumn //adds a column to parent table which render html data
    • addAccordionColumn //adds a column to accordion template
    • HiddenColumn //adds a column with display:none, used for example to store identifier values

    Now lets add another method to our component to fill rows and see how it works.

    private static addData(templateAccordionTemplate) {    
        let data = new AccordionData(template);    
        let avengersLink =`<a href="https://www.the-numbers.com/movie/Avengers-The-(2012)">$1,519,479,547</a>`   
       let row = data.addRow(["The Avengers", "2012", "None", avengersLink;]);    
       row.addAccordionRows(    
            [["Tony Stark", "Iron Man", "Playboy, Billionaire, Philanthropist"    
          ],["Bruce Banner", "Hulk", "Infinity Strength, Endurance"    
          ],["Steve Rogers", "Captain America", "Super Soldier, Strength, Endurance, Agility, Speed"    
          ],["Thor Odinson", "Thor", "Long Life, Lightning Control, Mjolnir, Super Strength, Speed, Endurance"]]    
        );    
        let ultronLink = `<a href="https://www.the-numbers.com/movie/Avengers-Age-of-Ultron#tab=summary">$1,408,218,722</a>`  
     let rowWithoutAccordion = data.addRow(["Avengers: Age of Ultron", "2015", "Iron Man"]);    
    return data; }  

    And for example purposes lets call him on constructor:

    import {AccordionTemplate, AccordionTemplate} from 'ngx-accordion-table';   
    export class YourComponent {   
     accordionTemplate: AccordionTemplate;    
     accordionData: AccordionData;  
      constructor() {    
           this.accordionTemplate = YourComponent.buildTemplate(); this.accordionData = YourComponent.addData(this.accordionTemplate)   
        }  
    [...]  

    If we run this code we could see a table like this
    Colapsed:
    colapsed
    Opened
    opened
    That code could be found in example folder within this repository.

    You could change the first column (arrow-down) to your own html code, change the icon image to what you want

    It is possible choose 3 different behaviors to open accordion. [ROW, COLUMN, ELEMENT].
    When ROW is set (default), will open accordion by clicking on row

    When COLUMN is set, will open accordion by clicking on column

    When ELEMENT is set, will open accordion by clicking directly on element

    import {AccordionTemplate, TargetOpenAction};  
      
    accordionTemplate.setTargetOpenAction(TargetOpenAction.ROW);  
    accordionTemplate.setTargetOpenAction(TargetOpenAction.COLUMN);  
    accordionTemplate.setTargetOpenAction(TargetOpenAction.ELEMENT);  

    Binding column events

    accordionTemplate.eventListener.subscribe("Revenues", function(row: TableRow) { });

    Access eventListener inside template and subscribe for receive click event for target column name specified the callback will receive a TableRow of element clicked.

    For developers <3

    After clone and inside project folder:

    npm install . #to install dependencies  

    To build the component:

    npm run build && cd dist && npm pack  

    To run example project:

    cd example/marvel-app-example/  
    npm install . #will install all dependencies together with ngx-accordion-table component  
    ng serve # will start angular server at localhost:4200  

    To update component in example project run

    npm install ../../dist/ngx-accordion-table-x.x.x.tgz --upgrade #where x is the generated version  

    Thanks for read!

    Install

    npm i ngx-accordion-table

    DownloadsWeekly Downloads

    9

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    197 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar