mindmup / editable-table

tiny jQuery/Bootstrap widget that makes a HTML table editable

editable-table

This tiny (3KB, < 120 lines) jQuery plugin turns any table into an editable spreadsheet. Here are the key features:

• No magic - works on a normal HTML table (so you can plug it in into any web table)
• Supports validation and change events (so you can warn about invalid input or prevent invalid changes)
• Uses standard DOM focus for selection (so does not interrupt scrolling or tabbing outside the table)
• Native copy/paste support
• Does not force any styling (so you can style it any way you want, using normal CSS)
• Works well with Bootstrap
• Depends only on jQuery

Basic Usage

See http://mindmup.github.com/editable-table/

Dependencies

• jQuery http://jquery.com/

editable-table's Issues

Add to bower

Please, add this repo in bower.io

disable for columns of cells

Hello, is it possible to disable this plugin for some cells or columns? So that when they are clicked the textAreaEditor won't open?

how to change the default cursor position from end of the text to some other position ?

i want to change the cursor position according to character position i am clicking.but when i click the cell the cursor position is place at the end of the text by default.how can i solve this

jQuery issues

I am trying to use this plugin for my project, but I have saw an issue that I don't use $ is jQuery method call, by default I use jQuery() to solve some javascript libraries conflict. May you use (function($) {...}(jQuery)).

Support for non-editable columns

It would be cool if we can choose non-editable columns.

I've patched your widget like

element.find("td:not([data-editable='no'])").on('click keypress dblclick', showEditor)

and

element.find("td:not([data-editable='no'])").prop('tabindex', 1);

not working on rows added dyamically

working excellent on table row, predefined but editing is not working on rows added,dynamically if there is any snippet please let me know

TAB doesn't work on Firefox

pressing TAB when the editor is open, opens the cell to the right in chrome, but not firefox on mac.
in firefox pressing tab just results in the cell losing focus. (often going to the url bar)

Keypress Up or Down not working with rowspan and colspan

'destroy' option

Hello,

I think this plugin is great, fully in lines with KISS principles! Nevertheless I am using it on pages whose table can be refreshed many times, have lines added dynamically, and also be validated. Consequently I would be interested to have a 'destroy' option included in this plugin, in order to prevent memory leaks and modifications once the table has been validated. I tried to do by myself but I have not managed to make it working (the table is still editable).

At line 56, I have inserted the following lines:

if(options == 'destroy') { element.find("td").off('click keypress dblclick', showEditor); } else { ... }

Could you please let me know what is wrong?

Thanks!

Using @Scripts.Render for jquery in ASP.NET MVC4 causes js events returning always true

Just came across this wierd bug. I wonder if anyone else experienced the same.

Validation did not work. Debugging showed that events were always true, no matter the return value.
All I could figure out is that deleting
@Scripts.Render("~/bundles/jquery")
from the shared footer view and addig the jquery with script tags (as you did) solves the problem.

According to diff they are identical, both version 2.1.0.

Allow table accept both dot and comma for decimals

Please, configure the possibility to have a comma as a decimal separator (actually using a comma to separe decimals from integers won't even trigger the action, leaving the cell to its original value)

First key stroke not captured in FireFox browser

I have noticed that in firefox it does not record the first keystroke in a cell, when the cell is activated with a keystroke. It appears to be working ok in other browsers that I have checked.

Allow to print the document.

improve the script by adding a button to print the document in an A4 page.

How the backeend of editable table work with asp.net core?

I want to use editable table in my project but i dont know how the BackEnd of editable table is working in asp.net core.

Get Data Out After Editted Table

Hi i have editted table using
onPostBody:
$('#normal_window_limit_table').bootstrapTable({
data: window,
onPostBody: function () {
$('#normal_window_limit_table').editableTableWidget({

and i have another click button function to get the data of the table after editted
var after_edit= $('#normal_window_limit_table').bootstrapTable('getData', {useCurrentPage: true});

however, the data in after_edit variable still use old data before editted
is there a way to get the data as the latest updated from the table?

Supporting Different Inputs

Is there a way to support different input types in individual cells? Like selects or checkboxes?

for selectively <td> edit add this code

124 string can be:
editor: $(''),editable: $('*')
and 11 string can be:
active = element.find('td:focus').filter(activeOptions.editable);

PROFIT!

Editable input creating issue in responsive.

The input is having the position =>absolute which is creating the issue on responsive screens. If i make the position to relative it is getting fixed but, it is taking some empty space after the table body when ever I try to edit some table data. Can u please help me out. You can get my issue in the below attachment.

Trying AJAX update of tables

First of all, I like your plugin very much, it's easy and simple. I wanted to tweak it a little bit so it updates the server-side data through ajax on change.

For that I made my .on("change") return a deferred object and changed your code to expect that.

Changed from:

 if (evt.result === false) {
            active.html(originalContent);
           }

to:

jQuery.when(evt.result)
    .done(function (result) {
                if (result !== null && typeof result === 'object') {
                    //if it's an object
                    if (result.success) {
                        //if the property exist or has a truthy value
                        return true;
                    }
                } else {
                    //it's a value or null
                    if (result) {
                        //if it has a truthy value
                        return true;
                    }
                }
               //it has a falsey value
                active.html(originalContent);
            })
    .fail(function () {
                active.html(originalContent);
            });

The beauty of using ".when()" is that it keeps working if you return a not deferred object. For instance, false, so it doesn't break your current functionality, but I have a problem I don't know how to solve.

The originalContent attribute gets overwritten, so if I change a cell and quickly change another cell and both fail, the 2nd one will get the originalContent of the 1st one, and the 1st one will keep the new content.

Any idea about how to fix this? I think that if we manage to, this would be a great addition to your already excellent widget. :)

Get the rows which have been edited

Hi,

Is there any way to get only those rows from the grid which have been edited by some flag?

I can do it programmatically by adding some flag, but would have been better if its already present in plugin :)

Thanks,
Shweta

Is it still maintained?

Hello,

is this repository still maintained? @gojko maybe it's time to find someone to clear pull requests and add new features?

Plugin not working with multiple tables

Using something along the lines of

  $('#t1').editableTableWidget().numericInputExample().find('td:first').focus();
  $('#t2').editableTableWidget()

Any idea why only t1 becomes editable? t2 does not get picked up as an editable table. If i remove the first line, then the second table becomes and editable table.

Is there any way to skip some colums while edititng?

I have a table with 4 column and i want to edit only last 2 columns.

And one more: Is there any way to use different input for different columns? I want to use text box for 3rd column and select for 4th?
Thanks

iPad issues

I can't seem to get this to work on iPad. It works perfectly otherwise. Am I missing something?

placeholder

I have added simple placeholder support for the editor using data-placeholder attribute on the table TD itself as a source for the text to read

            showEditor = function (select) {
                var selection = window.getSelection().toString();
                if(selection == "") {
                    active = element.find('td:focus');
                    if (active.length) {
                        editor.val(active.text())
new code-->         .attr('placeholder',(active.attr('data-placeholder')?active.attr('data-placeholder'):''))
                            .removeClass('error')
                            .show()

This code also include the if (selection) which check to make sure I am not selecting text in a table TD and this editor trigger for nothing and lose my selection.

Programmatically clicking a cell for editing

Heya, Great work with the plugin I absolutely love it!

I was wondering however if there was a way to programatically select a cell and show the editing caret inside. Ive tried the standard .focus() and .click() onto the cell to no avail =(

Cheers

Programmatically cancel editing

Hi, I have a scrolling table and would like to disable editing when the user scroll.
Is there a way to disable editing programmatically besides simulate "Esc" key ?

How to Run the Project？

How does the project work?Thank you

It doesn't work with datepicker

Hello,

Congratulations for this very nice plugin! Nevertheless, I have met a problem: it does not work with datepicker (that one from jquery-ui or also that one http://xdsoft.net/jqplugins/datetimepicker/)..

Thanks and best regards

errors with more than one editable table per page

Having more than one editable table on a page is causing javascript errors (tested in Firefox 28, Chrome 33, IE 10). All seem to be based on events, with many occurring when a cell loses focus, either by hitting ENTER, ESC, or clicking out of the cell.

Example errors (both tables on the page have unique id attributes)...

Firefox, when hitting ENTER or clicking out of a cell:

Firefox, when hitting ESC:

An error also occurs on keypress. Firefox:

Also, the target elements are getting mixed up somewhere. After a page load, if I focus a cell in the 2nd table, it will give an error on blur, but not actually blur. If I focus a cell in the 1st table first, it will blur correctly, but also give the error. If I focus/blur a cell in the 1st table, then do the same to the 2nd table, the value of the cell from the 1st table is replaced by the value of the cell from the 2nd table.

(I hope all that made sense.)

[Enhancement] Additional Events

This is an enhancement rather than an issue/bug, but I'm not too familiar with GitHub, and I didn't know if there was a better way to submit this. Anyway, I had a need for a few custom events, so I figured I'd share 😄. I've only done some quick testing so far, but everything looks to be in order.

I added editstart, which triggers when you focus a table cell and the editor appears, editend triggers when the editor is blurred and hidden, and editcancel triggers when you cancel editing by hitting ESC. Naturally, when cancelling (ESC), the editcancel and editend events will both trigger - editcancel goes first.

For the editend and editcancel events, the called function is passed a reference to the event and the table cell DOM element. The editstart function is passed the event, the table cell DOM element, and the editor input DOM element.

EDIT: I also updated the arguments that are passed to the called function for the change event. The previous ones remain the same (event, new value), but I added a third argument that contains the old cell value. This allows easy comparisons between the old and new values.

--- mindmup-editabletable.js        Thu May 01 15:28:56 2014
+++ mindmup-editabletable-new.js    Mon May 05 15:07:32 2014
@@ -27,6 +27,12 @@
                        editor.select();
                    }
                }
+               active.trigger('editstart', [active[0], editor[0]]);
+           },
+           hideEditor = function () {
+               setActiveText();
+               editor.hide();
+               active.trigger('editend', active);
            },
            setActiveText = function () {
                var text = editor.val(),
@@ -36,7 +42,7 @@
                    return true;
                }
                originalContent = active.html();
-               active.text(text).trigger(evt, text);
+               active.text(text).trigger(evt, [text, originalContent]);
                if (evt.result === false) {
                    active.html(originalContent);
                }
@@ -54,20 +60,19 @@
                return [];
            };
        editor.blur(function () {
-           setActiveText();
-           editor.hide();
+           hideEditor();
        }).keydown(function (e) {
            if (e.which === ENTER) {
-               setActiveText();
-               editor.hide();
+               editor.blur();
                active.focus();
                e.preventDefault();
                e.stopPropagation();
            } else if (e.which === ESC) {
+               active.trigger('editcancel', active);
                editor.val(active.text());
                e.preventDefault();
                e.stopPropagation();
-               editor.hide();
+               editor.blur();
                active.focus();
            } else if (e.which === TAB) {
                active.focus();

does not seem to work on touch devices

Accessing demo via android tablet, edit does not activate when taping the data area.