I have tried several functions to achieve validate these within a ReactTable. The Airplane field I want to only allow a maximum of 5 characters, and the Weight field I want to be only numeric. I do not know how
<ReactTable
contentEditable
collapseOnDataChange={false}
data={data}
itemsPerPage={20}
onKeyPress={this.handleKeyPress}
columns={[
{
Header: "Aeronave",
columns: [
{
Header: "Aeronave",
id: "aeronave",
accessor: flight => ({
arrival: flight.arrival.configuration.aeronave,
departure: flight.departure.configuration.aeronave
}),
width: 50,
className: "center",
Cell: row => (
<DobleRow
edit={row.original.status === 'open' ? true : false} fieldMode={fieldMode}
arrival={row.value.arrival}
departure={row.value.departure}
editcontentIn={e => this.props.editcontentIn("aeronave",
{
arrival_id: row.original.arrival._id,
flight_id: row.original._id,
body: {
configuration: {
aeronave: e.target.innerHTML
}
}
}
)}
/>
)
}
]
},
{
Header: "Peso",
columns: [
{
Header: "Peso",
id: "peso",
accessor: flight => ({
arrival: flight.arrival.configuration.peso,
departure: flight.departure.configuration.peso
}),
width: 50,
className: "center",
Cell: row => (
<DobleRow
edit={row.original.status === 'open' ? true : false} fieldMode={fieldMode}
arrival={row.value.arrival}
departure={row.value.departure}
editcontentIn={e => this.props.editcontentIn("peso",
{
arrival_id: row.original.arrival._id,
flight_id: row.original._id,
body: {
configuration: {
peso: e.target.innerHTML
}
}
}
)}
/>
)
}
]
},
]
}
/>