Table Editor

Bootstrap table editable plugin

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

To start working with the Table Editor, see the "Getting Started" tab on this page.

You can use four different types of editor:

Basic editor with the modal
Extended version with the ability to edit a particular line without using a modal
Extended version with the ability to edit table data content when clicking on any table data
Extended version with the ability to edit table data using show bubble edit.

How editors work

Editors work if you have a wrapper with class wrapper-editor for each table and a specific class to buttons. The modal editor needs a modal to correctly run.

Initiate function with default options.

Show code Edit in sandbox

        
            
      $('#your-table-id').mdbEditor({
        headerLength: 6,
        evenTextColor: '#000',
        oddTextColor: '#000',
        bgEvenColor: '',
        bgOddColor: '',
        thText: '',
        thBg: '',
        modalEditor: false,
        bubbleEditor: false,
        contentEditor: false,
        rowEditor: false
      });

Editor with modal

This version of the Editor allows you to add, edit and remove rows by using a modal.

Select a row and click the "Edit" button if you want to make changes in the given row. "Delete" button works the same way.

How modal editor works

See the documentation about modals.

The modal editor will work correctly if you have a wrapper with class wrapper-editor for each table.

To initialise the display of modals during click you have to have a form with a wrapper with class modalWrapper.

A modal editor has three modals and each modal has its own id and data-* and aria-* attributes.

Every modal needs its own classes to work correctly with a plugin. Everything that you need is in a code below.

0 row selected

Add

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Jenette Caldwell	Development Lead	New York	30	2011/09/03	$345,000
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25	$675,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20	$85,600
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Gavin Joyce	Developer	Edinburgh	42	2010/12/22	$92,575
Jennifer Chang	Regional Director	Singapore	28	2010/11/14	$357,650
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11	$850,000
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14	$163,000
Michelle House	Integration Specialist	Sidney	37	2011/06/02	$95,400
Suki Burks	Developer	London	53	2009/10/22	$114,500
Prescott Bartlett	Technical Author	London	27	2011/05/07	$145,000
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26	$235,500
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09	$324,050
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16	$164,500
Hope Fuentes	Secretary	San Francisco	41	2010/02/12	$109,850
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500
Timothy Mooney	Office Manager	London	37	2008/12/11	$136,200
Jackson Bradshaw	Director	New York	65	2008/09/26	$645,750
Olivia Liang	Support Engineer	Singapore	64	2011/02/03	$234,500
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575
Thor Walton	Developer	New York	61	2013/08/11	$98,540
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09	$138,575
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$125,250
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$115,000
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01	$75,650
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600
Hermione Butler	Regional Director	London	47	2011/03/21	$356,250
Lael Greer	Systems Administrator	London	21	2009/02/27	$103,500
Jonas Alexander	Developer	San Francisco	30	2010/07/14	$86,500
Shad Decker	Regional Director	Edinburgh	51	2008/11/13	$183,000
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27	$183,000
Donna Snider	Customer Support	New York	27	2011/01/25	$112,000
Name	Position	Office	Age	Start date	Salary

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">

          <div class="block my-4">
            <div class="d-flex justify-content-center">
              <p class="h5 text-primary createShowP">0 row selected</p>
            </div>
          </div>

          <div class="row d-flex justify-content-center modalWrapper">
            <div class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAdd"
              aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
                    <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <div class="md-form mb-5">
                      <input type="text" id="inputName" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputName">Name</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputPosition" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputPosition">Position</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputOfficeInput" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputOfficeInput">Office</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputAge" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputAge">Age</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="date" id="inputDate" class="form-control" placeholder="Select Date">
                      <label data-error="wrong" data-success="right" for="inputDate"></label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputSalary" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputSalary">Salary</label>
                    </div>

                  </div>
                  <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
                    <button class="btn btn-outline-primary btn-block buttonAdd" data-dismiss="modal">Add form
                      <i class="fas fa-paper-plane-o ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center">
              <a href="" class="btn btn-info btn-rounded btn-sm" data-toggle="modal" data-target="#modalAdd">Add<i
                  class="fas fa-plus-square ml-1"></i></a>
            </div>

            <div class="modal fade modalEditClass" id="modalEdit" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>
                    <button type="button" class="close text-secondary" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <div class="md-form mb-5">
                      <input type="text" id="formNameEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formNameEdit">Name</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formPositionEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formPositionEdit">Position</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formOfficeEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formOfficeEdit">Office</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formAgeEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formAgeEdit">Age</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formDateEdit" class="form-control datepicker">
                      <label data-error="wrong" data-success="right" for="formDateEdit">Date</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formSalaryEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formSalaryEdit">Salary</label>
                    </div>


                  </div>
                  <div class="modal-footer d-flex justify-content-center editInsideWrapper">
                    <button class="btn btn-outline-secondary btn-block editInside" data-dismiss="modal">Edit
                      form
                      <i class="fas fa-paper-plane-o ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center buttonEditWrapper">
              <button class="btn btn-info btn-rounded btn-sm buttonEdit" data-toggle="modal" data-target="#modalEdit"
                disabled>Edit<i class="fas fa-pencil-square-o ml-1"></i></a>
            </div>

            <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalDelete"
              aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
                    <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <p class="text-center h4">Are you sure to delete selected row?</p>

                  </div>
                  <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
                    <button type="button" class="btn btn-danger btnYesClass" id="btnYes" data-dismiss="modal">Yes</button>
                    <button type="button" class="btn btn-primary btnNoClass" id="btnNo" data-dismiss="modal">No</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center">
              <button class="btn btn-danger btn-sm btn-rounded buttonDelete" data-toggle="modal" disabled data-target="#modalDelete"
                disabled>Delete<i class="fas fa-times ml-1"></i></a>
            </div>
          </div>

          <table id="dtBasicExample" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th class="th-sm">Name

                </th>
                <th class="th-sm">Position

                </th>
                <th class="th-sm">Office

                </th>
                <th class="th-sm">Age

                </th>
                <th class="th-sm">Start date

                </th>
                <th class="th-sm">Salary

                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
              </tr>
              <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
              </tr>
              <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
              </tr>
              <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
              </tr>
              <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
              </tr>
              <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
              </tr>
              <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
              </tr>
              <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
              </tr>
              <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
              </tr>
              <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
              </tr>
              <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
              </tr>
              <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
              </tr>
              <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
              </tr>
              <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
              </tr>
              <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
              </tr>
              <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
              </tr>
              <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
              </tr>
              <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
              </tr>
              <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
              </tr>
              <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
              </tr>
              <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
              </tr>
              <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
              </tr>
              <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
              </tr>
              <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
              </tr>
              <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
              </tr>
              <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
              </tr>
              <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
              </tr>
              <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
              </tr>
              <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
              </tr>
              <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
              </tr>
              <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
              </tr>
              <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
              </tr>
              <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
              </tr>
              <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
              </tr>
              <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
              </tr>
              <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
              </tr>
              <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
              </tr>
              <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
              </tr>
              <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
              </tr>
              <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
              </tr>
              <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
              </tr>
              <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
              </tr>
              <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
              </tr>
              <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
              </tr>
              <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
              </tr>
              <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
              </tr>
              <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
              </tr>
              <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
              </tr>
              <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>$145,600</td>
              </tr>
              <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
              </tr>
              <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
              </tr>
              <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
              </tr>
              <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
              </tr>
              <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
              </tr>
              <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Name
                </th>
                <th>Position
                </th>
                <th>Office
                </th>
                <th>Age
                </th>
                <th>Start date
                </th>
                <th>Salary
                </th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            

        $('#dtBasicExample').mdbEditor({
          mdbEditor: true
        });
        $('.dataTables_length').addClass('bs-select');

Row Editor

This version of the Editor allows you to add, edit and remove rows by activating an editiing mode.

All operations are carried out directly on a row.

How the row editor works

The row editor is working correctly if you have a wrapper with the class wrapper-editor for each table.

Also you need to have an empty div with classes closeByClick and d-none.

To initiate the display of a form you during a click you need a form with a wrapper with classes showForm and d-none and corect styles.

To initialise you have to have a wrapper with class button-wrapper for buttons with properly classes for each button like:

addNewColumn
removeColumns
addNewRows

Everything that you need is in the code below the table.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Jenette Caldwell	Development Lead	New York	30	2011/09/03	$345,000
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25	$675,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20	$85,600
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Gavin Joyce	Developer	Edinburgh	42	2010/12/22	$92,575
Jennifer Chang	Regional Director	Singapore	28	2010/11/14	$357,650
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11	$850,000
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14	$163,000
Michelle House	Integration Specialist	Sidney	37	2011/06/02	$95,400
Suki Burks	Developer	London	53	2009/10/22	$114,500
Prescott Bartlett	Technical Author	London	27	2011/05/07	$145,000
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26	$235,500
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09	$324,050
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16	$164,500
Hope Fuentes	Secretary	San Francisco	41	2010/02/12	$109,850
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500
Timothy Mooney	Office Manager	London	37	2008/12/11	$136,200
Jackson Bradshaw	Director	New York	65	2008/09/26	$645,750
Olivia Liang	Support Engineer	Singapore	64	2011/02/03	$234,500
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575
Thor Walton	Developer	New York	61	2013/08/11	$98,540
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09	$138,575
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$125,250
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$115,000
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01	$75,650
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600
Hermione Butler	Regional Director	London	47	2011/03/21	$356,250
Lael Greer	Systems Administrator	London	21	2009/02/27	$103,500
Jonas Alexander	Developer	San Francisco	30	2010/07/14	$86,500
Shad Decker	Regional Director	Edinburgh	51	2008/11/13	$183,000
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27	$183,000
Donna Snider	Customer Support	New York	27	2011/01/25	$112,000
Name	Position	Office	Age	Start date	Salary

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">

          <div class="d-flex justify-content-center buttons-wrapper">
            <button id="" class="btn btn-sm btn-teal btn-rounded addNewColumn">Activate edits</button>
            <button id="" class="btn btn-sm btn-mdb-color btn-rounded removeColumns" disabled>Deactivate edits</button>
            <button id="" class="btn btn-sm btn-info btn-rounded addNewRows">Add new rows</button>
          </div>

          <div class="closeByClick d-none"></div>

          <div class="showForm d-none" style="position: fixed; top: 20%; left:50%; transform: translate(-50%, -50%); z-index: 1100;">

            <form class="text-center border border-light p-5" style="background: white;">

              <button type="button" class="close position-relative button-x" style="top:-12%; right: -5%">
                <span aria-hidden="true" class="text-danger">×</span>
              </button>

              <h3 class="h3 my-3 text-danger font-weight-bold">Delete</h3>

              <hr class="mt-2 mb-3">

              <p class="text-center h5 py-2 pb-3">Are you sure to delete selected rows?</p>

              <hr class="mt-2 mb-3">

              <div class="d-flex justify-content-center buttonYesNoWrapper">
                <button type="button" class="btn btn-danger btnYes btn-sm">Yes</button>
                <button type="button" class="btn btn-primary btnNo btn-sm">No</button>
              </div>
            </form>

          </div>

          <table id="dtBasicExample-1" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th class="th-sm">Name

                </th>
                <th class="th-sm">Position

                </th>
                <th class="th-sm">Office

                </th>
                <th class="th-sm">Age

                </th>
                <th class="th-sm">Start date

                </th>
                <th class="th-sm">Salary

                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
              </tr>
              <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
              </tr>
              <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
              </tr>
              <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
              </tr>
              <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
              </tr>
              <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
              </tr>
              <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
              </tr>
              <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
              </tr>
              <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
              </tr>
              <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
              </tr>
              <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
              </tr>
              <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
              </tr>
              <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
              </tr>
              <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
              </tr>
              <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
              </tr>
              <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
              </tr>
              <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
              </tr>
              <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
              </tr>
              <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
              </tr>
              <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
              </tr>
              <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
              </tr>
              <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
              </tr>
              <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
              </tr>
              <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
              </tr>
              <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
              </tr>
              <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
              </tr>
              <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
              </tr>
              <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
              </tr>
              <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
              </tr>
              <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
              </tr>
              <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
              </tr>
              <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
              </tr>
              <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
              </tr>
              <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
              </tr>
              <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
              </tr>
              <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
              </tr>
              <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
              </tr>
              <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
              </tr>
              <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
              </tr>
              <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
              </tr>
              <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
              </tr>
              <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
              </tr>
              <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
              </tr>
              <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
              </tr>
              <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
              </tr>
              <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
              </tr>
              <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
              </tr>
              <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
              </tr>
              <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>$145,600</td>
              </tr>
              <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
              </tr>
              <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
              </tr>
              <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
              </tr>
              <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
              </tr>
              <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
              </tr>
              <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Name
                </th>
                <th>Position
                </th>
                <th>Office
                </th>
                <th>Age
                </th>
                <th>Start date
                </th>
                <th>Salary
                </th>
              </tr>
            </tfoot>
          </table>

        </div>

        
            
        $('#dtBasicExample-1').mdbEditor({
          rowEditor: true
        });
        $('.dataTables_length').addClass('bs-select');

Content Editor

The content editor has a special feature that when you click on each piece of table data it becomes editable.

This example shows how to use content editor. It's very easy to use. You have three buttons and each buttons has its own function.

The first button activates the editor and if you have an active input in some table data, after a click that button with an active id will be disabled until you click it again or when you use a sorting option.

The second button adds new table row on the first DataTable page (always). If you have an inactive editor, a new table row will be disabled.

The third button removes first table row on the first DataTable page (always) after a click or if you have selected some table data with an input field, that button will remove the selected table data with the whole table row.

Name	Position	Office	Extn.	Start date	Salary
Name	Position	Office	Extn.	Start date	Salary

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">

          <div class="d-flex justify-content-center buttons-wrapper my-3">
            <button class="btn btn-rounded text-white blue darken-3 btn-sm add-content-edit" type="button"><i class="fas fa-toggle-off"></i></button>
            <button class=" btn btn-rounded text-white purple
                        lighten-2 btn-sm add-new-row"
              type="button">
              <i class="fas fa-plus"></i></button>
            <button class="btn btn-rounded text-white red btn-sm remove-first-tr" type="button"> <i class="fas fa-eraser"></i></button>
          </div>

          <table id="contentEx" class="table table-striped display" cellspacing=" 0" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            

        let dataSet = [
          ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011-04-25", "$320,800"],
          ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011-07-25", "$170,750"],
          ["Ashton Third Cox", "Junior Technical Author", "San Francisco", "1562", "2009-01-12", "$86,000"],
          ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012-03-29", "$433,060"],
          ["Airi", "Accountant", "Tokyo", "5407", "2008-11-28", "$162,700"],
          ["Brielle Williamson Need More Space To Check It", "Integration Specialist", "New York", "4804", "2012-12-02",
          "$372,000"],
          ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012-08-06", "$137,500"],
          ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010-10-14", "$327,900"],
          ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009-09-15", "$205,500"],
          ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008-12-13", "$103,600"],
          ["Jena Gaines", "Office Manager", "London", "3814", "2008-12-19", "$90,560"],
          ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013-03-03", "$342,000"],
          ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008-10-16", "$470,600"],
          ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012-12-18", "$313,500"],
          ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010-03-17", "$385,750"],
          ["Michael Silva", "Marketing Designer", "London", "1581", "2012-11-27", "$198,500"],
          ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010-06-09", "$725,000"],
          ["Gloria Little", "Systems Administrator", "New York", "1721", "2009-04-10", "$237,500"],
          ["Bradley Fourth Fourth Greer", "Software Engineer", "London", "2558", "2012-10-13", "$132,000"],
          ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012-09-26", "$217,500"],
          ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011-09-03", "$345,000"],
          ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009-06-25", "$675,000"],
          ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011-12-12", "$106,450"],
          ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010-09-20", "$85,600"],
          ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009-10-09", "$1,200,000"],
          ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010-12-22", "$92,575"],
          ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010-11-14", "$357,650"],
          ["Brenden Fifth Example Some Wagner", "Software Engineer", "San Francisco", "1314", "2011-06-07", "$206,850"],
          ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010-03-11", "$850,000"],
          ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011-08-14", "$163,000"],
          ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011-06-02", "$95,400"],
          ["Suki Burks", "Developer", "London", "6832", "2009-10-22", "$114,500"],
          ["Prescott Bartlett", "Technical Author", "London", "3606", "2011-05-07", "$145,000"],
          ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008-10-26", "$235,500"],
          ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011-03-09", "$324,050"],
          ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009-12-09", "$85,675"]
        ];

        $(document).ready(function () {
          $('#contentEx').DataTable({
          data: dataSet,
          columns: [{
           title: "Name"
          },
          {
           title: "Position"
          },
          {
            title: "Office"
          },
          {
           title: "Extn."
          },
          {
            title: "Start date"
          },
          {
           title: "Salary"
          }
          ]
        });

        $('#contentEx').mdbEditor({
         contentEditor: true
        });

        $('.dataTables_length').addClass('bs-select');

Bubble Editor

This example shows how use content bubble editor. It's very easy to use. You have three buttons and each button have its own functions.

The first button activates the editor.

The second button adds a new table row to the first DataTable page (always). If you have an inactive editor, a new table row will be disabled.

The third button remove the first table row on the first DataTable page (always) after a click or when you will have selected some table data with an input field.

Name	Position	Office	Extn.	Start date	Salary
Name	Position	Office	Extn.	Start date	Salary

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">

          <div class="d-flex justify-content-center buttons-wrapper my-3">
            <button class="btn btn-rounded text-white blue darken-3 btn-sm add-bubble-edit" type="button" disabled><i
                class="fas fa-toggle-off" disabled></i></button>
            <button class=" btn btn-rounded text-white purple
                        lighten-2 btn-sm addNewRow" type="button"
              disabled>
              <i class="fas fa-plus" disabled></i></button>
            <button class="btn btn-rounded text-white red btn-sm removeFirstTr" type="button" disabled><i class="fas fa-eraser"
                disabled></i></button>
          </div>

          <table id="bubbleEx" class="table table-striped display" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            
        let dataSet = [
          ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011-04-25", "$320,800"],
          ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011-07-25", "$170,750"],
          ["Ashton Third Cox", "Junior Technical Author", "San Francisco", "1562", "2009-01-12", "$86,000"],
          ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012-03-29", "$433,060"],
          ["Airi", "Accountant", "Tokyo", "5407", "2008-11-28", "$162,700"],
          ["Brielle Williamson Need More Space To Check It", "Integration Specialist", "New York", "4804", "2012-12-02",
          "$372,000"],
          ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012-08-06", "$137,500"],
          ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010-10-14", "$327,900"],
          ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009-09-15", "$205,500"],
          ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008-12-13", "$103,600"],
          ["Jena Gaines", "Office Manager", "London", "3814", "2008-12-19", "$90,560"],
          ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013-03-03", "$342,000"],
          ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008-10-16", "$470,600"],
          ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012-12-18", "$313,500"],
          ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010-03-17", "$385,750"],
          ["Michael Silva", "Marketing Designer", "London", "1581", "2012-11-27", "$198,500"],
          ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010-06-09", "$725,000"],
          ["Gloria Little", "Systems Administrator", "New York", "1721", "2009-04-10", "$237,500"],
          ["Bradley Fourth Fourth Greer", "Software Engineer", "London", "2558", "2012-10-13", "$132,000"],
          ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012-09-26", "$217,500"],
          ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011-09-03", "$345,000"],
          ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009-06-25", "$675,000"],
          ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011-12-12", "$106,450"],
          ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010-09-20", "$85,600"],
          ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009-10-09", "$1,200,000"],
          ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010-12-22", "$92,575"],
          ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010-11-14", "$357,650"],
          ["Brenden Fifth Example Some Wagner", "Software Engineer", "San Francisco", "1314", "2011-06-07", "$206,850"],
          ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010-03-11", "$850,000"],
          ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011-08-14", "$163,000"],
          ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011-06-02", "$95,400"],
          ["Suki Burks", "Developer", "London", "6832", "2009-10-22", "$114,500"],
          ["Prescott Bartlett", "Technical Author", "London", "3606", "2011-05-07", "$145,000"],
          ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008-10-26", "$235,500"],
          ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011-03-09", "$324,050"],
          ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009-12-09", "$85,675"]
        ];

        $(document).ready(function () {
          $('#bubbleEx').DataTable({
          data: dataSet,
          columns: [{
              title: "Name"
            },
            {
              title: "Position"
            },
            {
              title: "Office"
            },
            {
              title: "Extn."
            },
            {
              title: "Start date"
            },
            {
              title: "Salary"
            }
          ]
        });

        $('#bubbleEx').mdbEditor({
          bubbleEditor: true
        });

        $('.dataTables_length').addClass('bs-select');

Extended columns

The defalut length of table header in Table Editor is six.

If you want to have more/fewer columns and working correctly, you have to change each value in options and you have to send instructions to each editor

Defaults header length settings:

Show code Edit in sandbox

        
            
      $('#your-table-id').mdbEditor({
        headerLength: 6,
      });

Extended columns - Modal Editor

With our Table Editor plugin you can easily have more/fewer columns in the Table Editor with Modals than in the default example (6). You just you have to do this:

Add a new (or delete an old one) th in thead.
Add a new (or delete an old one) td to each tr in tbody.
Add a new (or delete an old one) inputs in modalAdd and modalEdit.

Seven columns

0 row selected

Add

Name	Position	Office	Age	Start date	Salary	Example
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800	Example
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750	Example
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	Example
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	Example
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700	Example
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	Example
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	Example
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900	Example
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	Example
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600	Example
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560	Example
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000	Example
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	Example
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	Example
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750	Example
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500	Example
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000	Example
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500	Example
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000	Example
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500	Example
Jenette Caldwell	Development Lead	New York	30	2011/09/03	$345,000	Example
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25	$675,000	Example
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450	Example
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20	$85,600	Example
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000	Example
Gavin Joyce	Developer	Edinburgh	42	2010/12/22	$92,575	Example
Jennifer Chang	Regional Director	Singapore	28	2010/11/14	$357,650	Example
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850	Example
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11	$850,000	Example
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14	$163,000	Example
Michelle House	Integration Specialist	Sidney	37	2011/06/02	$95,400	Example
Suki Burks	Developer	London	53	2009/10/22	$114,500	Example
Prescott Bartlett	Technical Author	London	27	2011/05/07	$145,000	Example
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26	$235,500	Example
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09	$324,050	Example
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675	Example
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16	$164,500	Example
Hope Fuentes	Secretary	San Francisco	41	2010/02/12	$109,850	Example
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500	Example
Timothy Mooney	Office Manager	London	37	2008/12/11	$136,200	Example
Jackson Bradshaw	Director	New York	65	2008/09/26	$645,750	Example
Olivia Liang	Support Engineer	Singapore	64	2011/02/03	$234,500	Example
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500	Example
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575	Example
Thor Walton	Developer	New York	61	2013/08/11	$98,540	Example
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500	Example
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09	$138,575	Example
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$125,250	Example
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$115,000	Example
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01	$75,650	Example
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600	Example
Hermione Butler	Regional Director	London	47	2011/03/21	$356,250	Example
Lael Greer	Systems Administrator	London	21	2009/02/27	$103,500	Example
Jonas Alexander	Developer	San Francisco	30	2010/07/14	$86,500	Example
Shad Decker	Regional Director	Edinburgh	51	2008/11/13	$183,000	Example
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27	$183,000	Example
Donna Snider	Customer Support	New York	27	2011/01/25	$112,000	Example
Name	Position	Office	Age	Start date	Salary	Example

Show code Edit in sandbox

HTML

        
            

        <div class="wrapper-editor">

          <div class="block my-4">
            <div class="d-flex justify-content-center">
              <p class="h5 text-primary createShowP">0 row selected</p>
            </div>
          </div>

          <div class="row d-flex justify-content-center modalWrapper">
            <div class="modal fade addNewInputs" id="modalAdd1" tabindex="-1" role="dialog" aria-labelledby="modalAdd"
              aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
                    <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <div class="md-form mb-5">
                      <input type="text" id="inputName1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputName1">Name</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputPosition1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputPosition1">Position</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputOfficeInput1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputOfficeInput1">Office</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputAge1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputAge1">Age</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="date" id="inputDate1" class="form-control" placeholder="Select Date">
                      <label data-error="wrong" data-success="right" for="inputDate1"></label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="inputSalary1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputSalary1">Salary</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="inputSalary1example" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputSalary1example">Example</label>
                    </div>
                  </div>
                  <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
                    <button class="btn btn-outline-primary btn-block buttonAdd" data-dismiss="modal">Add form
                      <i class="fas fa-paper-plane-o ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center">
              <a href="" class="btn btn-info btn-rounded btn-sm" data-toggle="modal" data-target="#modalAdd1">Add<i
                  class="fas fa-plus-square ml-1"></i></a>
            </div>

            <div class="modal fade modalEditClass" id="modalEdit1" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>
                    <button type="button" class="close text-secondary" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <div class="md-form mb-5">
                      <input type="text" id="formNameEdit1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formNameEdit1">Name</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formPositionEdit1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formPositionEdit1">Position</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formOfficeEdit1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formOfficeEdit1">Office</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formAgeEdit1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formAgeEdit1">Age</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formDateEdit1" class="form-control datepicker">
                      <label data-error="wrong" data-success="right" for="formDateEdit1">Date</label>
                    </div>

                    <div class="md-form mb-5">
                      <input type="text" id="formSalaryEdit1" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formSalaryEdit1">Salary</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="formSalaryEdit1ex" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formSalaryEdit1ex">Example</label>
                    </div>


                  </div>
                  <div class="modal-footer d-flex justify-content-center editInsideWrapper">
                    <button class="btn btn-outline-secondary btn-block editInside" data-dismiss="modal">Edit
                      form
                      <i class="fas fa-paper-plane-o ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center buttonEditWrapper">
              <button class="btn btn-info btn-rounded btn-sm buttonEdit" data-toggle="modal" data-target="#modalEdit1"
                disabled>Edit<i class="fas fa-pencil-square-o ml-1"></i></a>
            </div>

            <div class="modal fade" id="modalDelete1" tabindex="-1" role="dialog" aria-labelledby="modalDelete1"
              aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
                    <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <p class="text-center h4">Are you sure to delete selected row?</p>

                  </div>
                  <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
                    <button type="button" class="btn btn-danger btnYesClass" id="btnYes1" data-dismiss="modal">Yes</button>
                    <button type="button" class="btn btn-primary btnNoClass" id="btnNo1" data-dismiss="modal">No</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center">
              <button class="btn btn-danger btn-sm btn-rounded buttonDelete" data-toggle="modal" disabled data-target="#modalDelete"
                disabled>Delete<i class="fas fa-times ml-1"></i></a>
            </div>
          </div>

          <table id="dt-more-columns" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th class="th-sm">Name

                </th>
                <th class="th-sm">Position

                </th>
                <th class="th-sm">Office

                </th>
                <th class="th-sm">Age

                </th>
                <th class="th-sm">Start date

                </th>
                <th class="th-sm">Salary

                </th>
                <th class="th-sm">Example

                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>$145,600</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
                <td>Example</td>
              </tr>
              <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
                <td>Example</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Name
                </th>
                <th>Position
                </th>
                <th>Office
                </th>
                <th>Age
                </th>
                <th>Start date
                </th>
                <th>Salary
                </th>
                <th>Example
                </th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            

        $('#dt-more-columns').mdbEditor({
          modalEditor: true,
          headerLength: 7,
        });
        $('.dataTables_length').addClass('bs-select');

Fewer columns

You can easily have fewer columns.

Five columns

0 row selected

Add

Name	Position	Office	Age	Start date
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25
Garrett Winters	Accountant	Tokyo	63	2011/07/25
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29
Airi Satou	Accountant	Tokyo	33	2008/11/28
Brielle Williamson	Integration Specialist	New York	61	2012/12/02
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13
Jena Gaines	Office Manager	London	30	2008/12/19
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03
Charde Marshall	Regional Director	San Francisco	36	2008/10/16
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17
Michael Silva	Marketing Designer	London	66	2012/11/27
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09
Gloria Little	Systems Administrator	New York	59	2009/04/10
Bradley Greer	Software Engineer	London	41	2012/10/13
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26
Jenette Caldwell	Development Lead	New York	30	2011/09/03
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09
Gavin Joyce	Developer	Edinburgh	42	2010/12/22
Jennifer Chang	Regional Director	Singapore	28	2010/11/14
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14
Michelle House	Integration Specialist	Sidney	37	2011/06/02
Suki Burks	Developer	London	53	2009/10/22
Prescott Bartlett	Technical Author	London	27	2011/05/07
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16
Hope Fuentes	Secretary	San Francisco	41	2010/02/12
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14
Timothy Mooney	Office Manager	London	37	2008/12/11
Jackson Bradshaw	Director	New York	65	2008/09/26
Olivia Liang	Support Engineer	Singapore	64	2011/02/03
Bruno Nash	Software Engineer	London	38	2011/05/03
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19
Thor Walton	Developer	New York	61	2013/08/11
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09
Zenaida Frank	Software Engineer	New York	63	2010/01/04
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01
Cara Stevens	Sales Assistant	New York	46	2011/12/06
Hermione Butler	Regional Director	London	47	2011/03/21
Lael Greer	Systems Administrator	London	21	2009/02/27
Jonas Alexander	Developer	San Francisco	30	2010/07/14
Shad Decker	Regional Director	Edinburgh	51	2008/11/13
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27
Donna Snider	Customer Support	New York	27	2011/01/25
Name	Position	Office	Age	Start date

Show code Edit in sandbox

HTML
JS

        
            
          <div class="wrapper-editor">

            <div class="block my-4">
              <div class="d-flex justify-content-center">
                <p class="h5 text-primary createShowP">0 row selected</p>
              </div>
            </div>
            <div class="row d-flex justify-content-center modalWrapper">
              <div class="modal fade addNewInputs" id="modalAdd15" tabindex="-1" role="dialog" aria-labelledby="modalAdd15"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header text-center">
                      <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
                      <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body mx-3 modal-add-inputs">
                      <div class="md-form mb-5">
                        <input type="text" id="inputName15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="inputName15">Name</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="text" id="inputPosition15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="inputPosition15">Position</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="text" id="inputOfficeInput15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="inputOfficeInput15">Office</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="text" id="inputAge15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="inputAge15">Age</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="date" id="inputDate" class="form-control" placeholder="Select Date">
                        <label data-error="wrong" data-success="right" for="inputDate15"></label>
                      </div>
                    </div>
                    <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
                      <button class="btn btn-outline-primary btn-block buttonAdd" data-dismiss="modal">Add form
                        <i class="far fa-paper-plane ml-1"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-center">
                <a href="" class="btn btn-info btn-rounded btn-sm" data-toggle="modal" data-target="#modalAdd15">Add<i
                    class="fas fa-plus-square ml-1"></i></a>
              </div>
              <div class="modal fade modalEditClass" id="modalEdit15" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header text-center">
                      <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>
                      <button type="button" class="close text-secondary" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body mx-3 modal-inputs">
                      <div class="md-form mb-5">
                        <input type="text" id="formNameEdit15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="formNameEdit15">Name</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="text" id="formPositionEdit15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="formPositionEdit15">Position</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="text" id="formOfficeEdit15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="formOfficeEdit15">Office</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="text" id="formAgeEdit15" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="formAgeEdit15">Age</label>
                      </div>
                      <div class="md-form mb-5">
                        <input type="text" id="formDateEdit" class="form-control datepicker">
                        <label data-error="wrong" data-success="right" for="formDateEdit15">Date</label>
                      </div>
                    </div>
                    <div class="modal-footer d-flex justify-content-center editInsideWrapper">
                      <button class="btn btn-outline-secondary btn-block editInside" data-dismiss="modal">Edit
                        form
                        <i class="far fa-paper-plane ml-1"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-center buttonEditWrapper">
                <button class="btn btn-info btn-rounded btn-sm buttonEdit" data-toggle="modal" data-target="#modalEdit15"
                  disabled>Edit<i class="fas fa-pen-square ml-1"></i></a>
              </div>
              <div class="modal fade" id="modalDelete15" tabindex="-1" role="dialog" aria-labelledby="modalDelete15"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header text-center">
                      <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
                      <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body mx-3">
                      <p class="text-center h4">Are you sure to delete selected row?</p>
                    </div>
                    <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
                      <button type="button" class="btn btn-outline-danger btnYesClass" id="btnYes15" data-dismiss="modal">Yes
                        <i class="far fa-paper-plane ml-1"></i>
                      </button>
                      <button type="button" class="btn btn-outline-primary btnNoClass" id="btnNo15" data-dismiss="modal">No
                        <i class="far fa-paper-plane ml-1"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-center">
                <button class="btn btn-danger btn-sm btn-rounded buttonDelete" data-toggle="modal" disabled data-target="#modalDelete15"
                  disabled>Delete<i class="fas fa-times ml-1"></i></a>
              </div>
            </div>
            <table id="dt-less-columns" class="table table-striped table-bordered" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th class="th-sm">Name
                  </th>
                  <th class="th-sm">Position
                  </th>
                  <th class="th-sm">Office
                  </th>
                  <th class="th-sm">Age
                  </th>
                  <th class="th-sm">Start date
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
                  <td>Edinburgh</td>
                  <td>61</td>
                  <td>2011/04/25</td>
                </tr>
                <tr>
                  <td>Garrett Winters</td>
                  <td>Accountant</td>
                  <td>Tokyo</td>
                  <td>63</td>
                  <td>2011/07/25</td>
                </tr>
                <tr>
                  <td>Ashton Cox</td>
                  <td>Junior Technical Author</td>
                  <td>San Francisco</td>
                  <td>66</td>
                  <td>2009/01/12</td>
                </tr>
                <tr>
                  <td>Cedric Kelly</td>
                  <td>Senior Javascript Developer</td>
                  <td>Edinburgh</td>
                  <td>22</td>
                  <td>2012/03/29</td>
                </tr>
                <tr>
                  <td>Airi Satou</td>
                  <td>Accountant</td>
                  <td>Tokyo</td>
                  <td>33</td>
                  <td>2008/11/28</td>
                </tr>
                <tr>
                  <td>Brielle Williamson</td>
                  <td>Integration Specialist</td>
                  <td>New York</td>
                  <td>61</td>
                  <td>2012/12/02</td>
                </tr>
                <tr>
                  <td>Herrod Chandler</td>
                  <td>Sales Assistant</td>
                  <td>San Francisco</td>
                  <td>59</td>
                  <td>2012/08/06</td>
                </tr>
                <tr>
                  <td>Rhona Davidson</td>
                  <td>Integration Specialist</td>
                  <td>Tokyo</td>
                  <td>55</td>
                  <td>2010/10/14</td>
                </tr>
                <tr>
                  <td>Colleen Hurst</td>
                  <td>Javascript Developer</td>
                  <td>San Francisco</td>
                  <td>39</td>
                  <td>2009/09/15</td>
                </tr>
                <tr>
                  <td>Sonya Frost</td>
                  <td>Software Engineer</td>
                  <td>Edinburgh</td>
                  <td>23</td>
                  <td>2008/12/13</td>
                </tr>
                <tr>
                  <td>Jena Gaines</td>
                  <td>Office Manager</td>
                  <td>London</td>
                  <td>30</td>
                  <td>2008/12/19</td>
                </tr>
                <tr>
                  <td>Quinn Flynn</td>
                  <td>Support Lead</td>
                  <td>Edinburgh</td>
                  <td>22</td>
                  <td>2013/03/03</td>
                </tr>
                <tr>
                  <td>Charde Marshall</td>
                  <td>Regional Director</td>
                  <td>San Francisco</td>
                  <td>36</td>
                  <td>2008/10/16</td>
                </tr>
                <tr>
                  <td>Haley Kennedy</td>
                  <td>Senior Marketing Designer</td>
                  <td>London</td>
                  <td>43</td>
                  <td>2012/12/18</td>
                </tr>
                <tr>
                  <td>Tatyana Fitzpatrick</td>
                  <td>Regional Director</td>
                  <td>London</td>
                  <td>19</td>
                  <td>2010/03/17</td>
                </tr>
                <tr>
                  <td>Michael Silva</td>
                  <td>Marketing Designer</td>
                  <td>London</td>
                  <td>66</td>
                  <td>2012/11/27</td>
                </tr>
                <tr>
                  <td>Paul Byrd</td>
                  <td>Chief Financial Officer (CFO)</td>
                  <td>New York</td>
                  <td>64</td>
                  <td>2010/06/09</td>
                </tr>
                <tr>
                  <td>Gloria Little</td>
                  <td>Systems Administrator</td>
                  <td>New York</td>
                  <td>59</td>
                  <td>2009/04/10</td>
                </tr>
                <tr>
                  <td>Bradley Greer</td>
                  <td>Software Engineer</td>
                  <td>London</td>
                  <td>41</td>
                  <td>2012/10/13</td>
                </tr>
                <tr>
                  <td>Dai Rios</td>
                  <td>Personnel Lead</td>
                  <td>Edinburgh</td>
                  <td>35</td>
                  <td>2012/09/26</td>
                </tr>
                <tr>
                  <td>Jenette Caldwell</td>
                  <td>Development Lead</td>
                  <td>New York</td>
                  <td>30</td>
                  <td>2011/09/03</td>
                </tr>
                <tr>
                  <td>Yuri Berry</td>
                  <td>Chief Marketing Officer (CMO)</td>
                  <td>New York</td>
                  <td>40</td>
                  <td>2009/06/25</td>
                </tr>
                <tr>
                  <td>Caesar Vance</td>
                  <td>Pre-Sales Support</td>
                  <td>New York</td>
                  <td>21</td>
                  <td>2011/12/12</td>
                </tr>
                <tr>
                  <td>Doris Wilder</td>
                  <td>Sales Assistant</td>
                  <td>Sidney</td>
                  <td>23</td>
                  <td>2010/09/20</td>
                </tr>
                <tr>
                  <td>Angelica Ramos</td>
                  <td>Chief Executive Officer (CEO)</td>
                  <td>London</td>
                  <td>47</td>
                  <td>2009/10/09</td>
                </tr>
                <tr>
                  <td>Gavin Joyce</td>
                  <td>Developer</td>
                  <td>Edinburgh</td>
                  <td>42</td>
                  <td>2010/12/22</td>
                </tr>
                <tr>
                  <td>Jennifer Chang</td>
                  <td>Regional Director</td>
                  <td>Singapore</td>
                  <td>28</td>
                  <td>2010/11/14</td>
                </tr>
                <tr>
                  <td>Brenden Wagner</td>
                  <td>Software Engineer</td>
                  <td>San Francisco</td>
                  <td>28</td>
                  <td>2011/06/07</td>
                </tr>
                <tr>
                  <td>Fiona Green</td>
                  <td>Chief Operating Officer (COO)</td>
                  <td>San Francisco</td>
                  <td>48</td>
                  <td>2010/03/11</td>
                </tr>
                <tr>
                  <td>Shou Itou</td>
                  <td>Regional Marketing</td>
                  <td>Tokyo</td>
                  <td>20</td>
                  <td>2011/08/14</td>
                </tr>
                <tr>
                  <td>Michelle House</td>
                  <td>Integration Specialist</td>
                  <td>Sidney</td>
                  <td>37</td>
                  <td>2011/06/02</td>
                </tr>
                <tr>
                  <td>Suki Burks</td>
                  <td>Developer</td>
                  <td>London</td>
                  <td>53</td>
                  <td>2009/10/22</td>
                </tr>
                <tr>
                  <td>Prescott Bartlett</td>
                  <td>Technical Author</td>
                  <td>London</td>
                  <td>27</td>
                  <td>2011/05/07</td>
                </tr>
                <tr>
                  <td>Gavin Cortez</td>
                  <td>Team Leader</td>
                  <td>San Francisco</td>
                  <td>22</td>
                  <td>2008/10/26</td>
                </tr>
                <tr>
                  <td>Martena Mccray</td>
                  <td>Post-Sales support</td>
                  <td>Edinburgh</td>
                  <td>46</td>
                  <td>2011/03/09</td>
                </tr>
                <tr>
                  <td>Unity Butler</td>
                  <td>Marketing Designer</td>
                  <td>San Francisco</td>
                  <td>47</td>
                  <td>2009/12/09</td>
                </tr>
                <tr>
                  <td>Howard Hatfield</td>
                  <td>Office Manager</td>
                  <td>San Francisco</td>
                  <td>51</td>
                  <td>2008/12/16</td>
                </tr>
                <tr>
                  <td>Hope Fuentes</td>
                  <td>Secretary</td>
                  <td>San Francisco</td>
                  <td>41</td>
                  <td>2010/02/12</td>
                </tr>
                <tr>
                  <td>Vivian Harrell</td>
                  <td>Financial Controller</td>
                  <td>San Francisco</td>
                  <td>62</td>
                  <td>2009/02/14</td>
                </tr>
                <tr>
                  <td>Timothy Mooney</td>
                  <td>Office Manager</td>
                  <td>London</td>
                  <td>37</td>
                  <td>2008/12/11</td>
                </tr>
                <tr>
                  <td>Jackson Bradshaw</td>
                  <td>Director</td>
                  <td>New York</td>
                  <td>65</td>
                  <td>2008/09/26</td>
                </tr>
                <tr>
                  <td>Olivia Liang</td>
                  <td>Support Engineer</td>
                  <td>Singapore</td>
                  <td>64</td>
                  <td>2011/02/03</td>
                </tr>
                <tr>
                  <td>Bruno Nash</td>
                  <td>Software Engineer</td>
                  <td>London</td>
                  <td>38</td>
                  <td>2011/05/03</td>
                </tr>
                <tr>
                  <td>Sakura Yamamoto</td>
                  <td>Support Engineer</td>
                  <td>Tokyo</td>
                  <td>37</td>
                  <td>2009/08/19</td>
                </tr>
                <tr>
                  <td>Thor Walton</td>
                  <td>Developer</td>
                  <td>New York</td>
                  <td>61</td>
                  <td>2013/08/11</td>
                </tr>
                <tr>
                  <td>Finn Camacho</td>
                  <td>Support Engineer</td>
                  <td>San Francisco</td>
                  <td>47</td>
                  <td>2009/07/07</td>
                </tr>
                <tr>
                  <td>Serge Baldwin</td>
                  <td>Data Coordinator</td>
                  <td>Singapore</td>
                  <td>64</td>
                  <td>2012/04/09</td>
                </tr>
                <tr>
                  <td>Zenaida Frank</td>
                  <td>Software Engineer</td>
                  <td>New York</td>
                  <td>63</td>
                  <td>2010/01/04</td>
                </tr>
                <tr>
                  <td>Zorita Serrano</td>
                  <td>Software Engineer</td>
                  <td>San Francisco</td>
                  <td>56</td>
                  <td>2012/06/01</td>
                </tr>
                <tr>
                  <td>Jennifer Acosta</td>
                  <td>Junior Javascript Developer</td>
                  <td>Edinburgh</td>
                  <td>43</td>
                  <td>2013/02/01</td>
                </tr>
                <tr>
                  <td>Cara Stevens</td>
                  <td>Sales Assistant</td>
                  <td>New York</td>
                  <td>46</td>
                  <td>2011/12/06</td>
                </tr>
                <tr>
                  <td>Hermione Butler</td>
                  <td>Regional Director</td>
                  <td>London</td>
                  <td>47</td>
                  <td>2011/03/21</td>
                </tr>
                <tr>
                  <td>Lael Greer</td>
                  <td>Systems Administrator</td>
                  <td>London</td>
                  <td>21</td>
                  <td>2009/02/27</td>
                </tr>
                <tr>
                  <td>Jonas Alexander</td>
                  <td>Developer</td>
                  <td>San Francisco</td>
                  <td>30</td>
                  <td>2010/07/14</td>
                </tr>
                <tr>
                  <td>Shad Decker</td>
                  <td>Regional Director</td>
                  <td>Edinburgh</td>
                  <td>51</td>
                  <td>2008/11/13</td>
                </tr>
                <tr>
                  <td>Michael Bruce</td>
                  <td>Javascript Developer</td>
                  <td>Singapore</td>
                  <td>29</td>
                  <td>2011/06/27</td>
                </tr>
                <tr>
                  <td>Donna Snider</td>
                  <td>Customer Support</td>
                  <td>New York</td>
                  <td>27</td>
                  <td>2011/01/25</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>Name
                  </th>
                  <th>Position
                  </th>
                  <th>Office
                  </th>
                  <th>Age
                  </th>
                  <th>Start date
                  </th>
                </tr>
              </tfoot>
            </table>
          </div>

        
            

          $('#dt-less-columns').mdbEditor({
            modalEditor: true,
            headerLength: 5,
          });
          $('.dataTables_length').addClass('bs-select');

Extended columns - Row Editor

With our Table Editor plugin you can easily have more/fewer columns in the Table Row Editor than the default example (6). You just have to do this:

Add a new (or delete an old one) th in thead.
Add a new (or delete an old one) td to each tr in tbody.

If you are using a variable to store your table data you have to add/delete that variables data for your exmaples.

Note: If you are using a variable to store your table data you have to add/delete that variable data for your exmaples

Note: Editors like the Content Editor and the Bubble Editor have the same dependency with more/fewer columns like the Row Editor.

Seven columns

Name	Position	Office	Age	Start date	Salary	Ex
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800	ExampleRow
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750	ExampleRow
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	ExampleRow
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	ExampleRow
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700	ExampleRow
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	ExampleRow
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	ExampleRow
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900	ExampleRow
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	ExampleRow
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600	ExampleRow
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560	ExampleRow
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000	ExampleRow
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	ExampleRow
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	ExampleRow
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750	ExampleRow
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500	ExampleRow
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000	ExampleRow
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500	ExampleRow
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000	ExampleRow
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500	ExampleRow
Jenette Caldwell	Development Lead	New York	30	2011/09/03	$345,000	ExampleRow
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25	$675,000	ExampleRow
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450	ExampleRow
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20	$85,600	ExampleRow
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000	ExampleRow
Gavin Joyce	Developer	Edinburgh	42	2010/12/22	$92,575	ExampleRow
Jennifer Chang	Regional Director	Singapore	28	2010/11/14	$357,650	ExampleRow
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850	ExampleRow
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11	$850,000	ExampleRow
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14	$163,000	ExampleRow
Michelle House	Integration Specialist	Sidney	37	2011/06/02	$95,400	ExampleRow
Suki Burks	Developer	London	53	2009/10/22	$114,500	ExampleRow
Prescott Bartlett	Technical Author	London	27	2011/05/07	$145,000	ExampleRow
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26	$235,500	ExampleRow
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09	$324,050	ExampleRow
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675	ExampleRow
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16	$164,500	ExampleRow
Hope Fuentes	Secretary	San Francisco	41	2010/02/12	$109,850	ExampleRow
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500	ExampleRow
Timothy Mooney	Office Manager	London	37	2008/12/11	$136,200	ExampleRow
Jackson Bradshaw	Director	New York	65	2008/09/26	$645,750	ExampleRow
Olivia Liang	Support Engineer	Singapore	64	2011/02/03	$234,500	ExampleRow
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500	ExampleRow
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575	ExampleRow
Thor Walton	Developer	New York	61	2013/08/11	$98,540	ExampleRow
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500	ExampleRow
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09	$138,575	ExampleRow
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$125,250	ExampleRow
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$115,000	ExampleRow
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01	$75,650	ExampleRow
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600	ExampleRow
Hermione Butler	Regional Director	London	47	2011/03/21	$356,250	ExampleRow
Lael Greer	Systems Administrator	London	21	2009/02/27	$103,500	ExampleRow
Jonas Alexander	Developer	San Francisco	30	2010/07/14	$86,500	ExampleRow
Shad Decker	Regional Director	Edinburgh	51	2008/11/13	$183,000	ExampleRow
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27	$183,000	ExampleRow
Donna Snider	Customer Support	New York	27	2011/01/25	$112,000	ExampleRow
Name	Position	Office	Age	Start date	Salary	Ex

Show code Edit in sandbox

HTML
JS

        
            

          <div class="wrapper-editor">

            <div class="d-flex justify-content-center buttons-wrapper flex-wrap">
              <button id="" class="btn btn-sm btn-teal btn-rounded addNewColumn">Activate edits</button>
              <button id="" class="btn btn-sm btn-mdb-color btn-rounded removeColumns" disabled>Deactivate edits</button>
              <button id="" class="btn btn-sm btn-info btn-rounded addNewRows">Add new rows</button>
            </div>
            <div class="closeByClick d-none"></div>
            <div class="showForm d-none" style="position: fixed; top: 20%; left:50%; transform: translate(-50%, -50%); z-index: 1100;">
              <form class="text-center border border-light p-5" style="background: white;">
                <button type="button" class="close position-relative button-x" style="top:-12%; right: -5%">
                  <span aria-hidden="true" class="text-danger">×</span>
                </button>
                <h3 class="h3 my-3 text-danger font-weight-bold">Delete</h3>
                <hr class="mt-2 mb-3">
                <p class="text-center h5 py-2 pb-3">Are you sure to delete selected rows?</p>
                <hr class="mt-2 mb-3">
                <div class="d-flex justify-content-center buttonYesNoWrapper">
                  <button type="button" class="btn btn-danger btnYes btn-sm" data-dismiss="modal">Yes</button>
                  <button type="button" class="btn btn-primary btnNo btn-sm" data-dismiss="modal">No</button>
                </div>
              </form>
            </div>
            <table id="dt-more-row-col" class="table table-striped table-bordered" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th class="th-sm">Name
                  </th>
                  <th class="th-sm">Position
                  </th>
                  <th class="th-sm">Office
                  </th>
                  <th class="th-sm">Age
                  </th>
                  <th class="th-sm">Start date
                  </th>
                  <th class="th-sm">Salary
                  </th>
                  <th class="th-sm">Ex
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
                  <td>Edinburgh</td>
                  <td>61</td>
                  <td>2011/04/25</td>
                  <td>$320,800</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Garrett Winters</td>
                  <td>Accountant</td>
                  <td>Tokyo</td>
                  <td>63</td>
                  <td>2011/07/25</td>
                  <td>$170,750</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Ashton Cox</td>
                  <td>Junior Technical Author</td>
                  <td>San Francisco</td>
                  <td>66</td>
                  <td>2009/01/12</td>
                  <td>$86,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Cedric Kelly</td>
                  <td>Senior Javascript Developer</td>
                  <td>Edinburgh</td>
                  <td>22</td>
                  <td>2012/03/29</td>
                  <td>$433,060</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Airi Satou</td>
                  <td>Accountant</td>
                  <td>Tokyo</td>
                  <td>33</td>
                  <td>2008/11/28</td>
                  <td>$162,700</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Brielle Williamson</td>
                  <td>Integration Specialist</td>
                  <td>New York</td>
                  <td>61</td>
                  <td>2012/12/02</td>
                  <td>$372,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Herrod Chandler</td>
                  <td>Sales Assistant</td>
                  <td>San Francisco</td>
                  <td>59</td>
                  <td>2012/08/06</td>
                  <td>$137,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Rhona Davidson</td>
                  <td>Integration Specialist</td>
                  <td>Tokyo</td>
                  <td>55</td>
                  <td>2010/10/14</td>
                  <td>$327,900</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Colleen Hurst</td>
                  <td>Javascript Developer</td>
                  <td>San Francisco</td>
                  <td>39</td>
                  <td>2009/09/15</td>
                  <td>$205,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Sonya Frost</td>
                  <td>Software Engineer</td>
                  <td>Edinburgh</td>
                  <td>23</td>
                  <td>2008/12/13</td>
                  <td>$103,600</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Jena Gaines</td>
                  <td>Office Manager</td>
                  <td>London</td>
                  <td>30</td>
                  <td>2008/12/19</td>
                  <td>$90,560</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Quinn Flynn</td>
                  <td>Support Lead</td>
                  <td>Edinburgh</td>
                  <td>22</td>
                  <td>2013/03/03</td>
                  <td>$342,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Charde Marshall</td>
                  <td>Regional Director</td>
                  <td>San Francisco</td>
                  <td>36</td>
                  <td>2008/10/16</td>
                  <td>$470,600</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Haley Kennedy</td>
                  <td>Senior Marketing Designer</td>
                  <td>London</td>
                  <td>43</td>
                  <td>2012/12/18</td>
                  <td>$313,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Tatyana Fitzpatrick</td>
                  <td>Regional Director</td>
                  <td>London</td>
                  <td>19</td>
                  <td>2010/03/17</td>
                  <td>$385,750</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Michael Silva</td>
                  <td>Marketing Designer</td>
                  <td>London</td>
                  <td>66</td>
                  <td>2012/11/27</td>
                  <td>$198,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Paul Byrd</td>
                  <td>Chief Financial Officer (CFO)</td>
                  <td>New York</td>
                  <td>64</td>
                  <td>2010/06/09</td>
                  <td>$725,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Gloria Little</td>
                  <td>Systems Administrator</td>
                  <td>New York</td>
                  <td>59</td>
                  <td>2009/04/10</td>
                  <td>$237,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Bradley Greer</td>
                  <td>Software Engineer</td>
                  <td>London</td>
                  <td>41</td>
                  <td>2012/10/13</td>
                  <td>$132,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Dai Rios</td>
                  <td>Personnel Lead</td>
                  <td>Edinburgh</td>
                  <td>35</td>
                  <td>2012/09/26</td>
                  <td>$217,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Jenette Caldwell</td>
                  <td>Development Lead</td>
                  <td>New York</td>
                  <td>30</td>
                  <td>2011/09/03</td>
                  <td>$345,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Yuri Berry</td>
                  <td>Chief Marketing Officer (CMO)</td>
                  <td>New York</td>
                  <td>40</td>
                  <td>2009/06/25</td>
                  <td>$675,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Caesar Vance</td>
                  <td>Pre-Sales Support</td>
                  <td>New York</td>
                  <td>21</td>
                  <td>2011/12/12</td>
                  <td>$106,450</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Doris Wilder</td>
                  <td>Sales Assistant</td>
                  <td>Sidney</td>
                  <td>23</td>
                  <td>2010/09/20</td>
                  <td>$85,600</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Angelica Ramos</td>
                  <td>Chief Executive Officer (CEO)</td>
                  <td>London</td>
                  <td>47</td>
                  <td>2009/10/09</td>
                  <td>$1,200,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Gavin Joyce</td>
                  <td>Developer</td>
                  <td>Edinburgh</td>
                  <td>42</td>
                  <td>2010/12/22</td>
                  <td>$92,575</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Jennifer Chang</td>
                  <td>Regional Director</td>
                  <td>Singapore</td>
                  <td>28</td>
                  <td>2010/11/14</td>
                  <td>$357,650</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Brenden Wagner</td>
                  <td>Software Engineer</td>
                  <td>San Francisco</td>
                  <td>28</td>
                  <td>2011/06/07</td>
                  <td>$206,850</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Fiona Green</td>
                  <td>Chief Operating Officer (COO)</td>
                  <td>San Francisco</td>
                  <td>48</td>
                  <td>2010/03/11</td>
                  <td>$850,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Shou Itou</td>
                  <td>Regional Marketing</td>
                  <td>Tokyo</td>
                  <td>20</td>
                  <td>2011/08/14</td>
                  <td>$163,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Michelle House</td>
                  <td>Integration Specialist</td>
                  <td>Sidney</td>
                  <td>37</td>
                  <td>2011/06/02</td>
                  <td>$95,400</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Suki Burks</td>
                  <td>Developer</td>
                  <td>London</td>
                  <td>53</td>
                  <td>2009/10/22</td>
                  <td>$114,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Prescott Bartlett</td>
                  <td>Technical Author</td>
                  <td>London</td>
                  <td>27</td>
                  <td>2011/05/07</td>
                  <td>$145,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Gavin Cortez</td>
                  <td>Team Leader</td>
                  <td>San Francisco</td>
                  <td>22</td>
                  <td>2008/10/26</td>
                  <td>$235,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Martena Mccray</td>
                  <td>Post-Sales support</td>
                  <td>Edinburgh</td>
                  <td>46</td>
                  <td>2011/03/09</td>
                  <td>$324,050</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Unity Butler</td>
                  <td>Marketing Designer</td>
                  <td>San Francisco</td>
                  <td>47</td>
                  <td>2009/12/09</td>
                  <td>$85,675</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Howard Hatfield</td>
                  <td>Office Manager</td>
                  <td>San Francisco</td>
                  <td>51</td>
                  <td>2008/12/16</td>
                  <td>$164,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Hope Fuentes</td>
                  <td>Secretary</td>
                  <td>San Francisco</td>
                  <td>41</td>
                  <td>2010/02/12</td>
                  <td>$109,850</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Vivian Harrell</td>
                  <td>Financial Controller</td>
                  <td>San Francisco</td>
                  <td>62</td>
                  <td>2009/02/14</td>
                  <td>$452,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Timothy Mooney</td>
                  <td>Office Manager</td>
                  <td>London</td>
                  <td>37</td>
                  <td>2008/12/11</td>
                  <td>$136,200</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Jackson Bradshaw</td>
                  <td>Director</td>
                  <td>New York</td>
                  <td>65</td>
                  <td>2008/09/26</td>
                  <td>$645,750</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Olivia Liang</td>
                  <td>Support Engineer</td>
                  <td>Singapore</td>
                  <td>64</td>
                  <td>2011/02/03</td>
                  <td>$234,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Bruno Nash</td>
                  <td>Software Engineer</td>
                  <td>London</td>
                  <td>38</td>
                  <td>2011/05/03</td>
                  <td>$163,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Sakura Yamamoto</td>
                  <td>Support Engineer</td>
                  <td>Tokyo</td>
                  <td>37</td>
                  <td>2009/08/19</td>
                  <td>$139,575</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Thor Walton</td>
                  <td>Developer</td>
                  <td>New York</td>
                  <td>61</td>
                  <td>2013/08/11</td>
                  <td>$98,540</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Finn Camacho</td>
                  <td>Support Engineer</td>
                  <td>San Francisco</td>
                  <td>47</td>
                  <td>2009/07/07</td>
                  <td>$87,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Serge Baldwin</td>
                  <td>Data Coordinator</td>
                  <td>Singapore</td>
                  <td>64</td>
                  <td>2012/04/09</td>
                  <td>$138,575</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Zenaida Frank</td>
                  <td>Software Engineer</td>
                  <td>New York</td>
                  <td>63</td>
                  <td>2010/01/04</td>
                  <td>$125,250</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Zorita Serrano</td>
                  <td>Software Engineer</td>
                  <td>San Francisco</td>
                  <td>56</td>
                  <td>2012/06/01</td>
                  <td>$115,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Jennifer Acosta</td>
                  <td>Junior Javascript Developer</td>
                  <td>Edinburgh</td>
                  <td>43</td>
                  <td>2013/02/01</td>
                  <td>$75,650</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Cara Stevens</td>
                  <td>Sales Assistant</td>
                  <td>New York</td>
                  <td>46</td>
                  <td>2011/12/06</td>
                  <td>$145,600</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Hermione Butler</td>
                  <td>Regional Director</td>
                  <td>London</td>
                  <td>47</td>
                  <td>2011/03/21</td>
                  <td>$356,250</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Lael Greer</td>
                  <td>Systems Administrator</td>
                  <td>London</td>
                  <td>21</td>
                  <td>2009/02/27</td>
                  <td>$103,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Jonas Alexander</td>
                  <td>Developer</td>
                  <td>San Francisco</td>
                  <td>30</td>
                  <td>2010/07/14</td>
                  <td>$86,500</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Shad Decker</td>
                  <td>Regional Director</td>
                  <td>Edinburgh</td>
                  <td>51</td>
                  <td>2008/11/13</td>
                  <td>$183,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Michael Bruce</td>
                  <td>Javascript Developer</td>
                  <td>Singapore</td>
                  <td>29</td>
                  <td>2011/06/27</td>
                  <td>$183,000</td>
                  <td>ExampleRow</td>
                </tr>
                <tr>
                  <td>Donna Snider</td>
                  <td>Customer Support</td>
                  <td>New York</td>
                  <td>27</td>
                  <td>2011/01/25</td>
                  <td>$112,000</td>
                  <td>ExampleRow</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>Name
                  </th>
                  <th>Position
                  </th>
                  <th>Office
                  </th>
                  <th>Age
                  </th>
                  <th>Start date
                  </th>
                  <th>Salary
                  </th>
                  <th>Ex
                  </th>
                </tr>
              </tfoot>
            </table>
          </div>

        
            
          $('#dt-more-row-col').mdbEditor({
            modalEditor: true,
            headerLength: 7,
          });
          $('.dataTables_length').addClass('bs-select');

Fewer columns Table Row Editor

You can easily have fewer columns in the Table Row Editor.

Five columns

Name	Position	Office	Age	Start date
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25
Garrett Winters	Accountant	Tokyo	63	2011/07/25
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29
Airi Satou	Accountant	Tokyo	33	2008/11/28
Brielle Williamson	Integration Specialist	New York	61	2012/12/02
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13
Jena Gaines	Office Manager	London	30	2008/12/19
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03
Charde Marshall	Regional Director	San Francisco	36	2008/10/16
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17
Michael Silva	Marketing Designer	London	66	2012/11/27
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09
Gloria Little	Systems Administrator	New York	59	2009/04/10
Bradley Greer	Software Engineer	London	41	2012/10/13
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26
Jenette Caldwell	Development Lead	New York	30	2011/09/03
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09
Gavin Joyce	Developer	Edinburgh	42	2010/12/22
Jennifer Chang	Regional Director	Singapore	28	2010/11/14
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14
Michelle House	Integration Specialist	Sidney	37	2011/06/02
Suki Burks	Developer	London	53	2009/10/22
Prescott Bartlett	Technical Author	London	27	2011/05/07
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16
Hope Fuentes	Secretary	San Francisco	41	2010/02/12
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14
Timothy Mooney	Office Manager	London	37	2008/12/11
Jackson Bradshaw	Director	New York	65	2008/09/26
Olivia Liang	Support Engineer	Singapore	64	2011/02/03
Bruno Nash	Software Engineer	London	38	2011/05/03
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19
Thor Walton	Developer	New York	61	2013/08/11
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09
Zenaida Frank	Software Engineer	New York	63	2010/01/04
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01
Cara Stevens	Sales Assistant	New York	46	2011/12/06
Hermione Butler	Regional Director	London	47	2011/03/21
Lael Greer	Systems Administrator	London	21	2009/02/27
Jonas Alexander	Developer	San Francisco	30	2010/07/14
Shad Decker	Regional Director	Edinburgh	51	2008/11/13
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27
Donna Snider	Customer Support	New York	27	2011/01/25
Name	Position	Office	Age	Start date

Show code Edit in sandbox

HTML

        
            
        <div class="wrapper-editor">

          <div class="d-flex justify-content-center buttons-wrapper flex-wrap">
            <button id="" class="btn btn-sm btn-teal btn-rounded addNewColumn">Activate edits</button>
            <button id="" class="btn btn-sm btn-mdb-color btn-rounded removeColumns" disabled>Deactivate edits</button>
            <button id="" class="btn btn-sm btn-info btn-rounded addNewRows">Add new rows</button>
          </div>
          <div class="closeByClick d-none"></div>
          <div class="showForm d-none" style="position: fixed; top: 20%; left:50%; transform: translate(-50%, -50%); z-index: 1100;">
            <form class="text-center border border-light p-5" style="background: white;">
              <button type="button" class="close position-relative button-x" style="top:-12%; right: -5%">
                <span aria-hidden="true" class="text-danger">×</span>
              </button>
              <h3 class="h3 my-3 text-danger font-weight-bold">Delete</h3>
              <hr class="mt-2 mb-3">
              <p class="text-center h5 py-2 pb-3">Are you sure to delete selected rows?</p>
              <hr class="mt-2 mb-3">
              <div class="d-flex justify-content-center buttonYesNoWrapper">
                <button type="button" class="btn btn-danger btnYes btn-sm" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-primary btnNo btn-sm" data-dismiss="modal">No</button>
              </div>
            </form>
          </div>
          <table id="dt-less-row-col" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th class="th-sm">Name
                </th>
                <th class="th-sm">Position
                </th>
                <th class="th-sm">Office
                </th>
                <th class="th-sm">Age
                </th>
                <th class="th-sm">Start date
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
              </tr>
              <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
              </tr>
              <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
              </tr>
              <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
              </tr>
              <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
              </tr>
              <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
              </tr>
              <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
              </tr>
              <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
              </tr>
              <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
              </tr>
              <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
              </tr>
              <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
              </tr>
              <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
              </tr>
              <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
              </tr>
              <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
              </tr>
              <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
              </tr>
              <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
              </tr>
              <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
              </tr>
              <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
              </tr>
              <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
              </tr>
              <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
              </tr>
              <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
              </tr>
              <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
              </tr>
              <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
              </tr>
              <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
              </tr>
              <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
              </tr>
              <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
              </tr>
              <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
              </tr>
              <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
              </tr>
              <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
              </tr>
              <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
              </tr>
              <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
              </tr>
              <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
              </tr>
              <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
              </tr>
              <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
              </tr>
              <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
              </tr>
              <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
              </tr>
              <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
              </tr>
              <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
              </tr>
              <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
              </tr>
              <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
              </tr>
              <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
              </tr>
              <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
              </tr>
              <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
              </tr>
              <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
              </tr>
              <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
              </tr>
              <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
              </tr>
              <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
              </tr>
              <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
              </tr>
              <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
              </tr>
              <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
              </tr>
              <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
              </tr>
              <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
              </tr>
              <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
              </tr>
              <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
              </tr>
              <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Name
                </th>
                <th>Position
                </th>
                <th>Office
                </th>
                <th>Age
                </th>
                <th>Start date
                </th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            
        $('#dt-less-row-col').mdbEditor({
          rowEditor: true,
          headerLength: 5,
        });
        $('.dataTables_length').addClass('bs-select');

Other Editors

Other editors such as the Content Editor and the Bubble Editor have the same dependency regarding more/fewer columns like the Row Editor. So if you would like to have different number of columns you have to do the same process as for the Row Editor.

MDB Table Editor Options

The MDB Table Editor has a few default options that can be easily changed.

The default options are as follows:

Name	Type	Custom Value	Description
`headerLength`	Number	6	Custom length of columns.
`evenTextColor`	String	#000	Table even rows text color
`oddTextColor`	String	#000	Table odd rows text color
`bgEvenColor`	String	''	Table even rows background color
`bgOddColor`	String	''	Table odd rows background color
`thText`	String	''	Table head/footer rows text color
`thBg`	String	''	Table head/footer rows background color
`modalEditor`	Boolean	false	To enable modal editor change to `true`
`rowEditor`	Boolean	false	To enable row editor change to `true`
`bubbleEditor`	Boolean	false	To enable bubble editor change to `true`
`contentEditor`	Boolean	false	To enable content editor change to `true`

The modal Editor uses a basic default option for each table.

0 row selected

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples

Modal Editor opti

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">
          <div class="block my-4">
            <div class="d-flex justify-content-center">
              <p class="h5 text-primary createShowP">0 row selected</p>
            </div>
          </div>

          <div class="row d-flex justify-content-center modalWrapper">
            <div class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAdd"
              aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
                    <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <div class="md-form mb-5">
                      <input type="text" id="inputName" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputName">Name</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="inputPosition" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputPosition">Position</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="inputOfficeInput" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputOfficeInput">Office</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="inputAge" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputAge">Age</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="date" id="inputDate" class="form-control" placeholder="Select Date">
                      <label data-error="wrong" data-success="right" for="inputDate"></label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="inputSalary" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputSalary">Salary</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="inputSalary12" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="inputSalary12">Examples</label>
                    </div>
                  </div>
                  <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
                    <button class="btn btn-outline-primary btn-block buttonAdd" data-dismiss="modal">Add form
                      <i class="far fa-paper-plane ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center wrapperToBtnModalAdd">
              <a href="" class="btn btn-info btn-rounded btn-sm btnToModalAdd" data-toggle="modal" data-target="#modalAdd"><i
                  class="fas fa-plus-square"></i></a>
            </div>
            <div class="modal fade modalEditClass" id="modalEdit" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>
                    <button type="button" class="close text-secondary" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3 modal-inputs">
                    <div class="md-form mb-5">
                      <input type="text" id="formNameEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formNameEdit">Name</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="formPositionEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formPositionEdit">Position</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="formOfficeEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formOfficeEdit">Office</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="formAgeEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formAgeEdit">Age</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="formDateEdit" class="form-control datepicker">
                      <label data-error="wrong" data-success="right" for="formDateEdit">Date</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="formSalaryEdit" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formSalaryEdit">Salary</label>
                    </div>
                    <div class="md-form mb-5">
                      <input type="text" id="formSalaryEdit11" class="form-control validate">
                      <label data-error="wrong" data-success="right" for="formSalaryEdit11">Examples</label>
                    </div>

                  </div>
                  <div class="modal-footer d-flex justify-content-center editInsideWrapper">
                    <button class="btn btn-outline-secondary btn-block editInside" data-dismiss="modal">Edit
                      form
                      <i class="far fa-paper-plane ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center buttonEditWrapper">
              <button class="btn btn-info btn-rounded btn-sm buttonEdit" data-toggle="modal" data-target="#modalEdit"
                disabled><i class="fas fa-pen-square"></i></a>
            </div>
            <div class="modal fade modalDeleteTarget" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalDelete"
              aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
                    <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body mx-3">
                    <p class="text-center h4">Are you sure to delete selected row?</p>
                  </div>
                  <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
                    <button type="button" class="btn btn-outline-danger btnYesClass btn-sm" id="btnYes" data-dismiss="modal">Yes
                      <i class="far fa-paper-plane ml-1"></i>
                    </button>
                    <button type="button" class="btn btn-outline-primary btnNoClass btn-sm" id="btnNo" data-dismiss="modal">No
                      <i class="far fa-paper-plane ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center">
              <button class="btn btn-danger btn-sm btn-rounded buttonDelete" data-toggle="modal" disabled data-target="#modalDelete"
                disabled><i class="fas fa-times"></i></a>
            </div>
          </div>
          <table id="ex1" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            
        let dataSet = [
          ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011-04-25", "$320,800", "Examples"],
          ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011-07-25", "$170,750", "Examples"],
          ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009-01-12", "$86,000", "Examples"],
          ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012-03-29", "$433,060", "Examples"],
          ["Airi", "Accountant", "Tokyo", "5407", "2008-11-28", "$162,700", "Examples"],
          ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012-12-02",
          "$372,000", "Examples"
          ],
          ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012-08-06", "$137,500", "Examples"],
          ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010-10-14", "$327,900", "Examples"],
          ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009-09-15", "$205,500", "Examples"],
          ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008-12-13", "$103,600", "Examples"],
          ["Jena Gaines", "Office Manager", "London", "3814", "2008-12-19", "$90,560", "Examples"],
          ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013-03-03", "$342,000", "Examples"],
          ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008-10-16", "$470,600", "Examples"],
          ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012-12-18", "$313,500", "Examples"],
          ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010-03-17", "$385,750", "Examples"],
          ["Michael Silva", "Marketing Designer", "London", "1581", "2012-11-27", "$198,500", "Examples"],
          ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010-06-09", "$725,000", "Examples"],
          ["Gloria Little", "Systems Administrator", "New York", "1721", "2009-04-10", "$237,500", "Examples"],
          ["Bradley Greer", "Software Engineer", "London", "2558", "2012-10-13", "$132,000", "Examples"],
          ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012-09-26", "$217,500", "Examples"],
          ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011-09-03", "$345,000", "Examples"],
          ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009-06-25", "$675,000", "Examples"],
          ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011-12-12", "$106,450", "Examples"],
          ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010-09-20", "$85,600", "Examples"],
          ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009-10-09", "$1,200,000", "Examples"],
          ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010-12-22", "$92,575", "Examples"],
          ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010-11-14", "$357,650", "Examples"],
          ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011-06-07", "$206,850",
          "Examples"
          ],
          ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010-03-11", "$850,000",
          "Examples"],
          ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011-08-14", "$163,000", "Examples"],
          ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011-06-02", "$95,400", "Examples"],
          ["Suki Burks", "Developer", "London", "6832", "2009-10-22", "$114,500", "Examples"],
          ["Prescott Bartlett", "Technical Author", "London", "3606", "2011-05-07", "$145,000", "Examples"],
          ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008-10-26", "$235,500", "Examples"],
          ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011-03-09", "$324,050", "Examples"],
          ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009-12-09", "$85,675", "Examples"]
        ];

        $('#ex1).DataTable({
          data: dataSet,
          columns: [{
              title: "Name"
            },
            {
              title: "Position"
            },
            {
              title: "Office"
            },
            {
              title: "Extn."
            },
            {
              title: "Start date"
            },
            {
              title: "Salary"
            },
            {
              title: "Examples"
            }
          ]
        });

        $('#ex1').mdbEditor({
          modalEditor: true,
          headerLength: 7,
          evenTextColor: '#AbA6BF',
          oddTextColor: '#BF988F',
          bgEvenColor: '#fff',
          bgOddColor: '#EBF2EA',
          thText: '#BF988F',
          thBg: '#fff',
        });

        $('.dataTables_length').addClass('bs-select');

Row Editor options

The row Editor uses a basic default option for each table.

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">

          <div class="d-flex justify-content-center buttons-wrapper flex-wrap my-3">
            <button id="" class="btn btn-sm btn-teal btn-rounded addNewColumn" disabled><i class="fas fa-toggle-on"></i></button>
            <button id="" class="btn btn-sm btn-info btn-rounded addNewRows" disabled><i class="fas fa-plus"></i></button>
            <button id="" class="btn btn-sm btn-mdb-color btn-rounded removeColumns" disabled> <i class="fas fa-toggle-off"></i></button>
          </div>
          <div class="closeByClick d-none"></div>
          <div class="showForm d-none" style="position: fixed; top: 25%; left:50%; transform: translate(-50%, -50%); z-index: 1100;">
            <form class="text-center border border-light p-5" style="background: white;">
              <button type="button" class="close position-relative button-x" style="top:-12%; right: -5%">
                <span aria-hidden="true" class="text-danger">×</span>
              </button>
              <h3 class="h3 my-3 text-danger font-weight-bold">Delete</h3>
              <hr class="mt-2 mb-3">
              <p class="text-center h5 py-2 pb-3">Are you sure to delete selected rows?</p>
              <hr class="mt-2 mb-3">
              <div class="d-flex justify-content-center buttonYesNoWrapper">
                <button type="button" class="btn btn-danger btnYes btn-sm" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-primary btnNo btn-sm" data-dismiss="modal">No</button>
              </div>
            </form>
          </div>
          <table id="ex2" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            
        let dataSet = [
          ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011-04-25", "$320,800", "Examples"],
          ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011-07-25", "$170,750", "Examples"],
          ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009-01-12", "$86,000", "Examples"],
          ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012-03-29", "$433,060", "Examples"],
          ["Airi", "Accountant", "Tokyo", "5407", "2008-11-28", "$162,700", "Examples"],
          ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012-12-02",
          "$372,000", "Examples"
          ],
          ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012-08-06", "$137,500", "Examples"],
          ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010-10-14", "$327,900", "Examples"],
          ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009-09-15", "$205,500", "Examples"],
          ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008-12-13", "$103,600", "Examples"],
          ["Jena Gaines", "Office Manager", "London", "3814", "2008-12-19", "$90,560", "Examples"],
          ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013-03-03", "$342,000", "Examples"],
          ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008-10-16", "$470,600", "Examples"],
          ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012-12-18", "$313,500", "Examples"],
          ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010-03-17", "$385,750", "Examples"],
          ["Michael Silva", "Marketing Designer", "London", "1581", "2012-11-27", "$198,500", "Examples"],
          ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010-06-09", "$725,000", "Examples"],
          ["Gloria Little", "Systems Administrator", "New York", "1721", "2009-04-10", "$237,500", "Examples"],
          ["Bradley Greer", "Software Engineer", "London", "2558", "2012-10-13", "$132,000", "Examples"],
          ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012-09-26", "$217,500", "Examples"],
          ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011-09-03", "$345,000", "Examples"],
          ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009-06-25", "$675,000", "Examples"],
          ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011-12-12", "$106,450", "Examples"],
          ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010-09-20", "$85,600", "Examples"],
          ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009-10-09", "$1,200,000", "Examples"],
          ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010-12-22", "$92,575", "Examples"],
          ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010-11-14", "$357,650", "Examples"],
          ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011-06-07", "$206,850",
          "Examples"
          ],
          ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010-03-11", "$850,000",
          "Examples"],
          ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011-08-14", "$163,000", "Examples"],
          ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011-06-02", "$95,400", "Examples"],
          ["Suki Burks", "Developer", "London", "6832", "2009-10-22", "$114,500", "Examples"],
          ["Prescott Bartlett", "Technical Author", "London", "3606", "2011-05-07", "$145,000", "Examples"],
          ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008-10-26", "$235,500", "Examples"],
          ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011-03-09", "$324,050", "Examples"],
          ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009-12-09", "$85,675", "Examples"]
        ];

        $('#ex2).DataTable({
          data: dataSet,
          columns: [{
              title: "Name"
            },
            {
              title: "Position"
            },
            {
              title: "Office"
            },
            {
              title: "Extn."
            },
            {
              title: "Start date"
            },
            {
              title: "Salary"
            },
            {
              title: "Examples"
            }
          ]
        });

        $('#ex2').mdbEditor({
          rowEditor: true,
          headerLength: 7,
          evenTextColor: '#00ABE6',
          oddTextColor: 'rgba(100,120,80, .6)',
          bgEvenColor: '',
          bgOddColor: '',
          thText: '#00ABE6',
          thBg: '',
        });

        $('.dataTables_length').addClass('bs-select');

Content Editor options

The Content Editor uses a basic default option for each table.

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">

          <div class="d-flex justify-content-center buttons-wrapper my-3">
            <button class="btn btn-rounded text-white blue darken-3 btn-sm add-content-edit" type="button"><i class="fas fa-toggle-off"></i></button>
            <button class=" btn btn-rounded text-white purple
            lighten-2 btn-sm add-new-row" type="button">
              <i class="fas fa-plus"></i></button>
            <button class="btn btn-rounded text-white red btn-sm remove-first-tr" type="button"> <i class="fas fa-eraser"></i></button>
          </div>

          <table id="ex3" class="table table-striped table-bordered" cellspacing=" 0" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            
        let dataSet = [
          ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011-04-25", "$320,800", "Examples"],
          ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011-07-25", "$170,750", "Examples"],
          ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009-01-12", "$86,000", "Examples"],
          ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012-03-29", "$433,060", "Examples"],
          ["Airi", "Accountant", "Tokyo", "5407", "2008-11-28", "$162,700", "Examples"],
          ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012-12-02",
          "$372,000", "Examples"
          ],
          ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012-08-06", "$137,500", "Examples"],
          ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010-10-14", "$327,900", "Examples"],
          ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009-09-15", "$205,500", "Examples"],
          ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008-12-13", "$103,600", "Examples"],
          ["Jena Gaines", "Office Manager", "London", "3814", "2008-12-19", "$90,560", "Examples"],
          ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013-03-03", "$342,000", "Examples"],
          ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008-10-16", "$470,600", "Examples"],
          ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012-12-18", "$313,500", "Examples"],
          ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010-03-17", "$385,750", "Examples"],
          ["Michael Silva", "Marketing Designer", "London", "1581", "2012-11-27", "$198,500", "Examples"],
          ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010-06-09", "$725,000", "Examples"],
          ["Gloria Little", "Systems Administrator", "New York", "1721", "2009-04-10", "$237,500", "Examples"],
          ["Bradley Greer", "Software Engineer", "London", "2558", "2012-10-13", "$132,000", "Examples"],
          ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012-09-26", "$217,500", "Examples"],
          ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011-09-03", "$345,000", "Examples"],
          ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009-06-25", "$675,000", "Examples"],
          ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011-12-12", "$106,450", "Examples"],
          ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010-09-20", "$85,600", "Examples"],
          ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009-10-09", "$1,200,000", "Examples"],
          ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010-12-22", "$92,575", "Examples"],
          ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010-11-14", "$357,650", "Examples"],
          ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011-06-07", "$206,850",
          "Examples"
          ],
          ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010-03-11", "$850,000",
          "Examples"],
          ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011-08-14", "$163,000", "Examples"],
          ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011-06-02", "$95,400", "Examples"],
          ["Suki Burks", "Developer", "London", "6832", "2009-10-22", "$114,500", "Examples"],
          ["Prescott Bartlett", "Technical Author", "London", "3606", "2011-05-07", "$145,000", "Examples"],
          ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008-10-26", "$235,500", "Examples"],
          ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011-03-09", "$324,050", "Examples"],
          ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009-12-09", "$85,675", "Examples"]
        ];


        $('#ex3).DataTable({
          data: dataSet,
          columns: [{
              title: "Name"
            },
            {
              title: "Position"
            },
            {
              title: "Office"
            },
            {
              title: "Extn."
            },
            {
              title: "Start date"
            },
            {
              title: "Salary"
            },
            {
              title: "Examples"
            }
          ]
        });

        $('#ex3').mdbEditor({
          contentEditor: true,
          headerLength: 7,
          evenTextColor: 'rgba(0,0,255, .4)',
          oddTextColor: 'rgba(100,140,120, .6)',
          bgEvenColor: '',
          bgOddColor: '',
          thText: '#fff',
          thBg: 'rgba(22, 66, 192, .2)',
          bubblePositionX: 80,
          bubblePositionY: 0,
        });

        $('.dataTables_length').addClass('bs-select');

Bubble Editor options

The Bubble Editor uses a basic default option for each table and also few options only available for this editor type.

Name	Type	Custom Value	Description
`bubblePositionX`	Number	80	Position X of bubble popover
`bubblePositionY`	Number	0	Position Y of bubble popover

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples

Show code Edit in sandbox

HTML
JS

        
            

        <div class="wrapper-editor">

          <div class="d-flex justify-content-center buttons-wrapper my-3">
            <button class="btn btn-rounded text-white blue darken-3 btn-sm add-bubble-edit" type="button" disabled><i
                class="fas fa-toggle-off" disabled></i></button>
            <button class=" btn btn-rounded text-white purple
                      lighten-2 btn-sm addNewRow" type="button"
              disabled> <i class="fas fa-plus" disabled></i></button>
            <button class="btn btn-rounded text-white red btn-sm removeFirstTr" type="button" disabled><i class="fas fa-eraser"
                disabled></i></button>
          </div>

          <table id="ex4" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Examples</th>
              </tr>
            </tfoot>
          </table>
        </div>

        
            
        let dataSet = [
          ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011-04-25", "$320,800", "Examples"],
          ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011-07-25", "$170,750", "Examples"],
          ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009-01-12", "$86,000", "Examples"],
          ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012-03-29", "$433,060", "Examples"],
          ["Airi", "Accountant", "Tokyo", "5407", "2008-11-28", "$162,700", "Examples"],
          ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012-12-02",
          "$372,000", "Examples"
          ],
          ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012-08-06", "$137,500", "Examples"],
          ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010-10-14", "$327,900", "Examples"],
          ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009-09-15", "$205,500", "Examples"],
          ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008-12-13", "$103,600", "Examples"],
          ["Jena Gaines", "Office Manager", "London", "3814", "2008-12-19", "$90,560", "Examples"],
          ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013-03-03", "$342,000", "Examples"],
          ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008-10-16", "$470,600", "Examples"],
          ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012-12-18", "$313,500", "Examples"],
          ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010-03-17", "$385,750", "Examples"],
          ["Michael Silva", "Marketing Designer", "London", "1581", "2012-11-27", "$198,500", "Examples"],
          ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010-06-09", "$725,000", "Examples"],
          ["Gloria Little", "Systems Administrator", "New York", "1721", "2009-04-10", "$237,500", "Examples"],
          ["Bradley Greer", "Software Engineer", "London", "2558", "2012-10-13", "$132,000", "Examples"],
          ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012-09-26", "$217,500", "Examples"],
          ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011-09-03", "$345,000", "Examples"],
          ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009-06-25", "$675,000", "Examples"],
          ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011-12-12", "$106,450", "Examples"],
          ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010-09-20", "$85,600", "Examples"],
          ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009-10-09", "$1,200,000", "Examples"],
          ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010-12-22", "$92,575", "Examples"],
          ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010-11-14", "$357,650", "Examples"],
          ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011-06-07", "$206,850",
          "Examples"
          ],
          ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010-03-11", "$850,000",
          "Examples"],
          ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011-08-14", "$163,000", "Examples"],
          ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011-06-02", "$95,400", "Examples"],
          ["Suki Burks", "Developer", "London", "6832", "2009-10-22", "$114,500", "Examples"],
          ["Prescott Bartlett", "Technical Author", "London", "3606", "2011-05-07", "$145,000", "Examples"],
          ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008-10-26", "$235,500", "Examples"],
          ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011-03-09", "$324,050", "Examples"],
          ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009-12-09", "$85,675", "Examples"]
        ];


        $('#ex4).DataTable({
          data: dataSet,
          columns: [{
              title: "Name"
            },
            {
              title: "Position"
            },
            {
              title: "Office"
            },
            {
              title: "Extn."
            },
            {
              title: "Start date"
            },
            {
              title: "Salary"
            },
            {
              title: "Examples"
            }
          ]
        });

        $('#ex4').mdbEditor({
          bubbleEditor: true,
          headerLength: 7,
          evenTextColor: 'rgba(255,0,255, .4)',
          oddTextColor: 'rgba(80,160,110, .6)',
          bgEvenColor: '',
          bgOddColor: '',
          thText: '',
          thBg: '',
        });

        $('.dataTables_length').addClass('bs-select');

MDB DataTable Editor - getting started : download & setup

Download

This plugin requires a purchase.
Buy table editor plugin

Table Editor

Bootstrap table editable plugin

How editors work

Editor with modal

How modal editor works

Row Editor

How the row editor works

Delete

Content Editor

Bubble Editor

Extended columns

Extended columns - Modal Editor

Seven columns

Fewer columns

Five columns

Extended columns - Row Editor

Seven columns

Delete

Fewer columns Table Row Editor

Five columns

Delete

Other Editors

MDB Table Editor Options

Modal Editor options

Row Editor options

Delete

Content Editor options

Bubble Editor options

MDB DataTable Editor - getting started : download & setup

Download

Tutorial