Data Table Sub Header Logic

data-table-sub-header.ts

...

@Component({
    ...
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({ height: '0px', borderBottomWidth: '0px', minHeight: '0', visibility: 'hidden', opacity: 0 })),
            state('expanded', style({ height: '*', visibility: 'visible', opacity: 1 })),
            transition('expanded <=> collapsed', animate('55ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
            transition('collapsed <=> expanded', animate('325ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ],
})
export class DataTableSubHeaderComponent implements OnInit {

    ...

    headerRowSection: string;
    currentRow: any;
    headerExpanded = true;

    ...

    ngOnInit() {
        this.dataSource.paginator = this.paginator;
    }

    selectRow(event: any, row: any, policy: WorkerPolicy) {
        this.currentRow = row;
        if (policy.isHeader) {
            this.dataSource.data.forEach(currentrow => this.toggleExpansion(currentrow, policy));
        } else {
            // navigate to details
        }
    }

    toggleHeaders() {
        this.dataSource.data.forEach(row => {
            this.toggleExpansionByHeader(row, row);
        });
        this.headerExpanded = !this.headerExpanded;
    }

    toggleExpansion(row: WorkerPolicy, policy: WorkerPolicy) {
        if (policy.isHeader) {
            this.headerRowSection = policy.headerSection;
        }

        if (!row.isHeader && row.expanded) {
            if (row.headerSection === this.headerRowSection) {
                row.expanded = false;
            }
        } else if (!row.isHeader && !row.expanded) {
            if (row.headerSection === this.headerRowSection) {
                row.expanded = true;
            }

        } else if (row.isHeader && row.headerSection === this.headerRowSection) {
            row.expanded = !row.expanded;
        }
    }

    toggleExpansionByHeader(row: WorkerPolicy, policy: WorkerPolicy) {
        if (policy.isHeader) {
            this.headerRowSection = policy.headerSection;
        }

        if (!row.isHeader) {
            if (row.headerSection === this.headerRowSection) {
                row.expanded = !this.headerExpanded;
            }
        } else if (row.isHeader && row.headerSection === this.headerRowSection) {
            row.expanded = !this.headerExpanded;
        }
    }

    ...

}