Dropdowns within cells?
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
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
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 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.
Hi @ririvas, could you share your example?