Questions tagged [gridjs]

Grid.js is an open-source table library written in TypeScript

Filter by
Sorted by
Tagged with
-1 votes
0 answers
80 views

How to alternate background color for rows using the javascript library gridjs?

I did not find a way to do this after reading the full project documentation. You can customize table, td but not tr. I tried to add custom CSS, but it does not work: tr:nth-child(even) { background-...
Tony Chemit's user avatar
  • 1,181
0 votes
0 answers
69 views

Liveweave vs jsfiddle and codepen - Same code, different results

I'm using liveweave to design an app. Right now everything is working fine on the console of this editor. However, when I downloaded the code and tried it in Google Chrome, I noticed that my table ...
Pedro Carvalho's user avatar
0 votes
0 answers
17 views

Side by Side Grids

How could I approach the following ... I have a dataset, lets say it has 75 rows I would like this data to be displayed in a grid, the first 25 rows in the left hand grid and then next 25 rows in the ...
Chris Davis's user avatar
0 votes
0 answers
62 views

How to get the inner text of an anchor tag from a gridjs table

Consider an anchor tag for instance: <a href="/stats/ABCXYZ/1">ABCXYZ</a> I want to be able to extract the text ABCXYZ and pass it to myFunction as an argument. This anchor tag ...
Waqas's user avatar
  • 311
1 vote
1 answer
110 views

GridJS adding data to table using a JSON array

I have a GridJS table in my project in javascript and I need to put data in it from a JSON array let data = [{"nr": 1, "time": "26.000", "ao5": "26.000&...
Kaskapa's user avatar
  • 45
0 votes
1 answer
58 views

how to get sql data in [["row1","row2","row3"],["row1","row2","row3"]] [duplicate]

I want to get sql data for a gridjs table var jobListAllData = [ ["Marketing Directortt", "Meta4Systems", "Vinninga, Sweden", "$250 - $800", "0-5 ...
Sukrat Chakravarti's user avatar
0 votes
1 answer
82 views

GridJs isn't sorting column when converting from HTML table

I'm trying to use GridJS to sort/search an existing html table. But sorting isn't working. The search bar is ok. Any idea ? I think it should be easy but i stuck there const table = new ...
rrr63's user avatar
  • 219
0 votes
0 answers
57 views

Searching in gridjs HTML fields

My table has nearly all columns filled with HTML links like <a href="...">content</a> How shoud I formulate the search function so that the normal gridjs search be executed also ...
redskate's user avatar
0 votes
1 answer
226 views

Pagination issue with fetching data in React using useState and useEffect

Pagination issue with fetching data in React using useState and useEffect I'm working on a React application where I have a UserList component that displays a list of users fetched from a backend API. ...
Mehrdad Daneshmand's user avatar
0 votes
0 answers
155 views

How to update only gridjs record not whole table when attribute changes inside the data in gridjs-react

How to update only gridjs record not whole table when attribute changes inside the data in gridjs-react I am have added a checkbox as a viurtual dom. when I select the checkbox into 2nd or 3rd page it ...
Gajanan Gaikwad's user avatar
1 vote
1 answer
50 views

It's possible to set <tr> height of element that has 'display:table-row'?

I'm using grid.js to render a table in a webpage. Having a fixed-height table expressed in vh units (60vh), with less rows than the pagination limit i got this strange effect: gridjs-tablerow-height ...
chrias's user avatar
  • 11
0 votes
1 answer
373 views

Custom pagination in gridjs with react

I want to do custom pagination with gridjs and react. So, I have say 1000 records to show in table. And records per page will be 10. So, I want to show in the pagination footer like this --> ...
amritkv88's user avatar
0 votes
1 answer
192 views

I want to sort date column in gridjs and i am displaying date in mm/dd/yyyy format

I want to sort date column in gridjs and i am displaying it in mm/dd/yyyy format. Currently it is taking as string and sorting incorrectly. Any formatter or sort option available for date column in ...
Srini's user avatar
  • 1
0 votes
0 answers
260 views

Grid.js from HTML Table with RowSelection

I would like to use https://gridjs.io/ with a HTML table that is already rendered. I would also like to utilize the RowSelection Plugin. How can I do both. Here is the code I would like to execute. ...
John Little's user avatar
0 votes
0 answers
149 views

customize gridjs onclick on htmlheader column

I am using gridjs. I want to have a select all checkbox instead of column name how can I do that, I have written a following code for a grid. I am able to show the check box instead of the column name ...
Gajanan Gaikwad's user avatar
0 votes
1 answer
494 views

Use SolidJS components within Grid.js

I'm trying to use a custom formatter feature of Grid.js with SolidJS component. Here is a sandbox on Stackblitz. I am getting the following error: computations created outside a `createRoot` or `...
Meowster's user avatar
  • 497
0 votes
1 answer
321 views

How to customize searchable fields with selector in gridjs

In gridjs there is an the example of using selector in search field. const grid = new Grid({ columns: [ { name: 'Name', formatter: (cell) => cell.firstName }, 'Email', '...
garej's user avatar
  • 518
1 vote
1 answer
496 views

When try server side sorting with Grid.js it does multiple calls to the server that could be avoided

I'm using Grid.js accessing server data and performing server side sorting (this on Grid.js doc ). My problem is that when I try to sort a column it makes a number of calls to the server equal to the ...
Alessandro Amerio's user avatar
0 votes
0 answers
59 views

Page Number not Rendering for Server Side Pagination in GridJS on Vue3.x

Am trying to achieve Server Side Pagination using Gridjs in my Vue Application, the data is rendering correctly but pagination is not showing in the grid bottom. This is my code link what i have tried ...
balajivaishnav's user avatar
1 vote
0 answers
172 views

Which event is get emmited by gridjs after search completion

I am trying to use the event from gridjs. but as I was only able to access the ready, load, and beforeload event.but for search event completion. or other events where can I find the documentation for ...
Gajanan Gaikwad's user avatar
0 votes
1 answer
426 views

How does one access all of the paginated data in grid.js?

I am using grid.js along with its selection plugin to have the user select specific rows in the table. An example of the script is shown below with a function that gets called when a button on the ...
Daniel Logan's user avatar
0 votes
1 answer
854 views

How to get server side pagination + search + sorting in grid.js?

I can get the table working with server side data and server side search, but when I start trying to add pagination and sorting on top of that (both server side) I get errors and it stops working. I'...
Mikle Culaciati's user avatar
0 votes
0 answers
99 views

How to adjust row height in gridjs currently it is autosizing based on number of records

My gridjs row is changing based on number of records in the table. How to give fixed height to the row?
Srini's user avatar
  • 1
0 votes
0 answers
189 views

wrap gridjs component in a DragDropContext using react-beautiful-dnd

I am not a react expert, and I am trying to integrate a gridjs component with react-beautiful-dnd library. The objective is to add drag and drop functionaly to a gridjs table. I have create a react ...
Nikolas's user avatar
0 votes
0 answers
68 views

How to call vue-router link in gridjs?

I'm having a Vue.js application and using gridjs for rending my tables. Everything works fine, except one thing... My code is the following (modified from the original expamle from Grid.js): <...
Nrgyzer's user avatar
  • 843
2 votes
0 answers
369 views

Active/selected row in grid.js?

We need a grid control in our web application, and we are looking into grid.js. (I’m new to grid.js, so sorry if this is a dumb question. 😊) Grid.js handle most of our needs – and an MIT license is ...
UglySwede's user avatar
  • 439
0 votes
0 answers
682 views

How to add attributes with dynamic values on Grid.js?

I need to add dynamics(conditionals) values to an attribute on GridJs table, but i haven't found a way to do it on render time. I have a column named "Type" and, for a distinct "Type&...
David Lerma Developer's user avatar
0 votes
2 answers
133 views

jQuery attr() Method add html tag

I have a search input tag, and I wanted to set a placeholder. In place holder I need to keep a magnify icon, how to do it in jquery? below is the code I tried $('.gridjs-head .gridjs-search .gridjs-...
Shaheem PP's user avatar
2 votes
2 answers
138 views

Sorting by integer column doesn't sort by amount. Is it possible?

My data: data: [ ["A","2"], ["B","100"], ] I was expecting it to sort by amount: 2 then 100, but it's the opposite. First row shows 100, second row ...
Adam's user avatar
  • 3,341
0 votes
1 answer
630 views

Refresh Gridjs Table on AJAX success

The AJAX code works fine and creates my desired outputs and on "success" success: function (data) { console.log(data); $( "#gridjs_table" ).load(window.location.href + &...
Bob D. Builder's user avatar
0 votes
1 answer
911 views

gridjs - how to load from HTML

I have an existing HTML table. I'd like a thin JS library to add simple search and sorting. GridJS looks promising, but I don't understand the docs for loading from HTML. For example, I'm unable to ...
jds's user avatar
  • 7,960
0 votes
0 answers
259 views

react gridjs addEventListener to TD element triggers more than once

I am trying to render a table using gridjs under react and attach an eventListener to tables cells. My code is partially working, but when I click a given cell, I got repeated events, probably one for ...
mhanuel's user avatar
  • 75
1 vote
1 answer
1k views

How to custom GridJs pagination with supabase?

I'm software engineer in Cambodia. I want to custom Grid.js pagination with supanase, but I faced a problem. I don't know the solution because it's not in the documentation. I'm using Nuxt 3 Please ...
Tuong Mengleang's user avatar
1 vote
1 answer
203 views

Show Hide column and reorder GridJS

I configured Gridjs for datatables is there any solution/ option to show/hide column for the final user and also reorder the columns? Thanks Bye
solocla's user avatar
  • 11
0 votes
2 answers
1k views

How to add dark theme for `gridjs`

I am currently developing a single site that is in a dark theme and using gridjs to display data in a table. The problem is that the official settings are on the light theme and it seems that there is ...
Milovan Tomašević's user avatar
0 votes
1 answer
922 views

Triggering a sort on Grid.js programmatically

When I mount the GridJS component and load its data, how can I programmatically trigger the default sort on load? What methods I should call? I am using gridjs-svelte, but that really does not matter ...
Mikko Ohtamaa's user avatar
0 votes
0 answers
503 views

react-dom.development.js:26091 Uncaught (in promise) Error: Target container is not a DOM element. at Object.render Using gridjs-react

I am developing an app with React and I use gridjs-react in it to display a list of affiliates, but I have this problem. Uncaught (in promise) Error: The target container is not a DOM element. at ...
Javier Valeriano's user avatar
1 vote
2 answers
8k views

Module not found: Error: Can't resolve existing module

I am importing two modules from the same package. import { RowSelection } from "gridjs/plugins/selection"; import { Grid } from "gridjs"; I can access RowSelection in VSCode (e.g. ...
dasd-431's user avatar
0 votes
1 answer
2k views

How can i set a button?

Im table using gridjs first time and im newbie at js items. How can i set a button? and how can i get link it? <script> new gridjs.Grid({ columns: ["#ID", &...
Yağız Savaş's user avatar
0 votes
0 answers
131 views

setState in React no working inside event gridjs

I am working with the gridjs library, which has a click event, when modifying a state it does not do so. any idea what it could be? componentDidMount() { this.consultaAPI(); localStorage....
Roman Gajardo Robles's user avatar
0 votes
1 answer
1k views

Gridjs pagination and sort with server side parameters

i use gridsjs sort and paginaton server side config, when i use for pagination its work perfectly, but for sorting the params not work properly like this http://scrum.test/api/customers&sort_by=id&...
Bagas Topati's user avatar
0 votes
0 answers
417 views

How to add filters (server-side) with GridJS

I want to know, how I can add filters in GridJS to filter data from the server, I have a dropdown list of filters above the table. I want that when someone clicks on a particular filter the table ...
Praveen Kumar's user avatar
0 votes
0 answers
190 views

How can i array to grid table in Django HTML?

I can send my model to the html page and bring it to the array structure, but I cannot integrate this array into the grid table. Does anyone know how I can do this? views.py def tests(request): ...
Elfo's user avatar
  • 117
1 vote
1 answer
748 views

Change the "No matching records found" message in Gridjs gridjs-react

I am using gridjs-react library and cannot customize the "No matching records found" message. I have been able to customize many parts of gridjs like this: style={{ td: { ...
programandoconro's user avatar
0 votes
1 answer
1k views

gridjs: server, how to map data for a simple json array

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: new gridjs....
Thilo Schwarz's user avatar
1 vote
0 answers
663 views

Creating a Filter Button in GridJS

I am new to gridjs and am struggling to find a way to add filter buttons. I am looking to add dropdown selectors or buttons that will filter out entire rows if a specified value is not in a specified ...
Brian's user avatar
  • 65
0 votes
1 answer
1k views

Toggle Select All not working for grid.js

I have a grid js defined as follows. I have select all check box on which I want to select/deselect all the rows. I am able to perform select all but deselect all does not work. Can anyone please help....
user1613722's user avatar
4 votes
0 answers
299 views

repopulating data in table #gridjs

so i know the updateConfig() / forceRender() methods in gridjs, but is it possible to workaround the 'redrawing table'? I'm looking for a function/method that repopulate tables data with persisting ...
Aesthetick's user avatar
1 vote
0 answers
436 views

Grid.js error seen in tests but not full application

I'm hoping you can help me figure out a puzzling error I see when testing. I should preface this question with the fact I'm not the worlds greatest js dev. I've created an application using the react ...
Mozo82's user avatar
  • 11
0 votes
1 answer
241 views

Workaround to XHR request and download prohibition

I have a weird situation: I get data from a Postgres database, and from that data, I create a table in a website, using Grid.js. Each line has a "Download" button, that takes 2 arguments ...
d_araujo's user avatar