
Show HN: A simple React table library using CSS Grid Layout - rebeccapark
https://github.com/RebeccaPark/react-css-grid-table
======
SahAssar
Why wouldn't you use proper tables for tables?

~~~
ben_jones
Bulk table rendering can have a performance impact on your app and a more
minimal implementation may be desired

~~~
_sdegutis
Dunno why you’re downvoted. Noticed this too, if you have a table with slow
loading content then the whole thing doesn’t render until all of it can
render.

~~~
tuespetre
Interesting, does `table-layout: fixed` have any effect?

------
cimmanom
I get (and strongly encourage) using grids instead of tables for layout. But
why use grids instead of tables for tables?

~~~
tonylinn80
This is off-topic, but since you strongly encourage using grids for layout.
How do you deal with browser support issues? I found even IE11 is still very
buggy in supporting CSS grid properly.

~~~
cimmanom
Or other CSS facilities if you have to support sucky browsers.

I spent the first five years of my career advocating for replacing table
layouts with CSS, and finding ways to do just that.

My point is simply that we seem to have gone overboard.

Part of that movement was towards what we called "semantic" markup. Wrapping
your content in HTML tags that describes what the content is for (a heading, a
list, etc) instead of how it should look (bold, larger font).

One of the reasons that tables were terrible for layout was that with tables
you had to use markup that meant different things than what you were trying to
accomplish. Among other things, this badly screwed with screenreaders and
other software parsers (crawlers, including those of the major search engines;
and scrapers).

But for actual tabular data, HTML tables _are_ the semantically correct
markup. They work well and can be parsed correctly. The point of the semantic
markup movement was never to completely remove tables from our vocabulary. It
was to return them to their proper use case.

While we did manage to come up with CSS alternatives for nearly all the table
based layout features, CSS Grid is the first option that gives you the full
power that tables offered (and more) for the grid-based layouts that have been
a staple of graphic design since the creation of the first coffee table book.

But this package reminds me of the straw man argument that some old school
developers used to bring up when we encouraged them to learn CSS for layout:
"if we get rid of tables, we'll have to come up with insane workarounds for
displaying tabular data".

Well, someone just did.

------
tomelders
React components that take configuration rather than allowing you to compose
smaller components are generally a bad idea.

~~~
crispyporkbites
Why?

~~~
mattnewton
Speaking from experience outside of react, but I imagine it carries over
nicely having done a little react myself: The configuration either doesn’t
encapsulate you’re specific use case because it is kept simple, and you are
stuck forking the component; or the configuration expands to be its own little
akwards DSL with very surprising edge cases.

~~~
ikurei
(I commented on your grandparent)

I agree that these are the main issues with using this kind of component.
However, most of the time there is no need to fork the component and, _if_ you
actually need things that the component doesn't allow, then it's the time to
do it yourself. Because that doesn't always happen, if the component is easy
to use it often is worth to go with it and only do the additional work if you
need it.

> or the configuration expands to be its own little akwards DSL with very
> surprising edge cases.

This is the crux of the matter. However with this particular library, the
configuration is extremely reasonable, simple and readable. It would be no
problem to refactor the code to use the very same configuration to create your
own table.

------
crooked-v
The SCSS requirement is weird, especially for something meant to be imported
by other projects. Why not use styled-components or emotion instead?

------
mephitix
What's the use case for this? You can pretty easily do this already with React
+ styled-components + CSS grid and still keep it pretty DRY.

Would help if you added more/different examples to show what else it can do
beyond that first example.

------
philipwhiuk
What's the benefit of this over react-bootstrap Table which uses an actual
<table> tags.

------
jamesrom
edit: removed

~~~
grzm
The best course of action is to email the mods via the Contact link in the
footer. The guidelines are clear on this as well:

> _" Please don't impute astroturfing or shillage. It degrades discussion and
> is usually mistaken. If you're worried about it, email us and we'll look at
> the data."_

> _" Please don't complain that a submission is inappropriate. If a story is
> spam or off-topic, flag it. ... If you flag something, please don't also
> comment that you did."_

[https://news.ycombinator.com/newsguidelines.html](https://news.ycombinator.com/newsguidelines.html)

~~~
jamesrom
Thanks for the info. Will remove my comment.

