1

I am using an editable material-table and for one of the columns I want the user to only be able to enter numbers and not any chars or special characters. I checked the validation section on the material-table website but it did not have anything on this.

This is the code sample the site offers of an editable material-table:

function Editable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    },
  ]);

  const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
  ]);

  return (
    <MaterialTable
      title="Editable Preview"
      columns={columns}
      data={data}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              setData([...data, newData]);
              
              resolve();
            }, 1000)
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataUpdate = [...data];
              const index = oldData.tableData.id;
              dataUpdate[index] = newData;
              setData([...dataUpdate]);

              resolve();
            }, 1000)
          }),
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataDelete = [...data];
              const index = oldData.tableData.id;
              dataDelete.splice(index, 1);
              setData([...dataDelete]);
              
              resolve()
            }, 1000)
          }),
      }}
    />
  )
}

How could I validate that the user does not enter a string or a negative number for the birth year, for example? Any help would be appreciated.

PetullaPapi
  • 41
  • 1
  • 5

1 Answers1

0

You have the answer in your question. On the column with title Birth Year, the type is set to numeric! :)

You could also add your own custom component for editing each column like so:

{ 
title: 'Birth Year', 
field: 'birthYear', 
editComponent: (props: any) => (
  <Input 
    defaultValue={props.value} 
    onChange={(e) => props.onChange(e.target.value)} 
    type="number"
  /> 
},
SaiBar
  • 1
  • In doing this how could I ensure that the user is not able to enter a negative number? – PetullaPapi Sep 14 '20 at 22:29
  • if you import your own input-field you can set a min-value like this: https://stackoverflow.com/questions/7372067/is-there-any-way-to-prevent-input-type-number-getting-negative-values – SaiBar Sep 15 '20 at 04:45
  • It works but now it allows the user to put in negative numbers, which wasn't desired – PetullaPapi Sep 16 '20 at 18:42
  • Can you share your code? It should have min="0" on the input-element – SaiBar Sep 17 '20 at 06:20