React Data Grid: Can we restrict input while editing as numeric only?

Question

I am having a react-data-grid table which shows numeric values. But on editing any cell, we can enter any alpha numeric value. Can we restrict entry to be numeric value only?

Answer 1

Yes you can.

All you need to do is adding Custom Editor and assign it to the numeric columns.

In your editor you will need to render and input and validate that what the user types is a numeric value. You can do that by adding a onChange event handler and always convert the input to a numeric value.

Your handler would look something like this:

handleChange({ target: { value } }) {
   if (value && Number.isNaN(value)) {
     return;
   }

   // it is a number, so just parse it from the string if you are storing it as a number, otherwise do nothing in here.

   // update the state/dispatch with the new value.
}

Custom Editors need to implement a series of lifecycle methods, the core methods are:

• getValue: called when a cell commits, what's returned in where will override the values for your row, one or several values can be overridden at once depending on what you return, the return should be something like { [column.key]: value, ... }
• getInputNode: Called when you open the editor, it is used to focus automatically on a specific node.

You can check some custom editor implementations in this open source project.

Answer 2

add prop of type: 'number' in column field