Material-table: Editing TextField doesn't respect Column Width

[ryan-saffer]

Describe the bug
I have a column with type: 'string', editable: 'always' and the cellStyle sets the width: '60%'. The column, as well as the text, renders at the correct width when viewing the table. The issue is when I edit a row, the TextField that displays to edit the text has a very small width, and I cannot find a way to set it to match the width of the column.

To Reproduce
Steps to reproduce the behavior:

1. Create a table with an editable string column, set to 60% width.
2. Create a row with a paragraph of text as the content.
3. Click the 'Edit' button.
4. Notice the TextField width shrinks.

Expected behavior
The TextField should match the width of the column (and perhaps even wrap as the paragraph gets larger?).

Desktop (please complete the following information):

• OS: Windows 7
• Browser: Chrome
• Version: 74.0.3729.108 [64-bit]

Additional context
Not sure if there is a way to fix with custom css..? At this point just looking for a quick fix :)

[ryan-saffer]

I have found a solution by overriding the editComponent with a material-ui TextField where I was able to do my own customization.

import TextField from '@material-ui/core/TextField;

...

this.state = {
    columns: [
        {
            ...
            editComponent: props => (
                <TextField
                    value={props.value}
                fullWidth={true}
                multiline={true}
                onChange={e => props.onChange(e.target.value)}
                />
            )
            ...
        }
    ]
}
...

This works fine, but might be nice to be able to provide these TextField props (such as fullWidth and multiline) directly, without overriding the edit component.

[jayarjo]

I think fullWidth should be simply set to true right away and multiline be either a new option for column config or there should be another default type - text for example.

@ryan-saffer have you thought about making a Pull Request?

[ryan-saffer]

@jayarjo I agree that fullWidth should be there by default. I think multiline probably better to be an option. Have not made a PR but will look into these options

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.