Hello folks :wave:<p>I’m Afshin, the creator of Grid.js.<p>Grid.js is an open-source table library written in TypeScript and published under MIT license.<p>My goal is to develop a framework agnostic table library that:<p>- Works everywhere. You don’t need a specific framework to use Grid.js<p>- Lightweight and easy to use<p>- Fully documented and tested<p>- Developer friendly. Grid.js is written in TypeScript!
Supports all modern web browsers<p>Please take a look at the examples (<a href="https://gridjs.io/docs/examples/hello-world" rel="nofollow">https://gridjs.io/docs/examples/hello-world</a>) section and let us know if you have any suggestions.<p>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 <a href="https://gridjs.io/docs/philosophy" rel="nofollow">https://gridjs.io/docs/philosophy</a>)<p>Please let me know if you have any suggestions or comments. Happy hacking! :computer:
Good effort! I'm not sure how 'advanced' it is though. I'd even go as far as call it 'simple'?<p>E.g. the following features would be required to make it advanced (list not complete):<p>- Export data (csv)<p>- Align columns based on their content<p>- Tree data (parent/child rows)<p>- Total rows<p>- Formatting applied based on data type (currency, numerical etc.)<p>- Reordering columns<p>- Resizing columns<p>- Hiding columns<p>- Optional filter field for every column<p>- Conditional formatting<p>- Tripple Sorting & Multiple sorting (sort by more than 1 column at a time)<p>- ... more<p>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.<p><a href="https://material-table.com/" rel="nofollow">https://material-table.com/</a>
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.<p>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.<p>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!
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.<p>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.
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?
<a href="https://codemadness.org/datatable-example.html" rel="nofollow">https://codemadness.org/datatable-example.html</a> is the lightest version of sortable table in JS i've seen.<p><a href="https://git.codemadness.org/jscancer/files.html" rel="nofollow">https://git.codemadness.org/jscancer/files.html</a> for more goodness
This looks nice but much less configurable than ag-grid.<p>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.<p>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.<p>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!<p>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.<p>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 <a href="https://www.npmjs.com/package/react-data-table-component" rel="nofollow">https://www.npmjs.com/package/react-data-table-component</a>
but this one looks cool too. Maybe a dense mode?
FYI on my small mobile screen (iPhone SE) the demo:<p>- 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.<p>- 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 <a href="https://react-table.js.org/" rel="nofollow">https://react-table.js.org/</a>
What's the "Advanced" part in this ? Vue/quasar tables already provide extensive functionality and I am sure there are react and angular alternatives.<p>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.<p>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 ?