<form novalidate class="nx-margin-bottom-s">
    <p nxCopytext class="nx-margin-bottom-2xs">Sticky column:</p>

    <nx-radio-toggle name="stickySelect" [(ngModel)]="stickyColumn">
        <nx-radio-toggle-button value="first">First</nx-radio-toggle-button>
        <nx-radio-toggle-button value="last">Last</nx-radio-toggle-button>
        <nx-radio-toggle-button value="both">Both</nx-radio-toggle-button>
    </nx-radio-toggle>
</form>

<div class="table-container">
    <table nxTable [sticky]="stickyColumn">
        <thead>
            <tr nxTableRow>
                <th nxHeaderCell>Product</th>
                <th nxHeaderCell>Contract Number</th>
                <th nxHeaderCell>Description</th>
                <th nxHeaderCell>Website</th>
                <th nxHeaderCell>Ending At</th>
                <th nxHeaderCell>Status</th>
            </tr>
        </thead>
        <tbody>
            @for (item of tableElements; track item) {
            <tr nxTableRow>
                <td nxTableCell>{{item.product}}</td>
                <td nxTableCell>{{item.contractNumber}}</td>
                <td nxTableCell>{{item.desc}}</td>
                <td nxTableCell>
                    <nx-link><a routerLink="#">{{item.website}}</a></nx-link>
                </td>
                <td nxTableCell>{{item.endingAt}}</td>
                <td nxTableCell>
                    <nx-badge [type]="item.status"
                        >{{item.statusText}}</nx-badge
                    >
                </td>
            </tr>
            }
        </tbody>
    </table>
</div>
