Material-table: Is there a way to open modal to edit the row data when user clicked on action ?

[kaleshasheik]

Hi,

I believe, we don't have in-line editing data feature.

Is it possible to open modal to modify the row data and submit it when action was clicked ?

Thanks,

[mbrn]

Hi @kaleshasheik ,

You can use actions to open your own dialog.

Example:

        <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          actions={[
            {
              icon: 'edit',
              onClick: rowData => {
                // open dialog and fill your data to update
              }
            },
            {
              icon: 'add',
              isFreeAction: true,
              onClick: () => {
                // open dialog to save new one
              }
            }
          ]}
        />

[kaleshasheik]

Hi @kaleshasheik ,

You can use actions to open your own dialog.

Example:

        <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          actions={[
            {
              icon: 'edit',
              onClick: rowData => {
                // open dialog and fill your data to update
              }
            },
            {
              icon: 'add',
              isFreeAction: true,
              onClick: () => {
                // open dialog to save new one
              }
            }
          ]}
        />

I tried this.. But no dialog opened.

columns={[
{ title: 'Adı', field: 'name' },
{ title: 'Soyadı', field: 'surname' },
{ title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
{ title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
]}

      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      ]}


      title="Demo Title"
      actions={[
        {
          icon: 'edit',
          onClick: rowData => {

            <Dialog
      open={true}


      aria-labelledby="draggable-dialog-title"
    >   
      <DialogTitle id="draggable-dialog-title">Subscribe</DialogTitle>
      <DialogContent>
        <DialogContentText>
          To subscribe to this website, please enter your email address here. We will send
          updates occasionally.
        </DialogContentText>
      </DialogContent>
      </Dialog>

          }
        },
        {
          icon: 'add',
          isFreeAction: true,
          onClick: () => {
            // open dialog to save new one
          }
        }
      ]}
    />

[mbrn]

You should draw your dialog somewhere else.

 <div>
 <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          actions={[
            {
              icon: 'edit',
              onClick: rowData => {
               this.setState({dialogOpen: true});
              }
            },
            {
              icon: 'add',
              isFreeAction: true,
              onClick: () => {
                // open dialog to save new one
              }
            }
          ]}
        />

<Dialog
      open={this.state.dialogOpen}
      aria-labelledby="draggable-dialog-title"
    >   
      <DialogTitle id="draggable-dialog-title">Subscribe</DialogTitle>
      <DialogContent>
        <DialogContentText>
          To subscribe to this website, please enter your email address here. We will send
          updates occasionally.
        </DialogContentText>
      </DialogContent>
      </Dialog>
</div

[kaleshasheik]

You should draw your dialog somewhere else.

 <div>
 <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          actions={[
            {
              icon: 'edit',
              onClick: rowData => {
               this.setState({dialogOpen: true});
              }
            },
            {
              icon: 'add',
              isFreeAction: true,
              onClick: () => {
                // open dialog to save new one
              }
            }
          ]}
        />

<Dialog
      open={this.state.dialogOpen}
      aria-labelledby="draggable-dialog-title"
    >   
      <DialogTitle id="draggable-dialog-title">Subscribe</DialogTitle>
      <DialogContent>
        <DialogContentText>
          To subscribe to this website, please enter your email address here. We will send
          updates occasionally.
        </DialogContentText>
      </DialogContent>
      </Dialog>
</div

Thank you

[p9614]

@kaleshasheik Do not have problems entering the data with the dialog?

[ardie85]

You should draw your dialog somewhere else.

 <div>
 <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          actions={[
            {
              icon: 'edit',
              onClick: rowData => {
               this.setState({dialogOpen: true});
              }
            },
            {
              icon: 'add',
              isFreeAction: true,
              onClick: () => {
                // open dialog to save new one
              }
            }
          ]}
        />

<Dialog
      open={this.state.dialogOpen}
      aria-labelledby="draggable-dialog-title"
    >   
      <DialogTitle id="draggable-dialog-title">Subscribe</DialogTitle>
      <DialogContent>
        <DialogContentText>
          To subscribe to this website, please enter your email address here. We will send
          updates occasionally.
        </DialogContentText>
      </DialogContent>
      </Dialog>
</div

Hello,
I'm still confused where does the

[saeidalidadi]

I have a complicated use case that after the row is in edit state I need to open new dialog and adding new fields to the row, now the problem is that row goes to not editable state after that dialog is opened.