an ErrorMessage in material-table

Question

i'm trying to put an error message when i make a validation. for example- when user try to update email, and he's email are not validate, i have the emailError 'email are not validate', i wont this apear down the input field. there is someone that can help me to fix that? thanks.

this.state = {
    columns: [
        { title: 'Name', field: 'fullName', },
        { title: 'Permission groups', field: 'permissionGroups' },
        { title: 'Email', field: 'email' }
    ],
    formErrors: { emailError: '', fullNameError: '', permissionGroupsError: '' }

//

<MaterialTable

    icons={tableIcons}
    columns={this.state.columns}
    data={this.props.rows}
    editable={{
        onRowUpdate: (newData, oldData) =>
        new Promise((resolve, reject) => {
            setTimeout(() => {
            if (this.checkValidation()){

                resolve();
            }                                
            reject();
            }, 600);
        }),
        onRowAdd: newData =>
        new Promise((resolve, reject) => {
            setTimeout(() => {
            if (this.checkValidation()) {

                resolve();
            }
            reject();
            }, 600);
        }),
    }}
/>

Answer 1

That is a little bit tricky. You need to override the editComponent to show the error messages. For that, you could block the onChange function passed to editComponent and use hooks to keep a local state. The local state handles the new input and the validation. THe content is only passed back to the table, if the validation succeed.

Here is a sandbox for you to check out.