React-data-grid: Add flag to show editor on single click.

[szogun1987]

• [ ] 🐛 Bug Report
• [x] 💡 Feature Request

If column is editable editor appears when user click on cell 3 times (once for cell selection and twice to show editor). There should be some setting that change this behavior. On my private fork I pass true to selectCell function call in onCellClick method in ReactDataGrid component. For now it seems to work fine.

[Ragzzy-R]

would be awesome if we could get this feature. At my work, we have a column with a single checkbox(to represent say expired/active) which should be selectable via some key when the cell is highlighted as well as clickable with one mouse click.

[szogun1987]

@Ragzzy-R there is a workaround you can use to achieve the behavior you want.
You can use custom formatter to display a column with checkboxes, formatters get context row as a parameter so you can find and modify a row in your state on change.

[Ragzzy-R]

hello, sorry for late reply. I haven't tried this but won't changing the grid's state cause the entire grid to re-render? will that affect performance?

[szogun1987]

I haven't check it. I've revied code and as long as the size of your array is the same it shouldn't do intensive DOM changes. You should be also careful about object creation.

By the way, today users told me that single-click should show editor only if a cell is already selected, otherwise it should select it.

[Ragzzy-R]

By the way, today users told me that single-click should show editor only if a cell is already selected, otherwise it should select it.

I agree to this, otherwise, clicking would cause unwanted edited triggers and bad UX. but there are some columns that needs editor with single click, for example a checkbox or a dropdown.

consider this scenario,
i want to select some value from a dropdown.
I click once to select the cell => click again to show editor => then click again to open the select box(although this could be done by open on load or something) => and then the fourth time we gotta click to actually select something.

This seems a real painful job for the end user. I think there can be a props to enable disable 'single click editor mode', that way its a win-win for everyone. I'm happy to give a PR for this if someone could guide me where to start/look for.

[ar2zee]

any updates on this one ?

[amanmahajan7]

You can use the onRowClick event to show the editor on single click

https://github.com/adazzle/react-data-grid/blob/canary/CHANGELOG.md
https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/AllFeatures.tsx#L205
https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--all-features