Ngx-datatable: Header Rowspan and Colspan

[id1945]

I checked all documentation for ngx-datatable.

Can someone show me how to to do it or help me to build table header with rowspan and colspan
https://imgur.com/Ja9gWeQ

Thanks in advanced

[KingDarBoja]

Hello @id1945,

You can construct your own templates by using the ngx-datatable-cell-header and ngx-datatable-cell-template tags inside any ng-template directive along with nested datatables.

It is a bit complicated but here is the code:

<ngx-datatable
    [headerHeight]="75"
    [footerHeight]="'auto'"
    [columnMode]="'force'"
    [rows]="rows"
    [rowHeight]="undefined"
    [limit]="10"
    >
    <ngx-datatable-column>
        <ng-template let-row="row" ngx-datatable-header-template>

            <strong>Properties</strong>
            <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="'auto'" [rowHeight]="undefined" [footerHeight]="undefined">
                <ngx-datatable-column [name]="'ID'"></ngx-datatable-column>
                <ngx-datatable-column [name]="'Status'"></ngx-datatable-column>
            </ngx-datatable>

        </ng-template>
        <ng-template let-row="row" ngx-datatable-cell-template>

                <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="undefined" [rowHeight]="'auto'" [footerHeight]="undefined">
                    <ngx-datatable-column [prop]="'_id'"></ngx-datatable-column>
                    <ngx-datatable-column [prop]="'status'"></ngx-datatable-column>
                </ngx-datatable>

        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
        <ng-template let-row="row" ngx-datatable-header-template>

            <strong>Other Data</strong>
            <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="'auto'" [rowHeight]="undefined" [footerHeight]="undefined">
                <ngx-datatable-column [name]="'Destination'"></ngx-datatable-column>
                <ngx-datatable-column [name]="'Name'"></ngx-datatable-column>
            </ngx-datatable>

        </ng-template>
        <ng-template let-row="row" ngx-datatable-cell-template>

                <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="undefined" [rowHeight]="'auto'" [footerHeight]="undefined">
                    <ngx-datatable-column [prop]="'final_destination'"></ngx-datatable-column>
                    <ngx-datatable-column [prop]="'name'"></ngx-datatable-column>
                </ngx-datatable>

        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

Of course, you will require some scss to fit your need but this would do the trick.

Cheers!

[id1945]

Hello @id1945,

You can construct your own templates by using the ngx-datatable-cell-header and ngx-datatable-cell-template tags inside any ng-template directive along with nested datatables.

It is a bit complicated but here is the code:

<ngx-datatable
    [headerHeight]="75"
    [footerHeight]="'auto'"
    [columnMode]="'force'"
    [rows]="rows"
    [rowHeight]="undefined"
    [limit]="10"
    >
    <ngx-datatable-column>
        <ng-template let-row="row" ngx-datatable-header-template>

            <strong>Properties</strong>
            <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="'auto'" [rowHeight]="undefined" [footerHeight]="undefined">
                <ngx-datatable-column [name]="'ID'"></ngx-datatable-column>
                <ngx-datatable-column [name]="'Status'"></ngx-datatable-column>
            </ngx-datatable>

        </ng-template>
        <ng-template let-row="row" ngx-datatable-cell-template>

                <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="undefined" [rowHeight]="'auto'" [footerHeight]="undefined">
                    <ngx-datatable-column [prop]="'_id'"></ngx-datatable-column>
                    <ngx-datatable-column [prop]="'status'"></ngx-datatable-column>
                </ngx-datatable>

        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
        <ng-template let-row="row" ngx-datatable-header-template>

            <strong>Other Data</strong>
            <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="'auto'" [rowHeight]="undefined" [footerHeight]="undefined">
                <ngx-datatable-column [name]="'Destination'"></ngx-datatable-column>
                <ngx-datatable-column [name]="'Name'"></ngx-datatable-column>
            </ngx-datatable>

        </ng-template>
        <ng-template let-row="row" ngx-datatable-cell-template>

                <ngx-datatable [rows]="[row]" [columnMode]="'force'" [headerHeight]="undefined" [rowHeight]="'auto'" [footerHeight]="undefined">
                    <ngx-datatable-column [prop]="'final_destination'"></ngx-datatable-column>
                    <ngx-datatable-column [prop]="'name'"></ngx-datatable-column>
                </ngx-datatable>

        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

Proof:

Of course, you will require some scss to fit your need but this would do the trick.

Cheers!

Thanks so much!

[Vittorria]

Could you please share the main css assests of your project?