gridjs | Advanced table plugin | Grid library

I am using Grid.js library to build the tables in the wordpress website. Searched for a lot of documentation but unable to find how to add links to the names in the first column to open in a new tab which is the array object.

HTML

I'm a java-script newbee, that's why I struggle with the mapping of a simple json array, if it is a response from a server. I've tested it with static json, and it works as expected:

I am using Grid.js (Svelte wrapper). (For those wondering, Svelte is a derivative of React that is growing exponentially in popularity, for good reason)

The data is brought into the app via a fetch call and, depending on what's in the data, I need to rename two column titles.

The data comes in as an array of objects (works fine). The Svelte REPL demo shows the data as an array of arrays, where renaming a column is simply a matter of changing the name in the columns definition. Simple.

But when the data is an array of objects, which works just fine with Svelte/Grid.js in all other aspects, changing a column name causes that column to be excluded from the table.

So there must be a way to change the column's display title (table header title) without excluding the column...?

Here's a persistent Svelte REPL example/demo using Grid.js (it is the example/demo created by the hero who ported Grid.js to Svelte). To see the problem, change

Hope you are doing great!.

I have to insert multiple records in the same cell using gridjs. Can someone help me with that?

Let's say here is my sample response from my api

Using gridjs.io, I would like to perform a search when the gridjs table is initialized. More generally speaking, I would like to know how to programatically use the search without the user using the input field.

What I tried:

• enabled search plugin (search works perfectly fine when using the input field)
• i tried "minicking" user input by selecting the input field with javascript and changing its value to my keyword. This did not filter the table. Only when manually typing the filtering is applied.

Example Code not working:

HTML

I'm using the gridjs-react library to create a table as follows:

Intead of using the default search bar, I'd like to customize it as follows:

1. Add a button in front of the search bar.
2. Use an icon () in the search placeholder.

Here's my code so far:

I'm using gridjs-react to create a custom grid as follows:

Is this feature available with gridjs or I am not putting it in right place as expected by Api?