Search code examples
javascripttabulator

One Row - Two Data Sets


I realise that it's preferred to provide the source and context of the code, but this is a pretty simple question which is applicable to most Tabulator examples.

Is it possible to have one row, source its information from two seperate datasets (the row being "joined" as such by the unique identifier).

var TableData =
[
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red"},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue"},
    {id:1, q1_2019:"2000", q2_2019:"4100"},
    {id:2, q1_2019:"4900", q2_2019:"5700"},
]

The purpose behind this of course, is that I have two datasets which I would like to merge together. The reason behind not placing it within the one row:

  • The first dataset will remain static, the details almost never changing
  • The second dataset will grow continuously (17 records per year, per row)
  • The user will define a data range, which will constrain the second dataset (outside of Tabulator) which will be parsed

Rather than passing all the data, all of the time, regardless of the query and then reducing the dataset by the found columns (which again will be calculated outside of Tabulator), the above method would save on a tonne of processing!


Solution

  • A row must be based of off one object, the id/key is only used to reference the row from outside the table.

    I would recommend creating a property inside the first object that contains the sub data

    You would need to merge the objects before passing them into the table. if it is an array you are passing in this should be a fairly simple process before instantiating the table.

    If you are using ajax, you can use the ajaxResponse callback to parse the data before it is passed into Tabulator for processing. more information on this can be found in the ajax documentation