Editable code block inside a Data grid Cell

[jrodriguezcalvo]

<DataGridRow><DataGridCell> <TextArea data-testid={input-editor-0} value="this is a test" maxLength={4000} /> </DataGridCell> <DataGridCell> <CodeEditor data-testid={json-output-editor-0} defaultLanguage="json" options={{ scrollBeyondLastLine: false, minimap: { enabled: false }, readOnly: readOnly, }} /> </DataGridCell></DataGridRow>

• Having a code similar to this where we don't have defined a height for the CodeEditor, it should take 100% of the DataGridCell, but it will show something like this:

• We prefer not to set a hardcoded height in this component, so what is the alternative to solve this issue?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Set maxHeight for Data Grip? (updated: 03/19/2024, similarity score: 85%)
• Column wrapping in Data Grid? (updated: 06/28/2022, similarity score: 85%)
• TextArea Height and Rows (updated: 08/10/2022, similarity score: 84%)

[dosubot[bot]]

Hey @jrodriguezcalvo! I'm here to help you with any coding issues and questions you have. Let's tackle this together!

To ensure the CodeEditor component takes up 100% of the DataGridCell without setting a hardcoded height, you can try the following approach:

1. Flexbox Layout: Use CSS Flexbox to make the DataGridCell a flex container and allow the CodeEditor to grow and fill the available space. You can apply styles like display: flex; and flex: 1; to the DataGridCell and CodeEditor respectively.

2. CSS Grid: Alternatively, you can use CSS Grid to achieve a similar effect. Set the DataGridCell to display: grid; and ensure the CodeEditor is set to grid-area: 1 / 1 / 2 / 2; to fill the cell.

3. Height 100%: Ensure that the CodeEditor and its parent elements have height: 100%; set in their CSS. This will help the editor to expand and fill the available space within the DataGridCell.

These approaches should help the CodeEditor component dynamically adjust its height to fill the DataGridCell without needing a hardcoded height.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[serifluous]

Hey @jrodriguezcalvo ! Can you create a reproduction in Code Sandbox https://codesandbox.io/p/sandbox/paste-starter-kit-rj7yy?file=%2Fsrc%2Findex.tsx ?

Thanks!

[krisantrobus]

Hi @jrodriguezcalvo I took a look at this and there is no good solution to fill table cells as they do not have a set height. There are 2 work arounds for this but neither of them have the correct props to be able to do this without using CustomizationProvider.

I have put a CodeSandbox together to demonstrate the issues and solution. One thing you'll notice on one of the examples is the text area does not stretch. This is for the same reason. While it may look like it fills the cells in your current implementation this is due to Paste setting a min height of text areas to span 3 rows and as this is the tallest component in the row it takes up all the height.

The position relative approach will stretch to fill in "height" of the cell but as it is now using absolute positioning the cell thins it does not have content and you lose the even positioning of the width. You can add a box here with a width if you wanted but feels janky.

The other solution is to set an absolute height on each of the cells in the data grid using CustomizationProvider and the editable code block will fill the content to the cell with no issues. @serifluous we can easily expose the height prop of the DataGridCell to eliminate the need for customization provider. I would also recommend that you do not use a autoresize text area as this will alter the table height and the editable code block will not stretch as it only fills the specified height.

Does this explanation make sense?

[serifluous]

Good call! Just created a ticket in the backlog for it, and tagged you @jrodriguezcalvo

[nkrantz]

#4291 is the PR in case you'd like to follow along - should have it merged within the next week!

[krisantrobus]

Hi @jrodriguezcalvo I worked on exposing the cell heights to set but with the nature of td I'm unable to set the absolute height. What I have done instead is expose the minRows prop on TextArea which, in combination with setting the maxRows will set an absolute height without resizing. Using the a formula you can set an absolute height of the CodeEditor so they are always the same height. With text wrapping in other cells you may see the height of these components not fill content but they will always stay consistent with each other.

I've updated the code in this sandbox. Resizing the window will show you the issue with text area wrapping I mentioned.

Formula, in pixels:
(20 * numTextAreaRows) + 16

Version with changes @twilio-paste/[email protected]