from Hacker News

Show HN: Grid.js – Advanced table library that works everywhere

by afshinmeh on 6/4/20, 6:33 PM with 132 comments

  • by afshinmeh on 6/4/20, 7:31 PM

    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:

  • by Bishonen88 on 6/4/20, 9:50 PM

    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.

    https://material-table.com/

  • by bubbab on 6/4/20, 7:54 PM

    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!

  • by danseagrave on 6/4/20, 8:45 PM

    Has anyone tried Tabulator[1]?

    [1] http://www.tabulator.info/

  • by Eduard on 6/4/20, 9:45 PM

    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.

  • by rootcage on 6/4/20, 7:42 PM

    Out of curiosity how is this better than current Grid/Table implementations?

  • by boromi on 6/4/20, 8:59 PM

    A similar product is https://datatables.net/

  • by triceratops on 6/5/20, 6:58 AM

    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?

  • by rkagerer on 6/5/20, 2:11 AM

    This looks really cool although I find it disheartening that we need to resort to JavaScript simply to construct a decent table.

  • by hendry on 6/6/20, 12:43 PM

    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

  • by sliptype on 6/4/20, 8:43 PM

    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.

  • by guggle on 6/4/20, 8:17 PM

    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.

  • by silviogutierrez on 6/4/20, 8:21 PM

    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.

  • by byteshock on 6/5/20, 3:11 PM

    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.

  • by mason55 on 6/4/20, 9:37 PM

    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?

  • by fedd on 6/6/20, 9:53 PM

    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

  • by ggmartins on 6/4/20, 11:10 PM

    I like https://www.npmjs.com/package/react-data-table-component but this one looks cool too. Maybe a dense mode?

  • by OJFord on 6/4/20, 11:03 PM

    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'

  • by yingw787 on 6/4/20, 11:15 PM

    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!!

  • by rafaelturk on 6/5/20, 12:41 PM

    Congrats! Curious why you haven't considered https://react-table.js.org/

  • by guruparan18 on 6/5/20, 2:15 AM

    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?

  • by ng12 on 6/4/20, 7:44 PM

    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.

  • by codegladiator on 6/4/20, 8:46 PM

    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 ?

  • by babaganoosh89 on 6/4/20, 8:29 PM

    I'd suggest doing the up/down arrows in css instead of images, the images look a bit blurry on retina screens

  • by wnevets on 6/4/20, 8:01 PM

    On a related note, I glad to see unpkg.com offically supported. Being able to avoid npm install is just nice sometimes.

  • by JSavageOne on 6/5/20, 5:24 AM

    How does this compare to competitors like Ag-Grid?

    One simple feature I see lacking in the ability is the ability to resize columns

  • by LukaszWiktor on 6/4/20, 7:54 PM

    Good job! Looks great.

    What about performance? Have you tested how many rows can Gird.js handle without a noticable lag?

  • by kangaroozach on 6/5/20, 5:40 AM

    Anyone have thoughts on how to support the following in ReactJS

    -Sortable columns

    -Multi-select filters in columns

    -expandable rows

  • by huhtenberg on 6/5/20, 7:56 AM

    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'] ]
    });

  • by moralestapia on 6/5/20, 12:05 AM

    Does anyone know of something like this but with editable cells?

  • by Phrodo_00 on 6/5/20, 12:33 AM

    Tried to run in my atari 800XL - didn't work :P

  • by seastonATccs on 6/4/20, 9:01 PM

    What benefits does it have over mat-table?

  • by colesantiago on 6/4/20, 8:28 PM

    I disabled JavaScript and it doesn't load the table.

  • by docuru on 6/4/20, 9:42 PM

    Are we just buy a domain for a library now?

  • by beprogrammed on 6/5/20, 2:20 AM

    I like to turn JavaScript off for these sites

  • by Sembiance on 6/4/20, 7:34 PM

    I thought this was about CSS Grid, but nope, nothing at all to do with that.