How can I override Actions to have a dialog popup for entering new data instead of inline data entry of Material-Table

[Vinayak-SP]

I need to override the Add button (+ button) and edit button of material-table (marked in the sample image attached), instead of inline adding/editing feature of material-table I want to have a Dialog box (my customized component) should popup in which users will enter their data, then on clicking save button an API call will be performed.

Is there a way to do it? Can I use EditRow props of Materialtable? If yes can someone give a small example of it on how to use EditRow?

[oze4]

@Vinayak-SP thank you for your question!

What you are looking for is called actions - there should be enough info in the docs to help you get this sorted out, but please feel free to reopen if you need additional help!

[Vinayak-SP]

@Vinayak-SP thank you for your question!

What you are looking for is called actions - there should be enough info in the docs to help you get this sorted out, but please feel free to reopen if you need additional help!

@oze4 I don't think you have gone through my issue completely. I know about actions and I don't think the examples and properties explained there will help me much. I'm asking how can I completely override the Actions and bring my own component for Adding/Editing instead of default inline adding/editing.

Please re-open this issue (I can't re-open myself as a contributor has closed it)

[oze4]

@Vinayak-SP I have reopened the issue. Although, actions allow you to do exactly what you just said you want to do.

[Vinayak-SP]

@oze4 My bad for editing I overlooked it. I found for editing in Actions, but not for Adding from the toolbar of the table. Can you guide me to an example for adding by click add button of the toolbar ?

[oze4]

@Vinayak-SP sure - this is something I threw together real quick, please let me know if you have any questions.

You can check out a live demo here

MyDialog.js

import React from 'react';
import { Dialog, DialogTitle } from '@material-ui/core';

const MyDialog = props => {
  const { 
    isOpen = false, 
    onClose = () => {}, 
    title = 'My Dialog', 
    children, 
    ...rest 
  } = props;

  const handleClose = event => {
    onClose(event);
  };

  return (
    <Dialog onClose={handleClose} open={isOpen}>
      <DialogTitle>{title}</DialogTitle>
      {children}
    </Dialog>
  );
}

export default MyDialog;

index.js

import React, { Fragment, useState, useEffect } from "react";
import { render } from "react-dom";

import { Button, TextField, Paper } from "@material-ui/core";
import { Add as AddIcon } from "@material-ui/icons";
import MaterialTable from "material-table";

import MyDialog from './MyDialog.js';
import tableIcons from "./TableIcons.js";

const rando = max => Math.floor(Math.random() * max);

const words = ["Paper", "Rock", "Scissors"];

const rawData = [];
for (let i = 0; i < 100; i++) {
  rawData.push({ id: rando(300), word: words[i % words.length] });
}

const columns = [
  { title: "Id", field: "id" },
  { title: "Word", field: "word" }
];

const App = () => {
  const [data, setData] = useState(rawData);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [dialogWord, setDialogWord] = useState('');
  const [dialogId, setDialogId] = useState('');

  const handleDialogClose = event => {
    setIsDialogOpen(false);
  }

  const handleId = event => {
    setDialogId(event.target.value);
  }

  const handleWord = event => {
    setDialogWord(event.target.value);
  }

  const handleAddNewRow = event => {
    if (!dialogId || !dialogWord) return;

    setData(
      // Here you can add the new row to whatever index you want
      [{ id: dialogId, word: dialogWord }, ...data]
    );
  }

  useEffect(() => {
    // Closes dialog after saving
    if (isDialogOpen) {
      setIsDialogOpen(false);
    }
  }, [data]);

  useEffect(() => {
    // Clears the inputs if `isDialogOpen` equals `false`
    if (!isDialogOpen) {
      setDialogId('');
      setDialogWord('');
    }
  }, [isDialogOpen]);

  const actions = [
    {
      icon: () => <AddIcon />,
      tooltip: 'Add User',
      isFreeAction: true,
      onClick: (event, rowData) => {
        setIsDialogOpen(true);
      },
    },
  ];

  return (
    <Fragment>
      <MaterialTable
        data={data}
        columns={columns}
        actions={actions}
        title="Custom Add Row"
        icons={tableIcons}
      />

      <MyDialog title="Add User" isOpen={isDialogOpen} onClose={handleDialogClose}>
        <Paper style={{ padding: '2em' }}>
          <div><TextField value={dialogId} onInput={handleId} label="Id" /></div>
          <div><TextField value={dialogWord} onInput={handleWord} label="Word" /></div>
          <div style={{ marginTop: '3em' }}>
            <Button onClick={handleAddNewRow}>Save</Button>
            <Button onClick={handleDialogClose}>Cancel</Button>
          </div>
        </Paper>
      </MyDialog>
    </Fragment>
  );
};

render(<App />, document.querySelector("#root"));

[Vinayak-SP]

@oze4 I was unable to understand the use of isFreeAction property and I didn't tried it. This example showed me the light. A great example indeed, thanks a lot!
I recommend this example should be included in actions example
Closing this issue as it resolved my questions.

[bahiraee]

How to override edit row onClick so that a dialog message can be displayed before editing?