Tabulator: table in table

[kurtknippschild]

Hi Oli,

sorry, I was to fast with closing the question.
It is also possible to have icons (formatter:iconFormatter) in all grouped headers?
I need this to invoke the function for info, editing, delete the user and add a new adress to the user.
The other icons are for info, edit, delete the adress of a user.
The standard_icon is tagged only the standard-adress of the user.
Here the current status (index_2.html).
aktivitaeten_tabulator.zip

Thanks in advance.

MG Kurt

[olifolkerd]

The title property for a column definition can take any html you want, so instead of passing just a string you could pass html into this property:

$("example-table").tabulator({
    columns:[
        {title:"Name  <i class='fa fa-user' style='vertical-align:middle; padding:2px 0;'></i>", field:"name"}, 
    ],
});

If you wanted to you could process this in a function and pass the returned value to the title property

//title formatter
var titleFormatter = function(title){
    return title + " <i class='fa fa-user' style='vertical-align:middle; padding:2px 0;'></i>";
}

//build table
$("example-table").tabulator({
    columns:[
        {title:titleFormatter("Name"), field:"name"}, 
    ],
});

[kurtknippschild]

Hi Oli,

thanks for your answer.
But my problem is I need the icon in the grouped header row of the user data.
When I set a title bevor the title:"Benutzername" the icon is in the adress-row.
Please look on index_2.html.
aktivitaeten_tabulator.zip

It should look like the screenshot.

MG Kurt

[olifolkerd]

In that case you need to insert the elements into the group header by adjusting the groupHeader option in your tabulator constructor.

You will notice in the example below, the addition of a span with class header-buttons to the groupHeader element, the buttons should be put in this.

You will then need to adjust the width calculation for the benutzername column, where it currently calculates the width with "- 42" to adjust for the width of the group toggle carret, you will need to increase this to take account of the width of the buttons as well.

groupHeader:function(value, count, data){ //header layout function
    //build header
    var groupHeader =  $("<span><span class='header-buttons'><i class='fa fa-user' style='vertical-align:middle; padding:2px 0;'></i></span><span class='group-header-col' data-field='benutzername'>" + (data[0].user.benutzername || "&nbsp") + "</span><span class='group-header-col' data-field='organisation'>" + (data[0].user.organisation || "&nbsp") + "</span><span class='group-header-col' data-field='angelegt'>" + (data[0].user.angelegt || "&nbsp") + "</span><span class='group-header-col' data-field='letzte'>" + (data[0].user.letzte || "&nbsp") + "</span></span>");

    //resize columns to match group columns
    setTimeout(function(){ //alow elements to be rendered before calculating widths
        $("[data-field=benutzername]", groupHeader).css("width", $("#example-table .tabulator-cell[data-field=adressen_typ]:first").outerWidth() + $("#example-table .tabulator-cell[data-field=anrede]:first").outerWidth() - 42);

        $("[data-field=organisation]", groupHeader).css("width", $("#example-table .tabulator-cell[data-field=firmenname]:first").outerWidth() + $("#example-table .tabulator-cell[data-field=vorname]:first").outerWidth());

        $("[data-field=angelegt]", groupHeader).css("width", $("#example-table .tabulator-cell[data-field=nachname]:first").outerWidth());

        $("[data-field=letzte]", groupHeader).css("width", $("#example-table .tabulator-cell[data-field=telefon]:first").outerWidth());
    }, 100)

    return groupHeader;
},

[kurtknippschild]

Hi Oli,

thanks for your help.
But this only helps a litte further.
In the picture from photoshop you can see wahr I want:

You can see in the html-file indes_user.html the four title are bevor the title "Benutzername" but after the generation these columns are in the wrong row.
aktivitaeten_tabulator.zip

I hope you understand my problem.

MG Kurt

[olifolkerd]

Turns out the latest release of tabulator introduced a bug into the minimum column width settings.

You were trying to set your columns to a width of 30px when the global minimum width of columns is set to 40px by default, and the system was getting confused.

if you download the latest version of tabulator.js it should resolve your issue and allow you to set minimum widths below the default minimum width

[kurtknippschild]

Hi Oli,

thanks for the fix.
A you can see, the first four columns are still not where they should be.

You should be preceded by using the username in the grouped row (first table).

Excuse ne for all the work I'm Zwilling to do.

MG Kurt

[olifolkerd]

Looking at the code you have sent over you haven't followed the previous instructions.

The header-buttons span is where you are supposed to put your buttons not just leave the example <i> tag.

The group header width adjustment of -40 in the width calculation hasnt been changed as suggested.

You had changed the field name of the at_typ column which had caused the calculations to break in the groupHeader function.

and one of the selectors in the groupHeader function had a typo in it.

To fix things you need to follow these steps:

Remove Unneeded Columns
Remove the first four icon columns you have put in the table (info_icon_user, edit_icon_user, delete_icon_user, neu_icon_user) These are going in the group header and so cannot have their own columns.

Create Group Header Buttons and Reformat the Header
Next you want create the icons in your group header and add the event bindings for the click event from the old columns, and adjust for their width. you will also need to adjust for the change of the at_typ field name. You should end up a groupHeader script like this:

groupHeader:function(value, count, data){ //header layout function
    //build header
    var groupHeader =  $("<span><span class='header-buttons'><img class='infoImage' data-action='details' src='static/img/" + data[0].info_icon_user + "'><img class='infoImage' data-action='edit' src='static/img/" + data[0].edit_icon_user + "'><img class='infoImage' data-action='delete' src='static/img/" + data[0].delete_icon_user + "'><img class='infoImage' data-action='new' src='static/img/" + data[0].neu_icon_user + "'></span><span class='group-header-col' data-field='benutzername'>"
        + (data[0].user.benutzername || "&nbsp") + "</span><span class='group-header-col' data-field='organisation'>"
        + (data[0].user.organisation || "&nbsp")
        + "</span><span class='group-header-col' data-field='angelegt'>"
        + (data[0].user.angelegt || "&nbsp") + "</span><span class='group-header-col' data-field='letzte'>"
        + (data[0].user.letzte || "&nbsp")
        + "</span></span>");


    //button event bindings
    $("[data-action=details]", groupHeader).click(function(){
        alert("info user data for: " + data[0].us_id)
    });

    $("[data-action=edit]", groupHeader).click(function(){
        alert("edit user data for: " + data[0].us_id)
    });

    $("[data-action=delete]", groupHeader).click(function(){
        alert("delete user data for: " + data[0].us_id)
    });

    $("[data-action=neu]", groupHeader).click(function(){
        alert("neu user data for: " + data[0].us_id)
    });

    //resize columns to match group columns
    setTimeout(function(){ //alow elements to be rendered before calculating widths
        $("[data-field=benutzername]", groupHeader).css("width", $("#tabulator_user .tabulator-cell[data-field=at_typ]:first").outerWidth()
            + $("#tabulator_user .tabulator-cell[data-field=anrede]:first").outerWidth() + 2);

        $("[data-field=organisation]", groupHeader).css("width", $("#tabulator_user .tabulator-cell[data-field=firmenname]:first").outerWidth()
            + $("#tabulator_user .tabulator-cell[data-field=vorname]:first").outerWidth());

        $("[data-field=angelegt]", groupHeader).css("width", $("#tabulator_user .tabulator-cell[data-field=nachname]:first").outerWidth());

        $("[data-field=letzte]", groupHeader).css("width", $("#tabulator_user .tabulator-cell[data-field=telefon]:first").outerWidth());
    }, 300)

    return groupHeader;
},

You will also want a bit of css styling to make the buttons look better:

.tabulator .header-buttons {
    margin-left:-10px !important;
}
.tabulator .header-buttons img{
    padding:2px 4px;
    vertical-align: middle;
}

Hopefully that should have you all sorted out :)

[kurtknippschild]

Hi Oli,

thank you very much.
It now works as well as it should be and also looks good.

Now you can definitely close the question. 😀

MG Kurt