Good effort! I'm not sure how 'advanced' it is though. I'd even go as far as call it 'simple'?
E.g. the following features would be required to make it advanced (list not complete):
- Export data (csv)
- Align columns based on their content
- Tree data (parent/child rows)
- Total rows
- Formatting applied based on data type (currency, numerical etc.)
- Reordering columns
- Resizing columns
- Hiding columns
- Optional filter field for every column
- Conditional formatting
- Tripple Sorting & Multiple sorting (sort by more than 1 column at a time)
- ... more
In the react world, I found this to be a good foundation for an 'advanced' table. Since it's rather inconsistently developed, I ended up forking it for myself and working on my own copy, removing unneeded elements and enhancing with everything else I do need.
How accessible is Grid.js? The main differentiator between table libraries for me these days is accessibility. Many libraries and frameworks out there do it poorly. The better ones are often tied to company-specific frameworks.
From playing around a bit, I've at least noticed that sortable headers have no focus indicator, the "sort column ascending" text gets included in the column's accessible name, and un-sortable column headers are read as clickable by screen readers.
I would LOVE a framework-agnostic table library that's both lightweight and fully accessible. If there's a chance for Grid.js to take this in its philosophy, I would be all in!
Has anyone tried Tabulator[1]?
I'd say the claim "works everywhere" does not consider small screens. I had a look at the examples with Android Chrome in portrait viewport, and cell content gets either cut off with ellipses on overflow, or breaks long words such as email addresses unintelligibly over several lines.
In my opinion, scrollable-by-touch tables such as Bootstrap 's "responsive tables" fix these issues. Add "scroll for more" shadows for even better UX.
Out of curiosity how is this better than current Grid/Table implementations?
A similar product is https://datatables.net/
Does anyone know why HTML tables can't natively support a lot of common table functionality? Lazy rendering, fixed column headers, sorting and so on? Are there any proposals to add all this natively?
This looks really cool although I find it disheartening that we need to resort to JavaScript simply to construct a decent table.
https://codemadness.org/datatable-example.html is the lightest version of sortable table in JS i've seen.
https://git.codemadness.org/jscancer/files.html for more goodness
This looks nice but much less configurable than ag-grid.
I've worked on projects that had very intense excel-level requirements for their data grids and ag-grid was a dream.
Good, I like framework agnostic components. I've been playing with two other libraries recently: Dropzone js and Sortable js. Grid js looks useful too.
Looks great! Any plans to support SSR in say, the React use case? useEffect won't run on the server and obviously you don't have the DOM.
I'd love to use this for the table to come rendered from the server then hydrate on the frontend and enable AJAX pagination, etc.
Completely understand if you can't, after all, you'd likely need to more tightly integrate with ReactDOMServer.
Looks awesome. We just tested vue-tables-2 yesterday but the lack of customization is making it hard to implement. This looks very promising, I’ll be taking a look again tomorrow!
Do you plan on releasing special themes or options for css frameworks like bootstrap 4? I had a quick look on my phone so I apologize if this is already available.
One of the issues we find is that as the number of rows/columns in a table grows, the performance of native browser tables just craters and you have to fallback to your own rendering engine using <canvas> elements.
Have you pushed the rendering performance at all to see how far you can get without scrolling getting painful or seeing tearing artifacts?
Hey, nice grid. Please consider multiple column sort / grouping. It will suddenly make it like analytics tool... And if add some statistical functions... Maybe too much for client side, but who knows
I like https://www.npmjs.com/package/react-data-table-component but this one looks cool too. Maybe a dense mode?
FYI on my small mobile screen (iPhone SE) the demo:
- ellipsis (good there is one) breaks between second and third dot. I think the easiest fix for that is to use an actual ellipsis character.
- break between page '3' and 'next'
I am so glad I put off making the frontend for my project. It's literally all tables, and I didn't like how DataTables functioned. So glad you made this and looking forward to trying it out!!
Congrats! Curious why you haven't considered https://react-table.js.org/
I am trying to use linking in one of the columns. Looks like using links breaks the table. Any idea if linking column data is supported out of box?
Do the cell values have to be primitives? Embedding pure JS inside a React app is easy but using React inside pure JS is usually where the trouble is.
What's the "Advanced" part in this ? Vue/quasar tables already provide extensive functionality and I am sure there are react and angular alternatives.
I don't think there is a need for a library to work across vue/react/angular at the same time because no single person is going to use those in a single project.
I appreciate the project since I am frequently looking for js grid implementations but what the differentiator here ? Is it performance or styling or flexibility or just variety of frameworks ?
I'd suggest doing the up/down arrows in css instead of images, the images look a bit blurry on retina screens
On a related note, I glad to see unpkg.com offically supported. Being able to avoid npm install is just nice sometimes.
How does this compare to competitors like Ag-Grid?
One simple feature I see lacking in the ability is the ability to resize columns
Good job! Looks great.
What about performance? Have you tested how many rows can Gird.js handle without a noticable lag?
Anyone have thoughts on how to support the following in ReactJS
-Sortable columns
-Multi-select filters in columns
-expandable rows
This doesn't render well (it's a malformed input, but still) -
const grid = new Grid({
columns: ['A', 'B', 'C'],
data: [ ['1', '2', null, '(353) 01 222 3333'] ]
});
Does anyone know of something like this but with editable cells?
Tried to run in my atari 800XL - didn't work :P
What benefits does it have over mat-table?
I disabled JavaScript and it doesn't load the table.
Just wanted to add, tabulator is really good too and maintainer is very helpful, active; good docs. http://tabulator.info/
Are we just buy a domain for a library now?
I like to turn JavaScript off for these sites
I thought this was about CSS Grid, but nope, nothing at all to do with that.
Hello folks :wave:
I’m Afshin, the creator of Grid.js.
Grid.js is an open-source table library written in TypeScript and published under MIT license.
My goal is to develop a framework agnostic table library that:
- Works everywhere. You don’t need a specific framework to use Grid.js
- Lightweight and easy to use
- Fully documented and tested
- Developer friendly. Grid.js is written in TypeScript! Supports all modern web browsers
Please take a look at the examples (https://gridjs.io/docs/examples/hello-world) section and let us know if you have any suggestions.
Although Grid.js is currently designed to work with web-browsers, I’m actively thinking and working on adding other integrations like React Native (see https://gridjs.io/docs/philosophy)
Please let me know if you have any suggestions or comments. Happy hacking! :computer: