Questions tagged [gridjs]
Grid.js is an open-source table library written in TypeScript
53
questions
0
votes
1
answer
42
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 ...
0
votes
0
answers
53
views
How can I add data-icon attribute dynamically with vanilla JS on the options of a select in a Grid JS table?
I added a dropdown select to a Grid Js table to filter some rows and it works just perfectly, but I want to add some icons to the option tag in that select dropdown using data-icon attribute like this:...
0
votes
0
answers
45
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 ...
1
vote
2
answers
116
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. ...
0
votes
1
answer
89
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", &...
0
votes
0
answers
47
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....
0
votes
0
answers
41
views
gridjs-vue can't render HTML
I'm using gridjs-vue 4.0.0 with vue 2.0.
For some reason I can't render a HTML in the content.
Here is my code:
import Grid from 'gridjs-vue'
export default {
components: {
...
0
votes
0
answers
65
views
Best Practice for creating custom grid columns
I am building my own cms and it is fun to do. But i wanna do it right so I can add multiple codes as libaries so they can also be used by the community.
I am in the process of creating a dynamic ...
0
votes
0
answers
56
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&...
0
votes
0
answers
33
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 ...
0
votes
0
answers
44
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):
...
0
votes
1
answer
70
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: {
...
0
votes
1
answer
221
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....
0
votes
0
answers
193
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 ...
0
votes
0
answers
91
views
How to put the Grid.js Pagination over the table
I want to put the pagination over the Grid.js table. How to replace the pagination feature over the table intead of below table in Grid.js.
0
votes
1
answer
135
views
Laravel and Gridjs
I want intergrate GridJS in my Project Laravel.
I created DataGrid
"'
<?php
namespace App\datagrid;
use App\Models\User;
use Illuminate\Database\Eloquent\Model;
use WdevRs\LaravelDatagrid\...
0
votes
1
answer
221
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....
2
votes
0
answers
119
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 ...
0
votes
0
answers
221
views
gridjs - How to run a function after the data that come from the server is display in the table?
This is my code today:
new gridjs.Grid({
columns: [
{
name: 'Ticker',
formatter: (cell) => gridjs.html(`<a class="offcanvasStockInfo" data-stock=&...
0
votes
0
answers
52
views
Is it possible to direct gridjs result to the console
I'm trying to figure out how I might see the resulting grid from gridjs in a terminal session. (I'm writing an automation script and need to be able to generate the table html dynamically for hundreds ...
0
votes
0
answers
150
views
Gridjs with typescript
We are using typescript in a project to compile to javascript, the only addition is jquery.
I've installed gridjs using npm and am trying to use it to generate a table with this example: https://daily....
1
vote
0
answers
121
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 ...
0
votes
1
answer
96
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 ...
2
votes
1
answer
2k
views
How do you add (or replace) the data in Grid.js once it has been rendered?
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 ...
0
votes
0
answers
79
views
grid.js displaying hierarchical data
Ive just started using grid.js and I need to display hierarchical data. For example, I have a list of addresses, each address can have one or more meters. So I want to be able to click a row and ...
0
votes
2
answers
222
views
How to add multiple objects in a cell?
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
{"results": [{&...
0
votes
1
answer
206
views
How to use Custom HTTP request and paginations, sort, search in Vue 2.x
I am an engineer who makes web systems in Tokyo.
I'm making a search system using Grid.js, but I faced a problem.
I don't know the solution because it's not in the documentation.
Since this system ...
1
vote
1
answer
457
views
How to correctly update (redraw) grid.js after resize
I've set up grid.js in Vue.
https://github.com/grid-js/gridjs
I have set, autoWidth: true and width: '100%' in the config.
The data grid resizes (is responsive) when I resized the window.
But, if the ...
1
vote
1
answer
132
views
Reset Page On Update
I don't want reset page on update. I don't want to reset the page on update. Specifically when using forceUpdate() , I want my grid to only update the data at the current pagination.
pagination: {
...
0
votes
0
answers
274
views
Have in Grid.js a option of "inline edit" cell values?
Have in Grid.js an option of "inline edit" cell values or possibility/plugin to implements them?
Like this:
http://tabulator.info/examples/4.9#editable
https://editor.datatables.net/
1
vote
0
answers
197
views
How to change Grid.js state from the plugin?
How can I change state of the Grid.js component from the plugin context?
I'm trying to implement a visual configurator for the pagination.limit prop (https://gridjs.io/docs/config/pagination):
import {...
1
vote
0
answers
283
views
add rowId for row in gridjs
I am working with the grid.js library but when adding data to the table I don't see rowId appear, so I can't process the color change for the row and get the row's data by clicking on the "bi-...
0
votes
1
answer
273
views
How To Style GridJS In VueJS
I'm using Vue V.3 for my project and I'm using Grid.JS for my tables. Is there any way to style the table elements (i.e. th, tr, etc) of Grid? I already checked the Grid.JS documentation for Vue but ...
-1
votes
1
answer
118
views
how extract an object from an array where all of the keys are the same
I have been stuck on this for a while. I have an array of object where the key is the same for all of the objects (see below). I am trying to extract the data from the first object in the array [0]. ...
0
votes
1
answer
661
views
How to extract data of cell clicked grid.js
I am using Grid.js to render a table in react. I need to extract the data in one of the cells. When I map the args, I get two results back....a MouseEvent and 'n' which contains the data that I need. ...
2
votes
1
answer
288
views
Is there a default sort flag for gridjs?
I'm trying to find out if there's a default sort column setting for GridJS.
https://gridjs.io/docs/examples/sorting
Looking at this - and trying to understand the code - I don't see anything obvious.
...
0
votes
1
answer
152
views
How to use a react-router Link or history.push within a gridjs cell
I am using react router and gridjs and want to display a link within a cell that the user can click to get to a detail page.
As a first approach I tried using a column formatter:
import { Link } from &...
0
votes
1
answer
634
views
Programatically search gridjs table (with javascript)
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 ...
1
vote
1
answer
1k
views
How to show row index in grid js using react js
currently creating my datatable using grid.js in reactjs.
This is my code
<Grid
data={data.filter(e => e.status != 0)}
columns={[
{
id: 'url',
name: 'url',...
1
vote
0
answers
431
views
How to use Grid.js with data being updated every second
setInterval(() => {
// lets update the config
grid.updateConfig({
server: {
url: document.location.href + 'api.json/',
then: data => data.map(obj => {
return [obj....
5
votes
2
answers
596
views
Using ref to find a nested element
I'm using the gridjs-react library to create a table as follows:
<Grid
columns={['Name', 'Email']}
data={[
['John', 'john@example.com'],
['Mike', 'mike@gmail.com']
]}
ref={tableRef}
...
5
votes
1
answer
269
views
Customize tablehead of react-gridjs
Intead of using the default search bar, I'd like to customize it as follows:
Add a button in front of the search bar.
Use an icon (<i className="fa fa-search"/>) in the search ...
1
vote
1
answer
220
views
Gridjs-react: Sort by column having a React Component
I'm using gridjs-react to create a custom grid as follows:
import { Grid, _ } from 'gridjs-react';
const tableData = [
['John', 12345, _(<input type="checkbox" name="ch" ...
0
votes
2
answers
102
views
Adding border style to <tr> not wokring
Is this feature available with gridjs or I am not putting it in right place as expected by Api?
0
votes
1
answer
160
views
Column not showing data using Gridjs while integrating with React js
currently I am using Gridjs to display my table in my Reactjs application.
This is the code, the Name, and Email is displaying correctly, but the created_at is not, giving me empty. How can I display ...
1
vote
1
answer
714
views
Grid.js Responsive table with large size
What is the best method to rendering a grid.js table in resizable container.
If I don't set the height configuration object of the grid, the table size exceed his container and i can't have access to ...
2
votes
2
answers
730
views
(Grid js) I want the search button to be on the right side and the add button on the left, what do I do?
(Grid js) I want the search button to be on the right side and the add button on the left, what do I do?
new gridjs.Grid({
columns: ['Name', 'Email', 'Phone Number'],
search: true,
...
0
votes
2
answers
307
views
What happened to this error? I changed the class name of the table, but I cannot change it and this error occurs?
Help Me please !! What happened to this error? I changed the class name of the table, but I cannot change it and this error occurs?
new gridjs.Grid({
columns: [{ name: 'ID', width: '60px' },
...
1
vote
1
answer
242
views
gridjs width own Table and Jquery
i want to use gridjs width my own Table.
What i have is:
<script>
$("table#myTable").Grid
(
({
pagination: true,
...
2
votes
1
answer
381
views
How to import grid.js html function for using formatter in Vue
I am using the gridjs-vue wrapper to use grid.js with Vue. I'd like to use the formatter feature of gridjs, but it requires the html function. How do I import the html function into my component? If I ...