TreeRowsTable

Welcome to the documentation for Tree Rows Table, a versatile and easy-to-use Tree Rows Table component for Angular applications.

Demo Github

Installation

To install the package, use npm or yarn:

npm install tree-rows-table

or

yarn add tree-rows-table

Usage

Below is an example of how to use the TreeRowsTable component in your Angular application.

Step 1: Import the Module

First, import the TreeRowsTableModule module in your module file:

import { TreeRowsTableModule } from 'tree-rows-table';

imports: [
    TreeRowsTableModule,
],

Step 2: Use the Component in Your Application

Here's a basic example of how to use the TreeRowsTable component:

<app-tree-table [data]="data" [tableConfig]="config"></app-tree-table>

Step 3: Data for the Table

Create a util.ts file inside your src folder and add all the content from TableData file

   import { Util } from 'util';

   config = [
    { label: 'Column A', key: 'title' },                   // here key is backend key you want to associated with that column
    { label: 'Column B', key: 'avg_market_value' },
    { label: 'Column C', key: 'avg_value_at_risk' },
    { label: 'Column D', key: 'avg_market_value' },
    { label: 'Column E', key: 'avg_value_at_risk' },
    { label: 'Column F', key: 'avg_market_value' },
    { label: 'Column G', key: 'avg_value_at_risk' },
    { label: 'Column H', key: 'avg_market_value' },
  ]

   data = Util.Data

Component Details

TreeTableComponent Component

The TreeTableComponent component allows users to create table where user can expand the rows to n number of levels.

Inputs

| Inputs | Type | Required | Default | Description | | ------------------------------------ | ------ | -------- | ------- | ------------------------------------------------------------------------------- | | tableConfig | object | yes | [] | Controls the headers names and columns | | searchKey | string | yes | true | For searching on table, column key name for search | | allowParallelParentNodeExpand | boolean | no | false | To prevent closing other parent nodes on opening a new parent node | | allowParallelChildNodeExpand | boolean | no | false | To prevent closinh other child nodes on opening a new child node | | paddinggLeft | string | no | 20px | Left spacing for child node | | showInput | boolean | no | true | Hide a show input. | | showExpandAllButton | boolean | no | true | Expand all button to open all rows | | showCollapseAllButton | boolean | no | true | Collapse all rows of the table | | showBreadCrumbs | boolean | no | true | show breadCrumns, only works when allowParallelParentNodeExpand is false | | data | object | yes | [] | Data for the table |