react-datasheet icon indicating copy to clipboard operation
react-datasheet copied to clipboard

Dropdowns within cells?

Open afrey95 opened this issue 6 years ago • 4 comments

How would I go about using a different input element in a cell like a dropdown? Where would I give the props.children?

This doesn't work obviously, so what is the solution?

` cellRenderer = (props) => { const { cell, row, col, columns, attributesRenderer, selected, editing, updated, style, ...rest } = props;

if (col === 3) {
  return (
    <select value={cell.value} {...rest}>
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>
  );
}`

EDIT: I can't get the editor to format the code right, but you get the idea

afrey95 avatar Oct 01 '19 14:10 afrey95

Seems like this already present in the demos? Specifically the Sheet with custom renderers demo, last column.

Source code below https://github.com/nadbm/react-datasheet/blob/master/docs/src/examples/CustomRendererSheet.js

ririvas avatar Mar 18 '20 00:03 ririvas

I also needed to implement something like this. Unfortunately there doesn't seem to be a way to do it simply. In the demo you need to double click to make it appear. I gave it a valueViewer select component but there's all sorts of inconsistencies with edit mode (which is enabled only by double clicks). The way I see it, either choose another lib or be prepared to fork this and rework the internals.

luciancic avatar Apr 12 '20 23:04 luciancic

@luciancic another approach would be to override the higher level renderers. For example, in a specific instance, rather than deal with custom renderers on a cell, I overrode the row renderer to implement custom cells rendering. Note, this may collide with expected functionality of the sheet if the implementation or use case do not align with the spreadsheet model.

ririvas avatar Apr 12 '20 23:04 ririvas

Hi @ririvas, could you share your example?

sodhanii avatar Jul 30 '20 20:07 sodhanii