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
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.
To install the component on your app run
npm install ngx-accordion-table --save
npm install jquery bootstrap@4 --save
Note: Bootstrap is an Optional dependency.
Now we need to change the your main app.module.ts. You need to import BrowserModule and NgxAccordionTableModule and import as below:
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
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.
;//Your @component declaration
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 addDatatemplate: AccordionTemplate
And for example purposes lets call him on constructor:
If we run this code we could see a table like this
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
Binding column events
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 componentng 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!