Figuration Table : Demo

Examples

Editable and Sortable

A B C D E F
alpha uno beta uno gamma uno delta uno epsilon uno 123
alpha dos beta dos gamma dos delta dos epsilon dos 456
alpha tres beta tres gamma tres delta tres epsilon tres 789
alpha quatro beta quatro gamma quatro delta quatro epsilon quatro 012
alpha cinco beta cinco gamma cinco delta cinco epsilon cinco 345

JSON Loaded Table

JSON Output

Use the included $.CFW_Table_JSON() jQuery function to convert the table data to JSON for other uses, such as saving to the server.

The following example shows how to generate the second table example back to JSON. 

var output = $('#ex1').CFW_Table_JSON();

Generate JSON output from either of the above tables, see the output below. The results will include any updates or edits to the table.









JSON Loaded Table with Altered Layout




    

        
    










Static Table



    

        
            

                A
                B
                C
                D
                E
                F
            

        
        
            

                alpha uno
                beta uno
                gamma uno
                delta uno
                epsilon uno
                123
            

            

                alpha dos
                beta dos
                gamma dos
                delta dos
                epsilon dos
                456
            

            

                alpha tres
                beta tres
                gamma tres
                delta tres
                epsilon tres
                789
            

            

                alpha quatro
                beta quatro
                gamma quatro
                delta quatro
                epsilon quatro
                012
            

            

                alpha cinco
                beta cinco
                gamma cinco
                delta cinco
                epsilon cinco
                345
            

        
    








Usage



Options



    

    
        

            Name
            Type
            Default
            Description
        

    
    
        

            sortable
            boolean
            false
            Initialize with sorting. (Not compatible with coledit and will override the coledit option.)
        

        

            editable
            boolean
            false
            Initialize with cell editing
        

        

            coledit
            boolean
            false
            Initialize with header cell editing. (Not compatible with sortable.)
        

    
    





Methods



    

    
        

            Method
            Description
        

    
    
        

            CFW_Table('insertRow', [index])
            Insert a new row into tbody at the bottom. index is the optional row index insert location within the tbody.
        

        

            CFW_Table('deleteRow', [index])
            Remove a row from tbody at the bottom. index is the optional row index within the tbody to be removed.
        

        

            CFW_Table('appendCol', [index])
            Insert a new column into table at the right. index is the optional column index insert location within the table.
        

        

            CFW_Table('removeCol', [index])
            Remove a column from table at the right. index is the optional column index within the table to be removed.
        

        

            CFW_Table('editEnable')
            Enable cell editing.
        

        

            CFW_Table('editDisable')
            Disable cell editing.
        

        

            CFW_Table('sortEnable')
            Enable column sorting. (Will disable column header editing.)
        

        

            CFW_Table('sortDisable')
            Disable column sorting.
        

        

            CFW_Table('editorSave')
            Call to save the active editor value and remove the editor instance.
        

        

            CFW_Table('colEditEnable')
            Enable column header editing. (Will disable sorting.)
        

        

            CFW_Table('colEditDisable')
            Disable column header editing.
        

        

            CFW_Table('dispose')
            Disable functionality, remove event listeners and data.
        

    
    





Events



Most events are triggered on the table element, with a few exceptions, noted below.




    

    
        

            Event Type
            Description
        

    
    
        

            init.cfw.table
            Initialization complete.
        

        

            validate.cfw.table
            Called on the active cell. Fires on change on input when editing a cell. If the event gets a return value of false, an .error class is added to the editor input.
        

        

            change.cfw.table
            Called on the active cell. Fires when content of a table cell changes. If the event gets a return value of false the change is stopped.
        

        

            beforeInsertRow.cfw.table
            Fires before a row is inserted.
        

        

            afterInsertRow.cfw.table
            Fires after a row is inserted.
        

        

            beforeDeleteRow.cfw.table
            Fires before a row is deleted.
        

        

            afterDeleteRow.cfw.table
            Fires after a row is deleted.
        

        

            beforeAppendCol.cfw.table
            Fires before a column is appended.
        

        

            afterAppendCol.cfw.table
            Fires after a row is appended.
        

        

            beforeRemoveCol.cfw.table
            Fires before a row is removed.
        

        

            afterRemoveCol.cfw.table
            Fires after a row is removed.
        

        

            beforeShowEditor.cfw.table
            Fires before the editor input is shown.
        

        

            afterHideEditor.cfw.table
            Fires after the editor input is shown.
        

        

            beforeHideEditor.cfw.table
            Fires before the editor input is hidden.
        

        

            afterHideEditor.cfw.table
            Fires after the editor input is hidden.