Table editable

Bootstrap table editable

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

With an Editable Bootstrap Table, you can add and remove rows, plus and change text and information within cells. In-place editing on your website - based on JavaScript - is now easier and quicker.

Note: If you need more advanced functionality, have a look at our Table editor plugin.


Basic example

Editable table

Person Name Age Company Name Country City Sort Remove
Aurelia Vega 30 Deepends Spain Madrid
Guerra Cortez 45 Insectus USA San Francisco
Guadalupe House 26 Isotronic Germany Frankfurt am Main
Elisa Gallagher 31 Portica United Kingdom London
        
            
        <!-- Editable table -->
        <div class="card">
          <h3 class="card-header text-center font-weight-bold text-uppercase py-4">
            Editable table
          </h3>
          <div class="card-body">
            <div id="table" class="table-editable">
              <span class="table-add float-right mb-3 mr-2"
                ><a href="#!" class="text-success"
                  ><i class="fas fa-plus fa-2x" aria-hidden="true"></i></a
              ></span>
              <table class="table table-bordered table-responsive-md table-striped text-center">
                <thead>
                  <tr>
                    <th class="text-center">Person Name</th>
                    <th class="text-center">Age</th>
                    <th class="text-center">Company Name</th>
                    <th class="text-center">Country</th>
                    <th class="text-center">City</th>
                    <th class="text-center">Sort</th>
                    <th class="text-center">Remove</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="pt-3-half" contenteditable="true">Aurelia Vega</td>
                    <td class="pt-3-half" contenteditable="true">30</td>
                    <td class="pt-3-half" contenteditable="true">Deepends</td>
                    <td class="pt-3-half" contenteditable="true">Spain</td>
                    <td class="pt-3-half" contenteditable="true">Madrid</td>
                    <td class="pt-3-half">
                      <span class="table-up"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a
                      ></span>
                      <span class="table-down"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a
                      ></span>
                    </td>
                    <td>
                      <span class="table-remove"
                        ><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">
                          Remove
                        </button></span
                      >
                    </td>
                  </tr>
                  <!-- This is our clonable table line -->
                  <tr>
                    <td class="pt-3-half" contenteditable="true">Guerra Cortez</td>
                    <td class="pt-3-half" contenteditable="true">45</td>
                    <td class="pt-3-half" contenteditable="true">Insectus</td>
                    <td class="pt-3-half" contenteditable="true">USA</td>
                    <td class="pt-3-half" contenteditable="true">San Francisco</td>
                    <td class="pt-3-half">
                      <span class="table-up"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a
                      ></span>
                      <span class="table-down"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a
                      ></span>
                    </td>
                    <td>
                      <span class="table-remove"
                        ><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">
                          Remove
                        </button></span
                      >
                    </td>
                  </tr>
                  <!-- This is our clonable table line -->
                  <tr>
                    <td class="pt-3-half" contenteditable="true">Guadalupe House</td>
                    <td class="pt-3-half" contenteditable="true">26</td>
                    <td class="pt-3-half" contenteditable="true">Isotronic</td>
                    <td class="pt-3-half" contenteditable="true">Germany</td>
                    <td class="pt-3-half" contenteditable="true">Frankfurt am Main</td>
                    <td class="pt-3-half">
                      <span class="table-up"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a
                      ></span>
                      <span class="table-down"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a
                      ></span>
                    </td>
                    <td>
                      <span class="table-remove"
                        ><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">
                          Remove
                        </button></span
                      >
                    </td>
                  </tr>
                  <!-- This is our clonable table line -->
                  <tr class="hide">
                    <td class="pt-3-half" contenteditable="true">Elisa Gallagher</td>
                    <td class="pt-3-half" contenteditable="true">31</td>
                    <td class="pt-3-half" contenteditable="true">Portica</td>
                    <td class="pt-3-half" contenteditable="true">United Kingdom</td>
                    <td class="pt-3-half" contenteditable="true">London</td>
                    <td class="pt-3-half">
                      <span class="table-up"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a
                      ></span>
                      <span class="table-down"
                        ><a href="#!" class="indigo-text"
                          ><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a
                      ></span>
                    </td>
                    <td>
                      <span class="table-remove"
                        ><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">
                          Remove
                        </button></span
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!-- Editable table -->
      
        
    
        
            
        .pt-3-half { 
          padding-top: 1.4rem; 
        }
      
        
    
        
            
        const $tableID = $('#table'); const $BTN = $('#export-btn'); const $EXPORT = $('#export');
        const newTr = `
        <tr class="hide">
          <td class="pt-3-half" contenteditable="true">Example</td>
          <td class="pt-3-half" contenteditable="true">Example</td>
          <td class="pt-3-half" contenteditable="true">Example</td>
          <td class="pt-3-half" contenteditable="true">Example</td>
          <td class="pt-3-half" contenteditable="true">Example</td>
          <td class="pt-3-half">
            <span class="table-up"
              ><a href="#!" class="indigo-text"
                ><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a
            ></span>
            <span class="table-down"
              ><a href="#!" class="indigo-text"
                ><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a
            ></span>
          </td>
          <td>
            <span class="table-remove"
              ><button
                type="button"
                class="btn btn-danger btn-rounded btn-sm my-0 waves-effect waves-light"
              >
                Remove
              </button></span
            >
          </td>
        </tr>
        `; 
        $('.table-add').on('click', 'i', () => {
          const $clone = $tableID.find('tbody
              tr ').last().clone(true).removeClass('
              hide table - line '); if ($tableID.find('
              tbody tr ').length ===
              0) {
              $('tbody').append(newTr);
          }
          $tableID.find('table').append($clone);
      });
      $tableID.on('click', '.table-remove', function() {
          $(this).parents('tr').detach();
      });
      $tableID.on('click', '.table-up', function() {
          const $row = $(this).parents('tr');
          if ($row.index() === 0) {
              return;
          }
          $row.prev().before($row.get(0));
      });
      $tableID.on('click',
          '.table-down',
          function() {
              const $row = $(this).parents('tr');
              $row.next().after($row.get(0));
          }); // A few jQuery helpers for exporting only jQuery.fn.pop
      = [].pop;
      jQuery.fn.shift = [].shift;
      $BTN.on('click', () => {
          const $rows =
              $tableID.find('tr:not(:hidden)');
          const headers = [];
          const data = []; // Get the headers
          (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function() {
              headers.push($(this).text().toLowerCase());
          }); // Turn all existing rows into a loopable
          array $rows.each(function() {
              const $td = $(this).find('td');
              const h = {}; // Use the
              headers from earlier to name our hash keys headers.forEach((header, i) => {
                  h[header] =
                      $td.eq(i).text();
              });
              data.push(h);
          }); // Output the result
          $EXPORT.text(JSON.stringify(data));
      });
      
        
    

Advanced example - table editor

The table editor is an extension that allows you to create customized, fully editable tables.

Learn more