Show HN: A simple React table library using CSS Grid Layout

#1

Post by rebeccapark » Sun, Mar 04, 2018, 8:07 PM UTC

Show HN: A simple React table library using CSS Grid Layout
github.com

Re: Show HN: A simple React table library using CSS Grid Layout

#2

Post by crooked-v » Sun, Mar 04, 2018, 8:40 PM UTC

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

Re: Show HN: A simple React table library using CSS Grid Layout

#3

Post by SahAssar » Sun, Mar 04, 2018, 9:03 PM UTC

Why wouldn't you use proper tables for tables?

Re: Show HN: A simple React table library using CSS Grid Layout

#4

Post by ben_jones » Sun, Mar 04, 2018, 9:13 PM UTC

SahAssar wrote: post #3

Why wouldn't you use proper tables for tables?

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

Re: Show HN: A simple React table library using CSS Grid Layout

#5

Post by throwaway66666 » Sun, Mar 04, 2018, 9:22 PM UTC

SahAssar wrote: post #3

Why wouldn't you use proper tables for tables?

tables are evil /s

Re: Show HN: A simple React table library using CSS Grid Layout

#6

Post by mephitix » Sun, Mar 04, 2018, 9:42 PM UTC

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.

Re: Show HN: A simple React table library using CSS Grid Layout

#7

Post by SahAssar » Sun, Mar 04, 2018, 9:50 PM UTC

ben_jones wrote: post #4

SahAssar wrote: post #3

Why wouldn't you use proper tables for tables?

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

Then the fix is to only render the rows currently in the viewport, right? Seems weird to recreate tables using CSS for that reason.

Re: Show HN: A simple React table library using CSS Grid Layout

#8

Post by rehemiau » Sun, Mar 04, 2018, 10:25 PM UTC

SahAssar wrote: post #3

Why wouldn't you use proper tables for tables?

+1 There are many problems with html tables (like inconsistent buggy implementations between browsers) but grids don't fix them and introduce other problems. You can't group cells in rows / columns html elements. You can't write a simple css selector for a particular cell. You can't easily refer to a whole row with a css selector. You can't do stuff like "highlight the whole row on hover" because you wouldn't have a parent element to select. Grids are for grid layouts, and with current feature set they can't replace tables.

Re: Show HN: A simple React table library using CSS Grid Layout

#9

Post by cimmanom » Sun, Mar 04, 2018, 10:55 PM UTC

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

Re: Show HN: A simple React table library using CSS Grid Layout

#10

Post by philipwhiuk » Sun, Mar 04, 2018, 11:30 PM UTC

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