'Make cells in table editable react-virtualized
So I created a large list and I can get it to display and all that, but I need it to be editable....
so far I've tried:
- putting in an html input tag, which does display but I can't even get the cursor to show in the field when clicking on it.
- putting in a TextField element from material-ui... same thing can't edit it, though it does show
I'm not sure if editable fields or even buttons are possible within react-virtualized. Would anybody know? Two images are below of what it looks like now, and what I need it to look and function like
Here is the react-virtualized code
<div style={{ width: "100%", height: "100vh" }}>
<AutoSizer>
{({ width, height }) => (
<List
width={width}
height={height}
rowHeight={cache.current.rowHeight}
deferredMeasurementCache={cache.current}
rowCount={downloadedData.length}
rowRenderer={({ key, index, style, parent }) => {
const translation = downloadedData[index];
return (
<Table
width={width}
height={height}
headerHeight={20}
rowHeight={90}
rowCount={downloadedData.length}
rowGetter={({ index }) => downloadedData[index]}
>
<Column
dataKey="key"
label="Key"
width={.5 * width}
style={{ backgroundColor: 'red', display: 'none ' }}
/>
<Column
dataKey="value"
label="Value"
width={.5 * width}
style={{ backgroundColor: 'blue' }}
/>
</Table>
);
}}
/>
)}
</AutoSizer>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|