Table Editor

Bootstrap table editable plugin

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

You can use four different types of editor:

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.

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
Edit in sandbox 
        
            

        <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.

Delete

Are you sure to delete selected rows?

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
Edit in sandbox 
        
            

        <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
Edit in sandbox 
        
            

        <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
Edit in sandbox 
        
            

        <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:
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
Edit in sandbox 
        
            

        <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
Edit in sandbox 
        
            
          <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

Delete

Are you sure to delete selected rows?

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
Edit in sandbox 
        
            

          <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

Delete

Are you sure to delete selected rows?

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
Edit in sandbox 
        
            
        <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
Edit in sandbox 
        
            

        <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.

Delete

Are you sure to delete selected rows?

Name Position Office Extn. Start date Salary Examples
Name Position Office Extn. Start date Salary Examples
Edit in sandbox 
        
            

        <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
Edit in sandbox 
        
            

        <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
Edit in sandbox 
        
            

        <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

Tutorial