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:

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

How editors work

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

Initiate function with default options.

Show code Edit in sandbox

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

Editor with modal

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

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

How modal editor works

See the documentation about modals.

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

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

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

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

0 row selected

Add

Show entries

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 57 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Row Editor

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

All operations are carried out directly on a row.

How the row editor works

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

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

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

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

addNewColumn
removeColumns
addNewRows

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

Show entries

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 57 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

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

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

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

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

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

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

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

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

  </div>

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

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

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

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

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

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

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

</div>

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

Content Editor

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

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

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

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

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

Show entries

Search:

Name	Position	Office	Extn.	Start date	Salary
Name	Position	Office	Extn.	Start date	Salary
Airi	Accountant	Tokyo	5407	2008-11-28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	5797	2009-10-09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	1562	2009-01-12	$86,000
Bradley Greer	Software Engineer	London	2558	2012-10-13	$132,000
Brenden Wagner	Software Engineer	San Francisco	1314	2011-06-07	$206,850
Brielle Williamson	Integration Specialist	New York	4804	2012-12-02	$372,000
Caesar Vance	Pre-Sales Support	New York	8330	2011-12-12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	6224	2012-03-29	$433,060
Charde Marshall	Regional Director	San Francisco	6741	2008-10-16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	2360	2009-09-15	$205,500

Showing 1 to 10 of 36 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

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

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

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

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

Bubble Editor

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

The first button activates the editor.

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

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

Show entries

Search:

Name	Position	Office	Extn.	Start date	Salary
Name	Position	Office	Extn.	Start date	Salary
Airi	Accountant	Tokyo	5407	2008-11-28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	5797	2009-10-09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	1562	2009-01-12	$86,000
Bradley Greer	Software Engineer	London	2558	2012-10-13	$132,000
Brenden Wagner	Software Engineer	San Francisco	1314	2011-06-07	$206,850
Brielle Williamson	Integration Specialist	New York	4804	2012-12-02	$372,000
Caesar Vance	Pre-Sales Support	New York	8330	2011-12-12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	6224	2012-03-29	$433,060
Charde Marshall	Regional Director	San Francisco	6741	2008-10-16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	2360	2009-09-15	$205,500

Showing 1 to 10 of 36 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

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

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

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

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

Extended columns

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

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

Defaults header length settings:

Show code Edit in sandbox

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

Extended columns - Modal Editor

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

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

Seven columns

0 row selected

Add

Show entries

Search:

Name	Position	Office	Age	Start date	Salary	Example
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700	Example
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000	Example
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	Example
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000	Example
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850	Example
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	Example
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500	Example
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450	Example
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600	Example
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	Example
Name	Position	Office	Age	Start date	Salary	Example

Showing 1 to 10 of 57 entries

Show code Edit in sandbox

HTML

<div class="wrapper-editor">

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fewer columns

You can easily have fewer columns.

Five columns

0 row selected

Add

Show entries

Search:

Name	Position	Office	Age	Start date
Airi Satou	Accountant	Tokyo	33	2008/11/28
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12
Bradley Greer	Software Engineer	London	41	2012/10/13
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07
Brielle Williamson	Integration Specialist	New York	61	2012/12/02
Bruno Nash	Software Engineer	London	38	2011/05/03
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12
Cara Stevens	Sales Assistant	New York	46	2011/12/06
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29
Name	Position	Office	Age	Start date

Showing 1 to 10 of 57 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

Extended columns - Row Editor

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

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

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

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

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

Seven columns

Show entries

Search:

Name	Position	Office	Age	Start date	Salary	Ex
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700	ExampleRow
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000	ExampleRow
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	ExampleRow
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000	ExampleRow
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850	ExampleRow
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	ExampleRow
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500	ExampleRow
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450	ExampleRow
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600	ExampleRow
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	ExampleRow
Name	Position	Office	Age	Start date	Salary	Ex

Showing 1 to 10 of 57 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

Fewer columns Table Row Editor

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

Five columns

Show entries

Search:

Name	Position	Office	Age	Start date
Airi Satou	Accountant	Tokyo	33	2008/11/28
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12
Bradley Greer	Software Engineer	London	41	2012/10/13
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07
Brielle Williamson	Integration Specialist	New York	61	2012/12/02
Bruno Nash	Software Engineer	London	38	2011/05/03
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12
Cara Stevens	Sales Assistant	New York	46	2011/12/06
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29
Name	Position	Office	Age	Start date

Showing 1 to 10 of 57 entries

Show code Edit in sandbox

HTML

<div class="wrapper-editor">

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

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

Other Editors

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

MDB Table Editor Options

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

The default options are as follows:

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

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

0 row selected

Show entries

Search:

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples
Airi	Accountant	Tokyo	5407	2008-11-28	$162,700	Examples
Angelica Ramos	Chief Executive Officer (CEO)	London	5797	2009-10-09	$1,200,000	Examples
Ashton Cox	Junior Technical Author	San Francisco	1562	2009-01-12	$86,000	Examples
Bradley Greer	Software Engineer	London	2558	2012-10-13	$132,000	Examples
Brenden Wagner	Software Engineer	San Francisco	1314	2011-06-07	$206,850	Examples
Brielle Williamson	Integration Specialist	New York	4804	2012-12-02	$372,000	Examples
Caesar Vance	Pre-Sales Support	New York	8330	2011-12-12	$106,450	Examples
Cedric Kelly	Senior Javascript Developer	Edinburgh	6224	2012-03-29	$433,060	Examples
Charde Marshall	Regional Director	San Francisco	6741	2008-10-16	$470,600	Examples
Colleen Hurst	Javascript Developer	San Francisco	2360	2009-09-15	$205,500	Examples

Showing 1 to 10 of 36 entries

Modal Editor opti

Show code Edit in sandbox

HTML
JS

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

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

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

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

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

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

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

Row Editor options

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

Show entries

Search:

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples
Airi	Accountant	Tokyo	5407	2008-11-28	$162,700	Examples
Angelica Ramos	Chief Executive Officer (CEO)	London	5797	2009-10-09	$1,200,000	Examples
Ashton Cox	Junior Technical Author	San Francisco	1562	2009-01-12	$86,000	Examples
Bradley Greer	Software Engineer	London	2558	2012-10-13	$132,000	Examples
Brenden Wagner	Software Engineer	San Francisco	1314	2011-06-07	$206,850	Examples
Brielle Williamson	Integration Specialist	New York	4804	2012-12-02	$372,000	Examples
Caesar Vance	Pre-Sales Support	New York	8330	2011-12-12	$106,450	Examples
Cedric Kelly	Senior Javascript Developer	Edinburgh	6224	2012-03-29	$433,060	Examples
Charde Marshall	Regional Director	San Francisco	6741	2008-10-16	$470,600	Examples
Colleen Hurst	Javascript Developer	San Francisco	2360	2009-09-15	$205,500	Examples

Showing 1 to 10 of 36 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

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

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

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

Content Editor options

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

Show entries

Search:

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples
Airi	Accountant	Tokyo	5407	2008-11-28	$162,700	Examples
Angelica Ramos	Chief Executive Officer (CEO)	London	5797	2009-10-09	$1,200,000	Examples
Ashton Cox	Junior Technical Author	San Francisco	1562	2009-01-12	$86,000	Examples
Bradley Greer	Software Engineer	London	2558	2012-10-13	$132,000	Examples
Brenden Wagner	Software Engineer	San Francisco	1314	2011-06-07	$206,850	Examples
Brielle Williamson	Integration Specialist	New York	4804	2012-12-02	$372,000	Examples
Caesar Vance	Pre-Sales Support	New York	8330	2011-12-12	$106,450	Examples
Cedric Kelly	Senior Javascript Developer	Edinburgh	6224	2012-03-29	$433,060	Examples
Charde Marshall	Regional Director	San Francisco	6741	2008-10-16	$470,600	Examples
Colleen Hurst	Javascript Developer	San Francisco	2360	2009-09-15	$205,500	Examples

Showing 1 to 10 of 36 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

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


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

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

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

Bubble Editor options

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

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

Show entries

Search:

Name	Position	Office	Extn.	Start date	Salary	Examples
Name	Position	Office	Extn.	Start date	Salary	Examples
Airi	Accountant	Tokyo	5407	2008-11-28	$162,700	Examples
Angelica Ramos	Chief Executive Officer (CEO)	London	5797	2009-10-09	$1,200,000	Examples
Ashton Cox	Junior Technical Author	San Francisco	1562	2009-01-12	$86,000	Examples
Bradley Greer	Software Engineer	London	2558	2012-10-13	$132,000	Examples
Brenden Wagner	Software Engineer	San Francisco	1314	2011-06-07	$206,850	Examples
Brielle Williamson	Integration Specialist	New York	4804	2012-12-02	$372,000	Examples
Caesar Vance	Pre-Sales Support	New York	8330	2011-12-12	$106,450	Examples
Cedric Kelly	Senior Javascript Developer	Edinburgh	6224	2012-03-29	$433,060	Examples
Charde Marshall	Regional Director	San Francisco	6741	2008-10-16	$470,600	Examples
Colleen Hurst	Javascript Developer	San Francisco	2360	2009-09-15	$205,500	Examples

Showing 1 to 10 of 36 entries

Show code Edit in sandbox

HTML
JS

<div class="wrapper-editor">

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

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

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


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

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

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

MDB DataTable Editor - getting started : download & setup

Download

This plugin requires a purchase.
Buy table editor plugin

Table Editor

Bootstrap table editable plugin

How editors work

Editor with modal

How modal editor works

Row Editor

How the row editor works

Delete

Content Editor

Bubble Editor

Extended columns

Extended columns - Modal Editor

Seven columns

Fewer columns

Five columns

Extended columns - Row Editor

Seven columns

Delete

Fewer columns Table Row Editor

Five columns

Delete

Other Editors

MDB Table Editor Options

Modal Editor options

Row Editor options

Delete

Content Editor options

Bubble Editor options

MDB DataTable Editor - getting started : download & setup

Download

Tutorial