Tabulator: change grid options, columns, and data and regenerate grid

[carterwe]

I use the same grid for all reports. When I change reports I want to change grid options, change columns, and change data, then regenerate grid. How do I approach that? Thanks. Ed

[olifolkerd]

Hey Ed,

No problem at all, you just need to use the setColumns and setData functions to update the table and the data.

var newColumns = [
    {title:"Name", field:"name", sorter:"string", width:200, editor:true},
    {title:"Age", field:"age", sorter:"number", align:"right", formatter:"progress"},
    {title:"Height", field:"height", formatter:"star", align:"center", width:100},
    {title:"Favourite Color", field:"col", sorter:"string"},
    {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    {title:"Cheese Preference", field:"cheese", sorter:"boolean", align:"center", formatter:"tickCross"},
];

var newData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
];

//clear data (advisable if you have a lot of data in your table as it will speed up the column change)
$("#example-table").tabulator("clearData");

//set new columns
$("#example-table").tabulator("setColumns", newColumns);

//set new data
$("#example-table").tabulator("setData", newData );

Let me know if you want the column data to come in an ajax request with the data, as there is a different approach for that.

Cheers

Oli

[carterwe]

Oli, My error is when I try do change grid options. I get an error saying
I can't change grid options once they have been set. but I have different
grid options for different reports. thanks, Ed

On Sat, Jun 10, 2017 at 2:54 AM, Oli Folkerd [e-mail]
wrote:

Hey Ed,

No problem at all, you just need to use the setColumns and setData
functions to update the table and the data.

var newColumns = [
{title:"Name", field:"name", sorter:"string", width:200, editor:true},
{title:"Age", field:"age", sorter:"number", align:"right", formatter:"progress"},
{title:"Height", field:"height", formatter:"star", align:"center", width:100},
{title:"Favourite Color", field:"col", sorter:"string"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
{title:"Cheese Preference", field:"cheese", sorter:"boolean", align:"center", formatter:"tickCross"},
];
var newData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
];
//clear data (advisable if you have a lot of data in your table as it will speed up the column change)$("#example-table").tabulator("clearData");
//set new columns$("#example-table").tabulator("setColumns", newColumns);
//set new data$("#example-table").tabulator("setData", newData );

Let me know if you want the column data to come in an ajax request with
the data, as there is a different approach for that.

Cheers

Oli

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

[olifolkerd]

The error message is correct, Tabulator does not allow you to directly change the config options once the table is created, you instead have to use the many available functions in the API to adjust things once you are up and running.

As i suggest in the above example you want to be using the setColumns and setData functions

[olifolkerd]

what options do you want to change that you currently cant?

[carterwe]

Version 3. Problem started w this version. I want to change size of
grid. Ed
On Sat, Jun 10, 2017 at 2:36 PM Oli Folkerd [e-mail]
wrote:

what options do you want to change that you currently cant?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/358#issuecomment-307588843,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEZwSn8t7Wb-2jmc6ut6IOCLZD7yN-V9ks5sCv5dgaJpZM4N11yI
.

[carterwe]

Maybe I should just reinitialize grid.
On Sat, Jun 10, 2017 at 3:26 PM Ed Carter [e-mail] wrote:

Version 3. Problem started w this version. I want to change size of
grid. Ed

On Sat, Jun 10, 2017 at 2:36 PM Oli Folkerd [e-mail]
wrote:

what options do you want to change that you currently cant?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/358#issuecomment-307588843,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEZwSn8t7Wb-2jmc6ut6IOCLZD7yN-V9ks5sCv5dgaJpZM4N11yI
.

[carterwe]

Oli, Here is my current problem. I attempted to avoid the "changing
options" problem by reinitializing my grid with a brand new object when I
have a new set of options and columns and data like this.

px.$grd.tabulator($.extend( true, {}, px.cur.grdOpt)); //(px.$grd =
$("#grd");)

This gives the following error on an attempt to reinitialize after an ajax
call (after the first initialization): Options Error - Tabulator does not
allow options to be set after initialization unless there is a function
defined for that purpose

I think I need a way to reinitialize the grid. I did not have this problem
until I started using Version 3.

Thanks for your help! Ed

On Sat, Jun 10, 2017 at 7:16 PM, Ed Carter [e-mail] wrote:

Maybe I should just reinitialize grid.

On Sat, Jun 10, 2017 at 3:26 PM Ed Carter [e-mail] wrote:

Version 3. Problem started w this version. I want to change size of
grid. Ed

On Sat, Jun 10, 2017 at 2:36 PM Oli Folkerd [e-mail]
wrote:

what options do you want to change that you currently cant?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/358#issuecomment-307588843,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEZwSn8t7Wb-2jmc6ut6IOCLZD7yN-V9ks5sCv5dgaJpZM4N11yI
.

[olifolkerd]

Hi Ed,

Your problem comes because of needing to change the height, which you can no longer directly do in 3.0. I understand this is an issue for a number of users, so the 3.0.1 release coming out in the next week or so will no longer need the height option to be set at all, instead it will pay attention to the height of the table as defined in the css to resolve the issue.

If you cant wait till then, there are two options you could use. you could either reinitialise the grid, by destroying it and recreating it:

$("#example-table").tabulator("destroy");
$("#example-table").tabulator({...}); 

Or your could create a number of elements each with a different table and show only the one that is selected.

Sorry for any inconvenience this may cause u, the next update should help you out.

Cheers

Oli

[carterwe]

Hello, Oli.

tabulator("destroy");

was just what I needed!

I was looking for something like that in documentation but could not find
it.

Thanks!

Everything else I can wait for. :)

Ed

On Mon, Jun 12, 2017 at 3:48 PM, Oli Folkerd [e-mail]
wrote:

Hi Ed,

Your problem comes because of needing to change the height, which you can
no longer directly do in 3.0. I understand this is an issue for a number of
users, so the 3.0.1 release coming out in the next week or so will no
longer need the height option to be set at all, instead it will pay
attention to the height of the table as defined in the css to resolve the
issue.

If you cant wait till then, there are two options you could use. you could
either reinitialise the grid, by destroying it and recreating it:

$("#example-table").tabulator("destroy");$("#example-table").tabulator({...});

Or your could create a number of elements each with a different table and
show only the one that is selected.

Sorry for any inconvenience this may cause u, the next update should help
you out.

Cheers

Oli

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

[olifolkerd]

Hey Ed,

I have just committed a fix to the 3.1 branch, there is now a setHeight function you can use:

$("#example-table").tabulator("setHeight", 100);

There should be an official release of 3.1 this weekend.

Cheers

Oli

[carterwe]

Hello Oli. Thank you. How about group totals? When are they coming? I am
currently using union queries to add group totals and then row formatter to
make them bold. But group totals will be nice. I still owe you screen
shots of sophisticated reports with drill down and formatted multi value
cells. It's still coming. :)
On Sat, Jun 17, 2017 at 8:04 AM Oli Folkerd [e-mail]
wrote:

Closed #358 https://github.com/olifolkerd/tabulator/issues/358.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/358#event-1127864990, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AEZwSs_cSOTePBdrJoOULj7w-iXu8UJuks5sE9qDgaJpZM4N11yI
.

[alainpannetier]

Thanks Oli. Solves my problem too.
In 3.0 - resizing your browser (expanding the height of tabulator) would result into blank rows.
Now, in 3.1, previously blank rows are rendered.

[olifolkerd]

@carterwe column totals etc will be coming in 3.2 or 3.3,which willl also be applicable to groups.

If you could add any usage cases for these to issue #351 that would be great.

Cheers

Oli

[carterwe]

Oli, As promised - Here are my examples implementing group totals. I used a
combination of Union query with summary total and custom row formatter to
emphasize row with Total. I also included drilldown in my example as bonus.
:) Ed

[image: Inline image 2]

[image: Inline image 1]

On Sat, Jun 17, 2017 at 9:34 AM, Ed Carter [e-mail] wrote:

Hello Oli. Thank you. How about group totals? When are they coming? I
am currently using union queries to add group totals and then row formatter
to make them bold. But group totals will be nice. I still owe you screen
shots of sophisticated reports with drill down and formatted multi value
cells. It's still coming. :)

On Sat, Jun 17, 2017 at 8:04 AM Oli Folkerd [e-mail]
wrote:

Closed #358 https://github.com/olifolkerd/tabulator/issues/358.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/358#event-1127864990,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEZwSs_cSOTePBdrJoOULj7w-iXu8UJuks5sE9qDgaJpZM4N11yI
.

[olifolkerd]

Those images didnt come through :(

[carterwe]

Try these attachments. :)

On Fri, Jun 23, 2017 at 10:52 AM, Oli Folkerd [e-mail]
wrote:

Those images didnt come through :(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/358#issuecomment-310717563,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEZwSn8JK3KiPMj3XQedmz5qCMkKv1Qwks5sG-06gaJpZM4N11yI
.

[olifolkerd]

i think you might have to actually add them in git hub, it dosnt seem to be working via email

[hmpargi]

Hi,
So i have reintialize table

[hmpargi]

` //define table

var table = new Tabulator("#data-table", {

data: clientData, //set initial table data
layout: "fitColumns", //fit columns to width of table
responsiveLayout: "hide", //hide columns that dont fit on the table
tooltips: true, //show tool tips on cells
addRowPos: "top", //when adding a new row, add it to the top of the table
history: true, //allow undo and redo actions on the table
pagination: "local", //paginate the data
paginationSize: 30, //allow 7 rows per page of data
movableColumns: true, //allow column order to be changed
resizableRows: true, //allow row order to be changed
initialSort: [
//set the initial sort order of the data
{ column: "website", dir: "asc" }
],

columns: [
{ title: "No.", field: "no", width: 25 },
{
title: "Folder Id",
field: "folderId",
width: 150
},
{
title: "Wrike Id",
field: "wrikeId",
width: 95
},
{
title: "Website",
field: "website",
width: 150,
headerFilter: "input"
},
{
title: "Monthly Budget",
field: "budget",
width: 140
},
{
title: "Hours Spent",
field: "hours",
width: 120
},

{
  title: "Progress",
  field: "progress",
  formatter: "progress",
  formatterParams: {
    min: 0,
    max: 10,
    color: ["green", "orange", "red"],
    legendColor: "#000000",
    legendAlign: "center"
  }
}

]
} );

    // console.log(j);

    // console.log(
    //   " Index Number: " +
    //     j +
    //     " FolderID " +
    //     folderID +
    //     " Client " +
    //     minTommss(total)
    // );
    //var newtotal = JSON.stringify(minTommss(total));

    function displayDataTable(newtotal) {
      // let total = 0;
      // for (let i = 0; i < data.length; i++) {
      //   //console.log(data[i].hours)
      //   // clientData[i].hours = total += data[i].hours;
      //   total += data[i].hours;
      //   // console.log(j + folderID + " Client " + minTommss(total));
      //   //console.log(folderID);
      // }



      clientData.push({
        no: j,
        folderId: folderID,
        website: websiteName,
        wrikeId: wrikeidName,
        budget: wrikeBudget,
        hours: newtotal
      });

    }

  })
  .catch(err => {
    document.body.textContent = "Error: " + err.stack;
  });

}

}

`

So I have created table and then pushing the data inside table. I am getting data using some API. Everytime user Select dates and press button Submit data. should be updated. But right now my data is just adding the rows. I try to clear the table and re-push the data. But Its not working.
Any Idea where do i put $("#example-table").tabulator("destroy");
$("#example-table").tabulator({...});