Table Child Rows

Sometimes within a table row we might need to show child rows related to the row, this is when the table child rows should be implemented. The table child rows feature provides a dropdown for each table row that when opened will render child rows as defined by the implementor. With the table child rows template we allow the implementor to provide a template for each column to use for the row and then we inject that template into the correct place in the interface (this works exactly like the normal table columns).

Important Notes

You must define childRowsKey on the go-table component for this to work. childRowsKey refers to the key on the parent row object where the child array resides.
For best results, there should be the same number of child columns as there are in the parent row.


  <go-table
    [tableConfig]="tableConfig"
    childRowsKey="children"
    tableTitle="Table Child Rows">

    <!-- Parent Rows -->
    <go-table-column field="id" title="ID"></go-table-column>
    <go-table-column field="name.first" title="First Name"></go-table-column>
    <go-table-column field="name.last" title="Last Name"></go-table-column>
    <go-table-column field="ip_address" title="IP Address"></go-table-column>

    <!-- Child Rows -->
    <ng-container #goTableChildRows>
      <!-- 'field' refers to properties on child row object -->
      <go-table-child-column field="id"></go-table-child-column>
      <go-table-child-column field="name.first"></go-table-child-column>
      <go-table-child-column field="name.last"></go-table-child-column>
      <go-table-child-column field="ip_address"></go-table-child-column>
    </ng-container>
  </go-table>

Table Child Rows

ID	First Name	Last Name	IP Address
1	Rebekah	Sauer	173.98.201.10
2	Nash	Hackett	115.27.195.35
3	Hester	Orn	219.151.203.16
4	Jermain	Hickle	103.102.240.209
5	Christa	Deckow	182.78.30.254
6	Andy	Jones	243.10.122.171
7	Millie	Ondricka	150.64.62.32
8	Marjory	Ortiz	18.161.193.115
9	Edd	Howell	90.254.23.55
10	Idella	Hackett	44.80.199.94

There could be instances when implementing child rows where more formatting is required on a child row column, or access to the parent row is necessary. Implementation here is very similar to the column templates for the parent rows. To access the parent row, you must add let-parentItem="parentItem" to the template.


  <go-table
    [tableConfig]="tableConfig"
    childRowsKey="children"
    tableTitle="Table Child Rows">
    <go-table-column field="id" title="ID"></go-table-column>
    <go-table-column field="name.first" title="First Name"></go-table-column>
    <go-table-column field="name.last" title="Last Name"></go-table-column>
    <go-table-column field="ip_address" title="IP Address"></go-table-column>
    <!-- Add an empty column here for an 'actions' column in the child rows -->
    <go-table-column width="60"></go-table-column>

    <ng-container #goTableChildRows>
      <go-table-child-column field="id"></go-table-child-column>
      <go-table-child-column field="name.first"></go-table-child-column>
      <go-table-child-column field="name.last"></go-table-child-column>
      <go-table-child-column field="ip_address"></go-table-child-column>
      <go-table-child-column width="60">
        <!--
          - Define the child column template with #goTableCell
          - let-childItem allows use of the targeted child row object
          - let-parentItem="parentItem" allows use of the targeted parent row
        -->
        <ng-template #goTableCell let-childItem let-parentItem="parentItem">
          <go-icon-button
            buttonIcon="explore"
            (handleClick)="logRow(parentItem, childItem)">
          </go-icon-button>
        </ng-template>
      </go-table-child-column>
    </ng-container>
  </go-table>


  logRow(parentItem: any, childItem: any): void {
    this.toasterService.toastInfo({
      header: 'Child Row Clicked!',
      message: `
        Child Name: ${childItem.name.first}<br/>
        Parent Name: ${parentItem.name.first}
      `
    });
  }

Table Child Rows

ID	First Name	Last Name	IP Address
1	Rebekah	Sauer	173.98.201.10
2	Nash	Hackett	115.27.195.35
3	Hester	Orn	219.151.203.16
4	Jermain	Hickle	103.102.240.209
5	Christa	Deckow	182.78.30.254
6	Andy	Jones	243.10.122.171
7	Millie	Ondricka	150.64.62.32
8	Marjory	Ortiz	18.161.193.115
9	Edd	Howell	90.254.23.55
10	Idella	Hackett	44.80.199.94

Table Child Rows

Implementing Child Rows

Important Notes

Table Child Rows

Child Row Templates

Table Child Rows

Features