[HN Gopher] Show HN: Grid.js - Advanced table library that works...
___________________________________________________________________
Show HN: Grid.js - Advanced table library that works everywhere
Author : afshinmeh
Score : 171 points
Date : 2020-06-04 18:33 UTC (4 hours ago)
(HTM) web link (gridjs.io)
(TXT) w3m dump (gridjs.io)
| boromi wrote:
| A similar product is https://datatables.net/
| whycombagator wrote:
| Unsure what differs between the two functionally, but it
| appears that library is ~3x the size for js+css (~12kb vs
| ~30kb) compared to Grid.js. It looks like it might use jQuery
| too? Or at least, the CDN is "jquery.dataTables.min.js"
| joaodlf wrote:
| datatables uses jquery, though.
| docuru wrote:
| Are we just buy a domain for a library now?
| seastonATccs wrote:
| What benefits does it have over mat-table?
| guggle wrote:
| 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.
| Eduard wrote:
| 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.
| LukaszWiktor wrote:
| Good job! Looks great.
|
| What about performance? Have you tested how many rows can Gird.js
| handle without a noticable lag?
| afshinmeh wrote:
| Thank you!
|
| With Grid.js you will be able to sort, search or process data
| in a separate thread (Web Worker) and then pass the results to
| the main thread to render.
|
| I'm also thinking about lazy-loading the table rows. Both the
| Web Worker bit and lazy-loading will be added in a week or two.
| sliptype wrote:
| 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.
| afshinmeh wrote:
| Agreed. This is the first version of the library though. I will
| definitely add more core plugins and configurations soon. Stay
| tuned!
| bubbab wrote:
| 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!
| ipsum2 wrote:
| It seems like you know a lot about accessibility, have you
| considered contributing to the library?
| nohuhu wrote:
| > The better ones are often tied to company-specific
| frameworks.
|
| That is because to implement accessibility in a grid/tree
| widget to a meaningful level, you need _a lot_ of underlying
| code. Even in modern browsers. Source: implemented
| accessibility in Ext JS framework.
|
| One of the most often asked questions from users of Ext JS was:
| hey, can we have the Grid widget without all the bloat? Sure,
| and ~95% of the framework exists so that the Grid can have its
| features and work reliably across all the browsers. You can
| probably do without the rest 5%, no biggie.
| afshinmeh wrote:
| That makes sense. thanks for the feedback.
|
| I just created a ticket to work on this aspect of the library
| soon. I'd appreciate if you add your comments to
| https://github.com/grid-js/gridjs/issues/25 if you think there
| is any specific components that needs immediate improvement.
| afshinmeh wrote:
| 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:
| simonw wrote:
| I'm playing around with it in an Observable notebook here:
| https://observablehq.com/@simonw/grid-js-with-datasette
|
| Any idea why the columns aren't displaying correctly for wider
| tables? Take a look at this example:
|
| https://observablehq.com/@simonw/grid-js-with-datasette?url=...
| afshinmeh wrote:
| Oh great! I guess the columns are not properly rendered
| because there are a lot of columns. That looks like a bug to
| me. I just created two issues and will release a bug fix
| soon.
|
| Thanks!
| simonw wrote:
| Awesome :)
| robertlagrant wrote:
| > Oh great!
|
| The correct response :-)
| nightski wrote:
| I took a look at it appears the observable notebook has a
| stylesheet defined with a table element style that sets a
| table's max-width to 640px. That is why it is not expanding
| to fill the width. (I am not associated with the project)
| fbnlsr wrote:
| Definitely going to try this. I've been using Datatables with
| Vue but it's not the most user friendly. Thanks for your work!
| afshinmeh wrote:
| Cheers!
| w-ll wrote:
| It looks like sorting / pagination is all down client side
| which forces a download of all the rows, how well does this
| support tables with 10s or 100s of thousands of rows?
| afshinmeh wrote:
| Correct. I have a PR ready which integrates the sort, search
| and pagination with the server-side module. Currently, there
| is a Server Side module that pulls data from the server
| (https://gridjs.io/docs/examples/server).
| hn_1234 wrote:
| Is there any load testing benchmark results available. if so
| can you share ?
| afshinmeh wrote:
| I haven't created a performance report yet but I will
| definitely create one and add it to the docs. Good point.
| XCSme wrote:
| Your documentation is really cool, what did you use to make it?
| cj wrote:
| https://github.com/grid-js/website
|
| Looks like it's made with Facebook's Docusaurus.
| afshinmeh wrote:
| Yes!
| pea wrote:
| Great work - really clean documentation, and it looks
| beautiful!
|
| We currently use `react-table`, which is good in that it can
| support some reasonably large datasets (for instance, here's 2
| million rows on the client-side -
| https://datapane.com/leo/reports/table-test/ - a bit laggy with
| sorting, but passable). This may not be the use-case you're
| going after at all, but have you run any benchmarks for how big
| a dataset you can support?
| afshinmeh wrote:
| Thanks! Appreciate your feedback.
|
| Well, it is on our roadmap! With Grid.js you will be able to
| sort, search or process data in a separate thread (Web
| Worker) and then pass the results to the main thread to
| render.
|
| I'm also thinking about lazy-loading the table rows. Both the
| Web Worker bit and lazy-loading will be added in a week or
| two.
| pea wrote:
| Cool! Have you checked out
| https://github.com/bvaughn/react-virtualized too? Might be
| totally useless to you, but I think they've done a lot
| under the hood to optimise table loading.
|
| Congrats again on a beautiful product.
| craigching wrote:
| I've used react-virtualized to render hundreds of
| thousands of rows, it's a great library. React-window
| from the same developer is also worth checking out if you
| don't want all the bells and whistles.
| silviogutierrez wrote:
| 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.
| danseagrave wrote:
| Has anyone tried Tabulator[1]?
|
| [1] http://www.tabulator.info/
| btzll wrote:
| I have, it's amazing. The only thing it's missing is drag and
| drop to outside divs. Other than that, it's feature rich, very
| customizable and the best from all other js grids I tried.
| joaodlf wrote:
| Yes! Tabulator is amazing.
| thrownaway954 wrote:
| doesn't have the styling pizzazz, but man is this thing feature
| rich! thank you for posting.
| Bishonen88 wrote:
| 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/
| afshinmeh wrote:
| Thanks for your feedback.
|
| I agree that Grid.js is not a full-featured plugin _yet_ and
| it's still missing essential features, like those that you
| mentioned but please bear in mind that:
|
| - I have only released the first version of the library.
|
| - I have been focusing on fundamental blocks of a lightweight
| _data processing_ library (see: https://github.com/grid-
| js/gridjs/tree/master/src/pipeline). That's what took most of
| my time.
|
| - Grid.js is framework agnostic which is a bit different
| compared to other libs
|
| The pipeline is very easy to extend and I'm confident that most
| of those features will be added soon.
| Bishonen88 wrote:
| I don't doubt that you can and possibly will make this a
| great library. It seems like a nice and clean foundation for
| one. I just commented on the word 'advanced' in the title.
| You admitted yourself that it's missing essential features,
| so advanced might be an adjective you'd want to use for
| release 2.0 ;)
| codegladiator wrote:
| 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 ?
| spiderfarmer wrote:
| There absolutely are advantages to libraries that work
| independent from, or across multiple frameworks. Most webdevs
| have experience with multiple frameworks. It's nice knowing you
| can use a library in whatever project you're working on.
| afshinmeh wrote:
| ^^
| afshinmeh wrote:
| Grid.js is a bit different, let me explain.
|
| Grid.js has an internal pipeline library which takes care of
| pulling the data, adding data processing layers, caching each
| layer when it's possible (e.g. you search for a keyword and
| then you navigate between pages) and running the steps to
| refine the data.
|
| The `pipeline.process()` can be executed in a different thread
| than the main browser thread (e.g. Web Worker) which is super
| useful to perform the CPU consuming bits.
|
| My main focus has been designing the pipeline and will continue
| to improve it. Also, the pipeline can be extended easily (see
| https://github.com/grid-js/gridjs/tree/master/src/pipeline) and
| steps are pure functions.
| Sembiance wrote:
| I thought this was about CSS Grid, but nope, nothing at all to do
| with that.
| shmelvin512 wrote:
| Maybe read the welcome message again:
| https://news.ycombinator.com/newswelcome.html
|
| It could help you construct a more thoughtful comment next
| time. It's the most important principle and really simple to
| pursue.
| wnevets wrote:
| On a related note, I glad to see unpkg.com offically supported.
| Being able to avoid npm install is just nice sometimes.
| afshinmeh wrote:
| Awesome!
| colesantiago wrote:
| I disabled JavaScript and it doesn't load the table.
| boromi wrote:
| I unplugged my toaster, but it doesn't work?
| colesantiago wrote:
| Sure, except the major point is this, Progressive Enhancement
| [0].
|
| This table is useless if it doesn't load without JS,
| especially if it is a table that claims to work _everywhere_.
|
| [0] https://www.gov.uk/service-manual/technology/using-
| progressi...
| baddox wrote:
| If you don't use software that parses and displays HTML,
| then plain HTML tables won't work either.
| runawaybottle wrote:
| It's an enhanced data table.
|
| But, I guess that could be a feature to allow your data tables
| to fall back to some static table.
| colesantiago wrote:
| That would be a good idea for this table. Privacy conscious
| people like me would welcome this.
| nawgszy wrote:
| This is surely a satirical comment?
| colesantiago wrote:
| Nope, many people (sadly technical people) browse the web
| without JS turned on.
|
| It makes the web a whole lot faster with no scripts running.
| (especially on mobile)
| babaganoosh89 wrote:
| I'd suggest doing the up/down arrows in css instead of images,
| the images look a bit blurry on retina screens
| afshinmeh wrote:
| Good point. I will definitely change that part.
| rootcage wrote:
| Out of curiosity how is this better than current Grid/Table
| implementations?
| afshinmeh wrote:
| - Grid.js is a data-processing pipeline (see
| https://github.com/grid-js/gridjs/tree/master/src/pipeline)
| which enables you to easily extend the library - It's framework
| agnostic! - It is written in TypeScript - Fully tested and
| documented
|
| Also please take a look at https://gridjs.io/docs/philosophy.
| mason55 wrote:
| 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?
| mstade wrote:
| How many columns/rows can you realistically fit in screen?
| Isn't this practically solved for most use cases by just having
| as many as needed for rendering and replacing contents as
| necessary?
|
| I've worked in financial institutions for going on a decade at
| this points and there are grids everywhere. I've learned a
| thing or two about them in these years and that's:
|
| - everyone wants to implement their own, for reasons
|
| - they'll mostly do a decent but not quite good job at it,
| because it's complicated and oh hey let's just all forget about
| accessibility (traders love keyboard navigation!)
|
| - performance is always a problem till someone reinvents
| virtualized row rendering
|
| - excel beats your thing anyway and everyone knows it so if you
| just have decent excel import or even just good paste handling
| you'll do fine
|
| - 99% of grids people actually use never show more than two
| dozen rows or so, and then implements pagination and just like
| with google no one ever goes to page 2 of the results
|
| If you have a pressing need to handle thousands/millions of
| rows, it's likely not for display but for editing, in which
| case:
|
| 1. Just use excel
|
| 2. Virtualized rows still has your back, ain't no screen
| showing more than maybe a hundred rows or so anyway, and even
| if it did no one reads that far
|
| Grids really feel to me like a rite of passage for front end
| developers, along with a basic charting library and mildly
| interesting application framework. Incidentally, this is also
| how I've landed most of my jobs, so maybe I'm biased.
|
| EDIT: This is by no means a dig at the author and I'm sorry if
| it may come across as such! This library looks like a fine
| piece and I wish you every success!
| at-fates-hands wrote:
| >> Grids really feel to me like a rite of passage for front
| end developers,
|
| Agreed!
|
| The last two jobs I interviewed for the code challenge was a)
| hit this API endpoint, b) pull the data and put into a table
| and c) make said table responsive and accessible.
|
| The majority of front-end work these days is either forms or
| tables. Get good at both and you'll have steady work forever.
| mstade wrote:
| You're right, I forgot about forms - good shout!
| SloopJon wrote:
| > How many columns/rows can you realistically fit in screen?
|
| I don't know why you think many rows is an indication that
| you're editing. Tables are the first resort for reports, and
| reports tend to have lots of data (i.e., rows).
|
| While I'm not a fan of horizontal scrollbars, I absolutely
| prefer to render thousands of rows with a vertical scrollbar
| than use pagination. Give me a sort key or two, a filter box,
| and I'll whittle it down to what I'm interested in.
|
| I've seen Airtable show up on some sites lately, and its
| scrolling performance is abysmal. None of the examples for
| Grid.js has more than a handful or rows, so I won't take its
| performance on faith. So far, DataTables has been my go-to
| option for web tables, but I'd happily switch to something
| else if it performed as well.
| mstade wrote:
| > Give me a sort key or two, a filter box, and I'll whittle
| it down to what I'm interested in.
|
| This is also editing, albeit of the view of the data, maybe
| I should've made clear that that's what I meant (primarily,
| anyway.) Thanks for challenging!
|
| Grids with massive amounts of data are - in my experience -
| only used to build models, i.e. sort, filter, aggregate. No
| one cares tho read more than a couple dozen or so rows, but
| they do like the ability to chuck a ton of data into the
| grid and then edit the view by applying various
| combinations of functions to sort, filter and aggregate the
| data into something that is more fit for purpose. You don't
| need a grid to apply functions to data, it just happens to
| be a pretty effective interface to do so. But it's only
| effective if rendering is fast, and that means someone
| somewhere will again reinvent virtualized rows. Or you
| know, just use excel.
| ng12 wrote:
| 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.
| afshinmeh wrote:
| They don't have to be. I will definitely test this particular
| case.
___________________________________________________________________
(page generated 2020-06-04 23:00 UTC)