Insert a Radio button in a mdbTable. Radio button should be visible and selectable for individual rows one at a time.

Actual behavior When I add a simple Angular Radio button as input to a row, it is not visible. I tried mdb Radio buttons, same result or they are visible but the paging gets distorted. I was using check boxes for each row before as suggested in the MDB examples. But wanted to use Radio buttons as we should be able to select only one row at a time. Will be greatful if you can provide a working example for using Radio buttons in a table.

Resources (screenshots, code snippets etc.)

<div class="table-wrapper table-responsive">
                <table mdbTable #tableEl="mdbTable" class="mb-0 table-editable" small="true" hover="true" striped="true">
                    <thead class="deep-purple lighten-3">
                        <tr>
                            <th style="width:20px"></th>
                            <th class="th-lg" colspan="5" style="text-align:left">
                                <a (click)="sortBy('category')">
                                    Categories
                                    <mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
                                </a>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr *ngFor="let item of categories;let i = index" (click)="selectRow($event, item)"
                            [class.rowselected]="item.selected">

                            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                                    scope="item" style="width: 20px">
                                <!--<mdb-checkbox (change)="updateSelectedStatus(item)"></mdb-checkbox>-->
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="i"
                                            mdbInput (change)="updateSelectedStatus(item)">
                                    <label class="custom-control-label" for="i"></label>
                                </div>-->
                            </th>
                            <!--<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                                scope="item" style="width: 20px">
                                <input type="radio" name="radiogroup">
                            </td>-->
                            <td colspan="6" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                                {{item.category}}  
                            </td>
                        </tr>
                    </tbody>
                    <tfoot class="deep-purple lighten-3">
                        <tr>
                            <td colspan="2" style="" align-content="left">
                                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="codeCategories">
                                </mdb-table-pagination>
                            </td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>