Tabulator: (pinned?)Design ideas and inspiration!

[Rodbjartson]

Hey guys!
This is not question, but I challenge you guys to share your tabulator design ideas!
Share code and screenshots of your tabulator design and behavior!
Any special features your table provides? Post it!
Would be nice if we shared design ideas and functionality, I think everyone in this community would benefit from this :)
I will also update this post so that we can have monthly awards to the best design and the best functionality! :)

[olifolkerd]

@Rodbjartson,

Great idea!, I am looking to create a new case studies section on the Tabulator website to show off different ways of using the system, i would be happy to feature working examples of any novel uses, with the developers permission of course.

Cheers

Oli

[olifolkerd]

As a start i have done a few unusual things with Tabulator (i will post some working examples this weekend):

• Calculations along rows, allowing a user to add qty, unit cost, vat rate, net cost and gross cost, changing any one of these automatically updates the others
• Drag and drop of rows between tables
• Adding expanding divs under each row to contain buttons and controls relating to a row
• Using mutators to create data fields that did not exist when the data was set
• Extending Tabulator with a wide range of custom mutators, accessors, formatters, editors, sorters and key bindings

Cheers

Oli

[Rodbjartson]

@olifolkerd Hey I know you are very busy with the next release which we all look forward to with huge excitement! However, could you post some examples with code of "Adding expanding divs under each row to contain buttons and controls relating to a row"?

[olifolkerd]

Hey @Rodbjartson

You would need to use a rowFormatter for that. (these have been enhanced in 3.4 to perform better when table data is updated).

The example below is a very crude element that allows you to toggle the visibility of a row of buttons that can be used to toggle the selection of a row and delete a row:

$("example-table").tabulator({
    columns:[...define your columns ...],
    rowFormatter:function(row){
        //create row buttons container
        var el = $("<div></div>");

        //button toggle controls
        var toggler = $("<div>Show/Hide Buttons <i class='fa fa-caret-down'></i></div>");

        //button holder
        var buttons = $("<div style='display:none;'></div>");;

        //show/hide buttons on click
        toggler.click(function(){
            buttons.toggle();
        });

        //create selection button
        var selectEl = $("<button type='button'>toggleSelection</button>");

        selectEl.click(function(){
            row.toggleSelect()
        });

        buttons.append(selectEl);

        //create delete button
        var deleteEl = $("<button type='button'>delete</button>");

        deleteEl.click(function(){
            row.delete()
        });

        buttons.append(deleteEl);

        el.append(toggler);
        el.append(buttons);

        //add element to row
        row.getElement().append(el);
    },
});

I hope that helps

Cheers

Oli :)