Column Resizer Double Click Listener #617
Conversation
Added support to pass a callback to listen to double click of column resizer knob. This can be very useful to enable excel like autofit columns in the table.
| @@ -436,6 +436,16 @@ class FixedDataTable extends React.Component { | |||
| * ``` | |||
| */ | |||
| onColumnReorderEndCallback: PropTypes.func, | |||
| /** | |||
There was a problem hiding this comment.
add a new line to separate the prop types
| onMouseDown={this._onColumnResizerMouseDown} | ||
| onDoubleClick={this._onColumnResizerDoubleClick} |
There was a problem hiding this comment.
How does onMouseDown work when the user double clicks the resizer? Is it going to be called twice? Do you see any issues that might pop up (eg: does the resize event trigger twice?)
There was a problem hiding this comment.
How does
onMouseDownwork when the user double clicks the resizer? Is it going to be called twice? Do you see any issues that might pop up (eg: does the resize event trigger twice?)
Yes the resize does gets called twice, right now I have handled it to ignore the event if the new column width and current column width is same. Can we do something similar in fdt only. I also think this can potentially leave the column resize blue bar to not re render if we do not trigger mouse up?
The simplest way will be to leave upto the consumer to decide here similar to the way I am handling in my use case.
There was a problem hiding this comment.
Probably in this line, we can just do setState and do not call onResizeEnd if the props initialWidth and state width are equal?
There was a problem hiding this comment.
Okay, I see there is a need to re render FDT with prop isColumnResizing set as false because of this line
There was a problem hiding this comment.
Okay after taking a deeper look, I think we should introduce a COLUMN_RESIZE_END action type similar to COLUMN_RESIZE and call it on when column resize ends. This new action type can set isColumnResizing as false and also clear the columnResizing data in the state and at the same time decide to whether to call the user passed onColumnResizeEnd callback. This approach has two benefits, it takes away need to re render fdt to remove the column reisizer blue line and also will not call onColumnResizerEnd callback unnecessarily when the new and current column width are equal.
Let me know your thoughts on this
There was a problem hiding this comment.
I think we should introduce a COLUMN_RESIZE_END action type similar to COLUMN_RESIZE and call it on when column resize ends. This new action type can set isColumnResizing as false and also clear the columnResizing data in the state and at the same time decide to whether to call the user passed onColumnResizeEnd callback.
This sounds good to me. We should probably leave it up to the user to decide if they want to ignore the onColumnResizeEnd callback when the new and old widths are identical.
This new action type can set isColumnResizing as false and also clear the columnResizing data in the state
I got a question here: will there be any scenarios where the user doesn't want isColumnResizing to be false?
Maybe they want to ignore the current resize due to some reason, so in this case they'll plan to keep isColumnResizing as true.
Ideally we want the user to be able to control column resizing through the isColumnResizing prop but I'm not aware of any examples in the wild that set the prop dynamically. In both our application and in the resize example here, the prop is always set to false.
| @@ -338,6 +340,10 @@ class FixedDataTableCell extends React.Component { | |||
| } | |||
| }; | |||
|
|
|||
| _onColumnResizerDoubleClick = () => { | |||
| this.props.onColumnResizerDoubleClick(this.props.columnKey); | |||
There was a problem hiding this comment.
Since this is essentially a wrapper over the onDoubleClick event handler, it's a good idea to also pass the original html event to the user.
|
@singharpit94 , nice to see you again and thanks for the PR. This looks good. It'd be neat if you could add a new example for this, maybe something like the auto resizer which you've shown in the screenshot.
It'd be a good idea to add a simple test case which ensures that double clicking on the resizer for a column actually triggers the double click handler for the said column. Let me know if you need help with any of these. |
| @@ -121,6 +121,7 @@ class FixedDataTableRowImpl extends React.Component { | |||
| * @param object event | |||
| */ | |||
| onColumnResize: PropTypes.func, | |||
| onColumnResizerDoubleClick: PropTypes.func, | |||
There was a problem hiding this comment.
can you update the jsdoc for this prop as well?
|
@singharpit94, hey any updates on this? |
|
@singharpit94 , friendly ping. Let me know if there's anything to be done from our side. |
Description
Added support to pass a callback to listen to double click event of column resizer knob.
This can be very useful to enable excel like autofit columns in the table.
Motivation and Context
In Excel we have a very simple but cool ability to autofit the columns based on its contents, adding a listener for double click event on column resizer can help in implementing the same excel like autofit column feature in the table.
How Has This Been Tested?
Currently this has been tested locally in my system. Open to add test cases in any form wherever required.
Screenshots (if appropriate):
Types of changes
Checklist: