grid-js / gridjs Goto Github PK
View Code? Open in Web Editor NEWAdvanced table plugin
Home Page: https://gridjs.io
License: MIT License
Advanced table plugin
Home Page: https://gridjs.io
License: MIT License
It feels to me like Gridjs has a lack of documentation about extensibility. Could you describe how Gridjs is extensible, please?
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.
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.
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
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.
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)
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?
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:
`
<script src="https://unpkg.com/gridjs/dist/gridjs.development.js"></script> <script> new gridjs.Grid({ sort: true, search: true, columns: [{ name: 'Name', formatter: (cell) => html(`${cell}`) }, "Email", "Phone Number"], data: [ ["John", "[email protected]", "(353) 01 222 3333"], ["Mark", "[email protected]", "(01) 22 888 4444"], ["Eoin", "[email protected]", "0097 22 654 00033"], ["Sarah", "[email protected]", "+322 876 1233"], ["Afshin", "[email protected]", "(353) 22 87 8356"] ] }).render(document.getElementById("gridTable")); ` **console will report:** Uncaught (in promise) ReferenceError: html is not defined **Expected behavior** html function should be available. **Desktop (please complete the following information):** - OS: win10 - Browser chromeIs 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.
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.
Adding images or any html inside cells would be very useful.
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.
if supported show example
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 ...
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">
<img src='static/img/scans/5ed81d251351c96ec6632017.png' style='width:200px;' />
</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.
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
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
$(element).gridjs({...});
Describe the bug
gridjs
cannot be installed using Node v13.x
To Reproduce
Steps to reproduce the behavior:
Expected behavior
You should be able to install it with any version of Node.js
Additional context
Windows 10 and Yarn v1
Your package.json
's engines
key is causing this:
"engines": {
"node": ">= 12.13 <13"
},
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?
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.
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
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 errorDescribe 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:
yarn add gridjs gridjs-react
import { Grid } from 'gridjs-react';
Expected behavior
Grid should be styled as per the examples in the documentation
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
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.
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.
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.
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
how to import html module inside script tag in plain html
<script> import { Grid, html } from "gridjs"; </script>i am doing this, error: cannot use import statement outside module
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
Something like Typedoc can be used to generated MDX based docs that is compatible with Docusarus v2.
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
.
Would love the ability to hide/show columns dynamically.
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.
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
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.
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:
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.
The way it would be use could be a bit like server
property but instead of expecting json data, expect comma/tab separated values.
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.
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.
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
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:
Expected behavior
I do not know why happens. Does not affect functionality.
Desktop (please complete the following information):
Additional context
Source for HTML at https://github.com/ignatandrei/netcoreblockly.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.