pupudu / window-table

Windowing Table for React based on React Window
https://window-table.netlify.com/
170 stars 13 forks source link

Add support for HTML5Table to accept Row as component #65

Open duyphaphach opened 4 years ago

duyphaphach commented 4 years ago

Firstly, thanks for your great library! Really performant and smooth! It just lacks a bit of flexibility.

I wanted to render a table with HTML tags so I pick the HTML5Table component. Then I realized that the rows are not resized dynamically, which made me export the Row to separate component to measure it.

But passing Row renderer to HTML5Table like below won't work. Really appreciate if you can soon add support for this.

<Html5Table
          headerClassName="header"
          className="ui profile"
          data={profiles}
          columns={columns}
          Header={HeaderRenderer}
          Row={RowRenderer}
          rowHeight={getRowHeight}
 />
pupudu commented 4 years ago

Hi @duyphaphach Thanks for the kind words. Unfortunately window-table doesn't support variable row sizes at the moment.

Passing the Row prop should work however. I can have a look if you could produce a minimal example in a codesandbox.

Or else, you could consider React Fluid Table which is drop in replacement for this library. It has a similar API and supports variable row sizes out of the box.

Let me know your thoughts. Thank you.

duyphaphach commented 4 years ago

Hi @pupudu, thank you for replying I made a code sandbox to reproduce the issue with passing Row prop on HTML5Table here Would you kindly have a look at it

you could consider React Fluid Table which is drop in replacement for this library. It has a similar API and supports variable row sizes out of the bo

I searched many related libraries (including React Fluid Table) and they are all using divs to build table so they don't fit my need. I'm trying react-base-table's approach to dynamically resize row height: measure row on mounted and forceUpdate table

pupudu commented 4 years ago

@duyphaphach I gave a shot at adding support for variable sized rows to the library. Here you can find an example: https://codesandbox.io/s/window-table-column-components-dycqw?file=/src/App.js

Please note however that this is still experimental. I need to test a lot manually before I make this GA. Right now, the feature is available in version 1.0.0-alpha.3.

Let me know your thoughts. Thanks.