Describe the bug
gridjs cannot be installed using Node v13.x

To Reproduce
Steps to reproduce the behavior:

1. Use Node v13
2. Try to install gridjs

Expected behavior
You should be able to install it with any version of Node.js

Screenshots

Additional context
Windows 10 and Yarn v1

Your package.json's engines key is causing this:

"engines": {
  "node": ">= 12.13 <13"
},

Describe the bug
Grid.js gives an error:
gridjs.production.min.js

Uncaught (in promise) TypeError: Cannot read property 'base' of undefined
at e.adjustWidth (gridjs.production.min.js?v=version:15)
at e. (gridjs.production.min.js?v=version:15)
at gridjs.production.min.js?v=version:15
at Object.next (gridjs.production.min.js?v=version:15)
at s (gridjs.production.min.js?v=version:15)

To Reproduce
Steps to reproduce the behavior:

1. Go to
   https://netcoreblockly.herokuapp.com/blockly.html
2. See console in brower
3. See error

Expected behavior
I do not know why happens. Does not affect functionality.

Desktop (please complete the following information):

• Browser Chrome

Additional context
Source for HTML at https://github.com/ignatandrei/netcoreblockly.

Hello, I use GridJs with a browser, you know <script> ..

I'm currently having problems when I want to use serverside with pagination, I get an undefined html error ... is this really a bug? because the html function is defined in the gridjs.development.js file (https://unpkg.com/[email protected]/dist/gridjs.development.js)

The following is the screenshot:

thank you..

Is your feature request related to a problem? Please describe.
No it is not related to problem.

Describe the solution you'd like
I would like to use this framework on ESP32 microcontroller which will have built in server serving home automation sensor data from json file. It would be nice feature(optional) to create lightweight multi line charts from these data in few selected cells of the row to be displayed with the table in a column like you show image in this example https://gridjs.io/docs/examples/server-side-sort .

Describe alternatives you've considered
I have looked into http://smoothiecharts.org/ & https://pivottable.js.org/examples/montreal_2014.html.

Additional context
Thanks.

Is your feature request related to a problem? Please describe.
Thanks to the new html() helper used in the formater we can easily display html in cells. But it is stil not the case when using from

Describe the solution you'd like
The idea is to automatically setup a html formater when from is used.

Describe alternatives you've considered
I've tried to used from with a custom columns definition, it does not seem to work.

Is your feature request related to a problem? Please describe.
Looking for a way to add an onclick listener to a row or cell that has the context for the row. Specifically looking for a way to use the cell or row to pop up a modal to to make a http get request for more details or http put request to update the backend and then update the table.

Describe the solution you'd like
Ability to add an "onclick" listener to the row or specific row/column that would append the row's context to the onclick event.

Describe alternatives you've considered
I've used material-ui datatables that has this functionality but I really like the gridjs style and functionality.

Additional context
Add any other context or screenshots about the feature request here.

how to import html module inside script tag in plain html

i am doing this, error: cannot use import statement outside module

$(element).gridjs({...});

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
add a mutiple theme to switch base on table class

Would love the ability to hide/show columns dynamically.

here is my code:

search: {
server: {
url: (prev, keyword) => ${prev}?search=${keyword}
},
placeholder: "Cari"
},

It feels to me like Gridjs has a lack of documentation about extensibility. Could you describe how Gridjs is extensible, please?

This is more of a question. Do you support server side paging without knowing total records upfront? We'll know if there is a next page from current page though.

For eg. when you have large number of records, its expensive to compute total records however you'll only if there is a next page on the server side for eg. Slice in spring framework

if supported show example

Adding images or any html inside cells would be very useful.

There is no problem with the actual implementation. Just that I think it is most common to find array of objects as data sources.

Maybe the solution would be that the grid accepted both ways: array of arrays or array of objects.

Of course it is easy to convert from your array of objects to array of arrays; but it would be easy if the grid accepted both ways as posible data sources.

Many thanks ...

Describe the bug
First off, thanks for making gridjs. Really impressed with how friendly the APIs are.
When working in react hot-reload environment, we're hit with an uncaught error when changes are made:

Uncaught TypeError: Cannot read property 'filter' of undefined

Minified + beautified code reference:

n.prototype.unregister = function(t) {
    if (t) {
        var e = this._steps.get(t.type);
        this._steps.set(t.type, e.filter((function(e) { <-------- this line, in `e.filter` `e` is `undefined`
            return e != t
        }
        ))),
        this.emit("updated", t)
    }
}

To Reproduce
https://codesandbox.io/s/awesome-rosalind-ku25j?file=/src/App.js

1. On the right is the preview, select "courses"
2. Look for data (line 38) and modify any of title values within it to something else, ex Test4 -> Test5 without saving it, just changing a character will trigger the error

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Running npm i gridjs seems to install a different package than this one so unfortunately I'm unable to play around with this at the moment.

This is what appears to get installed instead: https://github.com/mafintosh/gridjs It seems like there may be some sort of naming collision on npm.

Out of the box to have checkboxes

so i click one checkbox get an event back like checked when i click check all maybe allChecked and uncheck

nice work sofar i wish i could add this stuff but i know only vue :P

Is your feature request related to a problem? Please describe.
Tools for online pivot tables are pretty bad. Tableau/PowerBI don't have good ways to do good pivots online.

Describe the solution you'd like
Similar to an Excel pivot tables, including subtotals. It should be easy to use and deploy in any micro framework (i.e. flask). It should also offer good options for conditional formatting (i.e. heatmaps).

Describe alternatives you've considered

Tableau is what I am using since 3 years, I am getting lots of negative feedback from users as Tableau is 1) not straightforward; 2) not clean html (i.e. can't copy data easily from Tableau); 3) tends to be slow even with fast db's.

Describe the bug
I rolled my own react app from scratch. I'm using parcel for bundling et al.
after installing grid JS, the result looks un-styled.

I'd expect that it would be styled. poked around in the dist folder and importing this seemed to correct it.

import "gridjs/dist/theme/mermaid.min.css";

probably just need to update the docs for react or add an easier way to grab this asset (maybe some lib folder?)

To Reproduce
Steps to reproduce the behavior:

1. yarn add gridjs gridjs-react
2. import { Grid } from 'gridjs-react';
3. make some simple grid, copy paste from the example, say.
4. notice grid unstyled.

Expected behavior
Grid should be styled as per the examples in the documentation

Screenshots

Desktop (please complete the following information):

• OS: mac
• Browser chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version 83

Additional context
Add any other context about the problem here.

Something like Typedoc can be used to generated MDX based docs that is compatible with Docusarus v2.

Is your feature request related to a problem? Please describe.
A feature to add support for advanced layout options such as multi-line, fixed headers, fixed first column, adjustable column/row height and width. To consider this library for larger projects, mainly involving dashboarding, these features are very important.

Describe alternatives you've considered
The Element UI table are a good, but not sufficient example

feature

I'd like a way to load a CSV or TSV file as the data of the table. This is a common format for data exchange.

approach

The way it would be use could be a bit like server property but instead of expecting json data, expect comma/tab separated values.

alternatives

D3js propose d3.csv/d3.tsv functions which allow to load CSV/TSV file. It can be used to transform such format to JSON format on the fly.

Hi folks, thank you for your great work! I use gridjs instead of bootstrap table and yours is sure better, lighter and more flexible.

But there is a bug. I get "TypeError: this.config is undefined" at grid.ts:81:9 when I use forceRender() method.

I have a function, that dynamically updates my grid with server side data:

// blah-blah...
fetch(url, {body, method, headers})
        .then(res=> res.status == 200 && res.json() || Promise.reject(res.status))
        .then(obj=> {
            window.location.hash = `#/${relation}`
            window.jQuery(`#${id}`).modal('hide')
            grid.forceRender()
        })
        //.catch(err => alert(err))

Something strange happens here: when I call fetch with POST method (adding a row), grid.forceRender() works fine as many times as I call it. But when I use PUT or DELETE methods - the error occurs. There is no network errors. Only "TypeError: this.config is undefined".

I get the error on Firefox browser, Linux OS. Before writing this message I have made yarn upgrade gridjs, but the bug is still here.

Could you explain or fix it?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
HTML code passed as a result value from JSON query, yields escaped HTML code.

JSON:

[
  [
    "fcfc73437f8182ef", 
    "2020-06-03", 
    "<img src='static/img/scans/5ed81d101351c96ec6632015.png' style='width:200px;' />"
  ], 
  ...
]

JS:

new gridjs.Grid({
  columns: ["ID", "Date", "Image"],
  search: true,
  sort: true,
  pagination: {
    enabled: true,
    limit: 10,
    summary: true,
    prevButton: true,
    nextButton: true,
  },
  server: {
    url: '/examplesJSON',
    then: data => 
      data.map(
        example => [
          example[0],
          example[1],
          example[2]
        ]
      )
  }
}).render(document.getElementById("examplesWrapper"));

Rendered, mapped HTML from JSON request:

<td class="gridjs gridjs-td">
&lt;img src='static/img/scans/5ed81d251351c96ec6632017.png' style='width:200px;' /&gt;
</td>

Describe the solution you'd like
A clear and concise description of what you want to happen.
A method to not make the strings "safe" so they can be passed in correctly rendered. Something akin in function to Jinja's | safe modifier?

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
I've tried using backslashes

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
Data for the table is returned via JSON from server-side and contains one of the columns with the following data:
"options: {
viber: false,
whatsapp: false
}"

Then this information is used in custom "formatter" to produce column text.
Rendering of the page works without issues, but enabling sorting ("sort: true") and then entering anything in the search box results in Console error
"[Grid.js] [ERROR]: TypeError: Cannot read property 'content' of undefined"

To Reproduce
Render the Grid with following data and enable sorting.

Expected behavior
Sorting works as expected ignoring such boolean fields.

Hello,
how to use search and pagination server side in the same condition?

if you now use search & pagination serverside together, you will find it strange when you search and use pagination together, like this..

the code:
pagination: { limit: 15, server: { url: (prev, page, limit) =>${prev}?page=${page}} }, search: { server: { url: (prev, keyword) => keyword ?${prev}?q=${keyword}: prev, } },
how to solve this?

thank you

I think the support for server-side search is essential.
I would suggest to add an attribute search for server options.

const grid = new Grid({
  columns: ['Title', 'Director', 'Producer'],
  server: {
    url: 'https://swapi.dev/api/films/'',
    search: search => 'https://swapi.dev/api/films?search=' + search,
    then: data => data.results.map(movie => [movie.title, movie.director, movie.producer])
  } 
});

Is your feature request related to a problem? Please describe.
Sorting needs to sort the entire dataset, not just what's in view.

Describe the solution you'd like
Ideally you should make the api available to the custom functions:

async data () { 
  const sorting = this.getSortingParameters()
  await axios.get('things', { params: { sorting } )
},
async sort () {
  // do sorting things
 return { ...someKindOfSortingParameters }
}

..
Additional context
This will be needed if you want grid.js to have any serious traction in admin dashboards (create update delete)

Is your feature request related to a problem? Please describe.
The dataset is too big to be fetched at once.

Describe the solution you'd like
It would be nice to have a defined API for remote pagination (probably for remote searching as well since the search would have to be done by the server).

Describe alternatives you've considered
Implement the pagination by myself but it would lose the point of this library having everything done.

Additional context
N/A

https://observablehq.com/@simonw/grid-js-with-datasette

Describe the bug
I'm trying to use html() function to set html inside a cell, but the console says it is not defined,

To Reproduce
Steps to reproduce the behavior:
add unpkg link and add a script:

`

how to make columns and their contents without having to retrieve data from serverside like a datatables? if it's in Jquery's datatables,
I just need to write code

{ data: 'No', render: function(data, type, row, meta) {   return meta.row + 1;   } }

what if on gridJS?

I am putting together a table which contains buttons in the header. Right now, there appears to be no clear way to add a button in the header th component. It is possible to add such a button into individual cells using the formatter function however.

It would be great if it would be possible to add custom html / cell formatting to the header of a table. Here is an example of how this could look like:

It would be great to have access to the index number of a row when that row is clicked. This would help me with my project for sure. 🙂

It would be nice to see an 'original index' value that returns the same original index even after sorting/searching the table. It would also be nice to have a 'current index' value that returns a different index when the table is sorted/searched.

Thanks for that great project! 👍🏻

Is your feature request related to a problem? Please describe.
I would like to be able to apply custom styles to elements = table, rows, headers etc

Describe the solution you'd like
For now just specifying extra classes to be appended to the default would be enough

Describe alternatives you've considered
I can override the default style, but that's cumbersome when there's a CSS framework that applies custom complex styling by applying just one class to root element.

Additional context
none

Describe the bug
With the new release that supports rendering html content, search does not work on cells that are wrapped in html. For example search works with this:

data: documents.map(doc => [
    doc.title,
    doc.tags.map(tag => tag.name).join(', '), 
    ''
]),

But not with this:

data: documents.map(doc => [
    html(`<button class='not-button no-underline left title-el' id=${doc.id}>${doc.title}</span>`), 
    doc.tags.map(tag => tag.name).join(', '), 
    ''
 ]),

To Reproduce
Steps to reproduce the behavior:
Create a cell using the html-render functionality
Try searching based on data in that cell.

Expected behavior
Search should work as it does when searching on non-html-rendered cells.

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
If possible, it would be nice to be able to load a couple extra pages on either side of the current page (precaching?). That way the user won't have to wait for the table to load precached items if they are slowly just going to next and previous pages. They would still have to wait if they filtered or jumped to the end of the list, of course. I'd imagine a parameter called precachedPages that would load that number of pages ahead and behind the current page.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Cool project! It would be really useful if you could specify a custom sort function, similar to the compareFunction parameter of Array.sort.

function compareNumbers(a, b) {
    return a - b;
}

const grid = new Grid({
  columns: [
    {name: 'Name'},
    {name: 'Email'},
    {name: 'Salary', sort: true, compareFunction: compareNumbers},
  ],
  data: [
    ['John', '[email protected]', '4000'],
    ['Mark', '[email protected]',  '5000'],
    ['Jane', '[email protected]',   '45000'],
  ]
});

Otherwise things like numbers and dates won't sort properly.

Pipeline steps (processors) are pure functions and they can be executed using Web Worker API. This enables us to filter, sort or page the data in another thread and just use the main thread to render the elements.

Currently, my button to add a record is 'floating' above or below the grid. I think it would be nice to have one as shown in this image:

I would need to create my own dialog/page for the actual form and submit it to my server.