Search code examples
contenteditablefootable

How to have an always editable column with footable

I would like to use footable (I've already use footable for its responsive exploding display )and this to show records coming from a database but with a need to have a column (which display the stock quantity of products) that thye user can modify just by typing. Is there any way of having some sort of content editable column.... Any idea will be welcome

Solution

  • You can render the column as HTML, which will prevent footable from taking over the content of the cell, and have an <input type="text" /> for each row.

    Something like:

    <table>
  <thead>
    <tr>
      <th>Name</th>
      <th data-type="html">In stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td><input type="number" step="any" value="3"/></td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td><input type="number" step="any" value="0"/></td>
    </tr>
  </tbody>
</table>

    Check the documentation at https://fooplugins.github.io/FooTable/docs/getting-started.html , look for "Column Options" > "Type" .

    After rendering you can attach an event listener to the input fields and send ajax calls accordingly.