3

I'm using the material-table library: https://material-table.com/#/

I created a reusable component, so I created a table with a column and a data. I set up the edition and the update. however, I find myself having to manage in BACK the verification of the data that the user enters. I would like to set up the same system as on Forms with a validation scheme like yup.

Here is the code:

<Table 
    title="List type tiers"
    column={[{ title: 'TYPE TIERS', field: 'libelle' }]}
    data={tiersList}
    isLoading={isLoading}
    editable={{
        onRowAdd: newData =>
            new Promise(resolve => {
                setIsLoading(true);
                setTimeout(() => {  
                    addTypeTiers(newData.libelle)
                        .then(() => {
                            recuperationListTiers();
                        })
                    resolve();
                }, 600);
            }),
        onRowUpdate: (newData) =>
            new Promise(resolve => {
                setIsLoading(true);
                setTimeout(() => {
                    updateTypeTiers(newData.id, newData.libelle)
                        .then(() => {
                            recuperationListTiers();
                        })
                    resolve();
                }, 600);
            }),
    }}
    pageSize={pageSize}
    initialPage={initialPage}
    search
    paging
    headerStyle={{ height: '15px', minHeight: 'unset', fontWeight: 'bold', color: 'white', padding: '5px 40px 5px 16px', backgroundColor: 'grey' }}
/>
Paul Hub
  • 141
  • 1
  • 9

1 Answers1

0

You will need to override EditRow and/or EditField components with the logic of your own (simply copy paste them to your project and patch accordingly) and then feed those overrides to the material-table config via components property.

I'm afraid no other way around this at the moment.

jayarjo
  • 16,124
  • 24
  • 94
  • 138
  • Is there a way to disable edit button on validation ? Like I have an editable Textfield. When the value is changed, I need to disable editable button (for save) if a validation is failed. I was able to fire a validation and return. But it closes the editable field to the previous value. What I need is either disable save(edit) button or stay the row open (editing mode) even the save button is clicked (and if the validation is failed ofc). – Thidasa Pankaja Oct 23 '19 at 11:09