How do you add (or replace) the data in Grid.js once it has been rendered?

Question

I want to render data to Grid.JS initially and then my page may grab additional data and add additional rows or fill in data that was missing in some of the rows. I'm not sure what the syntax is to write to the Grid.JS once you have rendered it once. My thought is that I have to rerender the entire table which is what I am attempting below but getting an error.

I tried this:

    new gridjs.Grid({
      columns: ["Name", "Email", "Phone Number"],      
      data: [["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"]]}).render(document.getElementById("gridjs"));

    new gridjs.Grid({
      columns: ["Test", "Email", "Phone Number"],
      data: [["test", "test@example.com", "(353) 01 222 3333"],["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"]]}).render(document.getElementById("gridjs"));

When I attempt this I get the following error in the console:

[Grid.js] [ERROR]: The container element [object HTMLDivElement] is not empty. Make sure the container is empty and call render() again

Does this answer your question? [How do I update the data in jsGrid without the ability to use AJAX in the loadData() controller? (The array isn't finished populating yet)](https://stackoverflow.com/questions/49500522/how-do-i-update-the-data-in-jsgrid-without-the-ability-to-use-ajax-in-the-loadda) — Ouroborus, Jul 06 '21 at 05:12
Hi Ouroborus. It seems like the link above is to a different software library with a similar name. JS-Grid vs. Grid.js. It looks like the products are different enough that the syntax for the other library does not seem to answer my question so far as I can tell. My question was poorly constructed, so the confusion was my fault. — Joseph U., Jul 08 '21 at 00:40
For grid.js, maybe you're looking for [`.forceRender()`](https://gridjs.io/docs/examples/force-render/)? — Ouroborus, Jul 08 '21 at 02:29
This is exactly what I needed. Thank you for uncovering this. I know it was in the documentation but it wasn't intuitive to me and is a huge help. — Joseph U., Jul 08 '21 at 04:48

score 7 · Answer 1 · answered Sep 17 '21 at 13:11

Like @Ouroborus said in comment, you're looking for forceRender().

In you're exemple you can update the datas of the grid like this :

// Set the grid
const mygrid = new gridjs.Grid({
    columns: ["Name", "Email", "Phone Number"],      
    data: [
        ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ]
}).render(document.getElementById("gridjs"));

// Update Datas
mygrid.updateConfig({
    data: [
        ["test", "test@example.com", "(353) 01 222 3333"],
        ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ]
}).forceRender();

How do you add (or replace) the data in Grid.js once it has been rendered?

1 Answers1