I'm using material table with inline editing mode, and now I want to all of inline editing fields are required, if the user leaves the input is empty or something like that, material table should display error message and disable the buttons.
At the moment, I have to use the editComponent to override the input. is there anyway to I can do it by material table without overriding?
I made it work like this
{
field: 'name',
title: 'Name',
validate: (rowData) => rowData.name=== "" ? {isValid:false, helperText:'Name is required'}:true,
editComponent: props => { return <TextField value={props.value}
onChange={(event) => {props.onChange(event.target.value)}}
error={props.error} helperText={props.helperText}/>}
}
Related
I'm facing the issue on the react-select package.
I'm going to pass the id to the every options in the Select component from the react-select component.
My code looks like bellow.
var options = [
{id: 'lease', label: 'Lease', id: 'ownership-details-option-lease'},
{id: 'own', label: 'own', id: 'ownership-details-option-own'}
]
I'm going to add the id to the option in the react-select component.
<Select
name='ownershipstatus'
onChange={(e) => {}
...
}
options={options}
/>
Your 'option' objects cannot have two id keys. Object keys must be unique, or the last defined will overwrite the first.
You have two props, getOptionLabel: (option:Object) => String and getOptionValue: (option:Object) => String that you use to define "this is the displayed value and this is the actual value".
pseudocode:
<Select
getOptionLabel={(option) => option.customLabel}
getOptionValue={(option) => option.id}
value={someValueState}
onChange={({target: {value}}) => setSomeValueState(value)}
{...otherProps}
/>
The value you pass in to your control should equate to the 'value' of an option. Are you trying to set an explicit 'id' on options in your list? Why? Are you attempting to write unit testing? If so, use react-select-event and #testing-library/react. You won't need those id's. If it's something else, give us a valid use case.
I am trying to make a certain column editable( name column ) in material table but it doesn't seem to work. the documentation aren't also that helpful. this is what I tried:
My columns array:
const headers=[
{
title:"id",
field:"id",
},
{
title:"name",
field:"name",
editable:'always', //as per documentation its 'always' by default but still..
editComponent:props=>( //trying to create custom edit component
<input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}/>
)
},
{
title:"email",field:"email"
}
]
my material table component:
<MaterialTable
columns={headers}
data={rows}
icons={tableIcons}
editable={{}}
options={{
search:false,
//padding:"dense",
paging:false,
// addRowPosition:"first",
// actionsColumnIndex:-1,
sorting:false,
exportButton:false,
rowStyle:{
fontSize:"10px",
padding:0,
textAlign:"center"
}
}}
/>
my output:
any help is appreciated.
You need to set the rest of the columns as "uneditable"
{
title:"id",
field:"id",
editable:'never'
}
Don't forget to add cellEditable to your material table tag
cellEditable={{
onCellEditApproved: onCellUpdate,
isCellEditable: () => true,
}}
If you have many columns and you only want a single editable column you can also use the column's field name for specifying which column is editable :
cellEditable={{
onCellEditApproved: onCellUpdate,
isCellEditable: (rowData, columnDef) =>
columnDef.field === "name",
}}
I'm using react-table package. I'm confused, what's the point of cell.render("Cell") when I can just write cell.value?
I see in my browser that it renders the same way. So, why should I use the first one?
Because When you define the columns for your table you may want to customize how the Cell is rendered.
Here is an example of one of my columns.
{
Header: "Enable",
id: "enable",
accessor: "enable",
Cell: ({ value, row }) => (
<FormCheck checked={value} onChange={(e) => handleCheckChange(row.index, e)} />
),
},
I use the Cell property to customize how each cell will look on the table and I cant add props to the cell like onChange.
If I just used .value instead of .render(Cell) my cells would not have a Element and I couldn't customize how the value is displayed within the Cell <td><FormCheck /><td/>
TLDR: If you want to customize the cells from your column definitions you will want to use the .render("Cell").
In my code example I use the Column option Cell to insert a CheckBox for that column (Does not effect the header () only ())
Question: Is it possible to wrap text when typing in abnormally long names in MaterialTable?
An issue I'm having with the Material Table is when typing in a very long name, for example "LONG NAME LONG NAME LONG NAME LONG NAME" the line continues, and the previous words "disappear".
Is there a way to wrap the text so when I'm typing a really long name, the text field continually expands?
Code: https://codesandbox.io/s/material-demo-vnk66
The current issue:
What I want to try and do, where the text wraps inside the box.
What I've tried to do was inline styles in the MaterialTable declaration, and then in the outer element I have, but this doesn't work:
style = {{
whiteSpace: "normal",
wordWrap: "break-word",
}}
You can customize components in order to have them behave exactly as you want in editable material tables. For example, if you want to have a multiline TextField you can do:
columns: [
{
title: "Name",
field: "name",
editComponent: ({ value, onChange }) => (
<TextField
onChange={e => onChange(e.target.value)}
value={value}
multiline
/>
)
},
...
]
Demo: https://codesandbox.io/s/material-demo-8ysj5
I am trying to render a Dropdown with a placeholder but the placeholder doesnt render. I'm not sure why. My Dropdown is as follows.
<Dropdown
loading={loading}
error={!!error}
inline
value={this.props.entityId || null}
onChange={(e, { value }) => {
client.writeData({data: {teamBudget: value, __typename: 'TeamBudget'}})
}}
options={options}
placeholder={options ? 'Select Draft' : 'Error!'}
/>
when I comment out value the placeholder displays as expected. Can value not be defined along with placeholder?
I don't know the component you are using,
but the common convention is,
value={the value you are expecting to display inside the dropdown field}
which should be in a label value pair
eg: [{ value: '1', label: 'one' }]
i can only suspect your this.props.entityId isn't in this format.
also, that could be the reason it sabotages the placeholder.
FYI: usually, if you don't mention value={} in props, it handles it by default,
which could be the reason it works properly when ommits...