Table within Stepper

Dear @Jordan

Thank you for letting us know about this problem. We will take a closer look at it.

Best Regards, Bartosz.

Dear @Jordan

I can't reproduce your problem, here's my code and it works as it should:

HTML:

  <div class="row">
    <div class="col-12">
      <mdb-card class="mt-4">
        <mdb-card-body>
          <mdb-stepper #stepper [vertical]="true">
            <div class="form-header primary-color mb-0">
              <h3 class="card-header-title">Let's Get Started</h3>
            </div>

            <div class="float-right">
              <button color="secondary" mdbBtn mdbWavesEffect type="button">
                Data Group Dictionary
              </button>

              <button color="default" mdbBtn mdbWavesEffect type="button">
                Data Source Dictionary
              </button>
            </div>
            <mdb-step name="Step 1" [stepForm]="firstFormGroup">
              <form [formGroup]="firstFormGroup">
                <div class="md-form"></div>
              </form>
              <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
              <button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
            </mdb-step>
            <mdb-step name="Step 2" label="Type something" [stepForm]="secondFormGroup">
              <form [formGroup]="secondFormGroup">
                <div class="table-responsive">
                  <table
                    mdbTableEditor
                    class="table table-hover table-bordered"
                    [itemsPerPage]="visibleItems"
                    #table="mdbEditor"
                    mdbTableScroll
                    scrollY="true"
                    (rowHighlight)="highlightedRow = $event"
                  >
                    <thead>
                      <tr>
                        <th *ngFor="let head of headElements; let i = index" scope="col">
                          {{ head }}
                        </th>
                        <th>Checkbox</th>
                        <th>Checkbox2</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let item of table.performSearch(this.searchText); let i = index">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.position }}</td>
                        <td>{{ item.office }}</td>
                        <td>{{ item.age }}</td>
                        <td>{{ item.start_date }}</td>
                        <td>{{ item.salary }}</td>
                        <td>
                          <mdb-checkbox class="form-control"> </mdb-checkbox>
                        </td>
                        <td>
                          <mdb-checkbox class="form-control"> </mdb-checkbox>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </form>
              <button color="primary" mdbBtn>
                Specify Business Need
              </button>
              <button color="secondary" mdbBtn>
                Back to Requestor
              </button>
            </mdb-step>
          </mdb-stepper>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>

TS:

import { Component, ViewChild, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { HttpClient } from '@angular/common/http';
import { MdbTableEditorDirective } from 'mdb-table-editor';
          @ViewChild('table', { static: true }) mdbTableEditor: MdbTableEditorDirective;
  headElements = ['ID', 'Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'];
  visibleItems: number = 10;
  searchText: string = '';
  highlightedRow: any = null;

  constructor(private http: HttpClient) {
    this.http
      .get('http://www.json-generator.com/api/json/get/cfDQtoFAde?indent=2')
      .subscribe((data: any) => {
        data.forEach((el: any, index: number) => {
          el.id = index + 1;
        });
        this.mdbTableEditor.dataArray = data;
      });
  }

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  ngOnInit() {
    this.firstFormGroup = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
    });
    this.secondFormGroup = new FormGroup({
      password: new FormControl('', Validators.required),
    });
  }

If you check my code, you should get this result:

To show the table border try add table-bordered class to your table

If your problem persists, I would like to ask you to send me some demo application on which I will be able to reproduce your problem.

Best Regards, Bartosz.