Tabulator: Dynamically Add Header Filter

[rjcorne]

I'm trying to add a right-click menu to the headers to be able to dynamically add a headerFilter option. However, when I call the redraw method on the Tabulator, the headers don't seem to be getting recreated based on the updated definition. I just get the same thing back that was there before. I'm not sure if it's a bug or if I should be doing something different. Any suggestions?

Here's the code I'm using for headerContext:
var rightClickOptionsMenu = function(e, columnDef) { console.log(columnDef); var dialog = $('<div></div>').dialog({ title: 'Options', modal: true, buttons: { 'Add Header Filter': function() { columnDef.getDefinition().headerFilter = "input"; columnDef.getElement().closest(".tabulator").tabulator("redraw", true); dialog.dialog( "close" ); } } }); }

Thanks!

[olifolkerd]

Hey,

Novel Idea, I like it!

The redraw function only graphically redraws the current configuration of the columns, it does not allow for changing configuration.

There are a lot of systems that build on one another when you create a column, so simply updating the definition wont cause the columns to update.

The good news is there is a way to achieve this, you just need to add a new column and delete the old one.

I am assuming in your example that columnDef is the column component object for the column that was clicked. In that case the following should work:

var table = columnDef.getElement().closest(".tabulator"); //find table
var newDef = columnDef.getDefinition(); //get original column definition

newDef.headerFilter = "input"; //make changes to definition

table.tabulator("addColumn", newDef , false, columnDef); //insert new column after old column
columnDef.delete(); //remove old column

Let me know if that helps.

Cheers

Oli

[rjcorne]

Ahhh, that makes sense. It also works perfectly! Thanks for the info and speedy response!

My plan is to implement other, similar functionality there as well like freezing columns, visibility, choosing a formatter, etc. That way my user can bring in a simple dataset. I'll set the minimum properties just to get it to display in Tabulator. Then they can configure it to look and behave however they want.

[olifolkerd]

When you've got it up and running could you post a link? I would love to see it all in action!

[rjcorne]

Not sure I'll be able to post a public link, but I'll definitely see what I
can do to get you a demo at least.

On Mon, Jul 24, 2017 at 5:39 PM, Oli Folkerd [e-mail]
wrote:

When you've got it up and running could you post a link? I would love to
see it all in action!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/475#issuecomment-317575212,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACo-KuwMUT9ixgtfsSnKDmPvEVTOd9tPks5sRR0WgaJpZM4OhxX5
.