search

facebookarchive / fixed-data-table

A React table component designed to allow presenting thousands of rows of data.
http://facebook.github.io/fixed-data-table/
Other
4.3k stars 553 forks source link

Programmatically change cell width #450

Open slashwhatever opened 8 years ago

slashwhatever commented 8 years ago

I'm in the process of replacing a framework with React and need a grid component.

While this one does many of the things I need (custom components in a cell being the major plus), I can't see any easy way of dynamically changing a cell width programmatically.

This is the behaviour from our current framework that I'm trying to replicate: http://g.recordit.co/jd2yHJwwIG.gif

The final column in the grid features a hamburger menu that, when hovered, increases the width of the cell to cover all but the first cell in the row (by default - this is configurable in code) and reveals a number of action buttons, allowing the user to perform some quick actions on the record in the row. ( the animations are smoother in real life than in the gif :) )

If this isn't currently possible, can I request some of the features that would help towards this? Mainly a cellOnMouseEnter hook and the ability to programmatically change the cell width to a defined value (which would need to be measured from the grid markup or column width values, presumably).

KamranAsif commented 8 years ago

Just change your data and trigger a re-render. Heres an example: https://jsfiddle.net/fppunm8j/

slashwhatever commented 8 years ago

That gets me as far as a hover state but the real key is how to programmatically change the hovered cell width.

jpggvilaca commented 7 years ago

+1