'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>

What it looks like

What I need it to look like



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source