Confirmation for custom action in Material Tabel [React]

Question

Is it possible to add confirmation to custom action for example

actions={[
    {
      icon: 'save',
      tooltip: 'Confirm',
      onClick: (event, rowData) => { /* something */}
    }
  ]}

I want to something like in editable.onRowDelete:

EDIT: I want to create my own action in actions property. For example action of Cancel reservation. After click this action button this row change like above and waiting for acceptation. After confirm it do something (for example post to API).

Maddi

Seems like it is possible with component overriding. – Hicks

Answer 1

Hi you can check this example:

import React from 'react';
import MaterialTable from 'material-table';

export default function MaterialTableDemo() {
    const [state, setState] = React.useState({
        columns: [
            {title: 'Name', field: 'name'},
            {title: 'Surname', field: 'surname'},
            {title: 'Birth Year', field: 'birthYear', type: 'numeric'},
            {
                title: 'Birth Place',
                field: 'birthCity',
                lookup: {34: 'İstanbul', 63: 'Şanlıurfa'},
            },
        ],
        data: [
            {name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63},
            {
                name: 'Zerya Betül',
                surname: 'Baran',
                birthYear: 2017,
                birthCity: 34,
            },
        ],
    });

    return (
        <MaterialTable
            title="Editable Example"
            columns={state.columns}
            data={state.data}
            editable={{
                onRowAdd: (newData) =>
                    new Promise((resolve) => {
                        setTimeout(() => {
                            resolve();
                            setState((prevState) => {
                                const data = [...prevState.data];
                                data.push(newData);
                                return {...prevState, data};
                            });
                        }, 600);
                    }),
                onRowUpdate: (newData, oldData) =>
                    new Promise((resolve) => {
                        setTimeout(() => {
                            resolve();
                            if (oldData) {
                                setState((prevState) => {
                                    const data = [...prevState.data];
                                    data[data.indexOf(oldData)] = newData;
                                    return {...prevState, data};
                                });
                            }
                        }, 600);
                    }),
                onRowDelete: (oldData) =>
                    new Promise((resolve) => {
                        setTimeout(() => {
                            resolve();
                            setState((prevState) => {
                                const data = [...prevState.data];
                                data.splice(data.indexOf(oldData), 1);
                                return {...prevState, data};
                            });
                        }, 600);
                    }),
            }}
        />
    );
}

Source

Updated Code

import React, {forwardRef} from 'react';
import MaterialTable from 'material-table';

import {AddBox, ArrowUpward, Check, ChevronLeft, ChevronRight, Clear, DeleteOutline, Edit, FilterList, FirstPage, LastPage, Remove, Save, SaveAlt, Search, ViewColumn} from '@material-ui/icons';

export default function MaterialTableDemo() {
    const [state, setState] = React.useState({
        columns: [
            {title: 'Name', field: 'name'},
            {title: 'Surname', field: 'surname'},
            {title: 'Birth Year', field: 'birthYear', type: 'numeric'},
            {
                title: 'Birth Place',
                field: 'birthCity',
                lookup: {34: 'İstanbul', 63: 'Şanlıurfa'},
            },
        ],
        data: [
            {name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63},
            {
                name: 'Zerya Betül',
                surname: 'Baran',
                birthYear: 2017,
                birthCity: 34,
            },
        ],
    });

    const tableIcons = {
        Add: forwardRef((props, ref) => <AddBox {...props} ref={ref}/>),
        Save: forwardRef((props, ref) => <Save {...props} ref={ref}/>),
        Check: forwardRef((props, ref) => <Check {...props} ref={ref}/>),
        Clear: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),
        Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref}/>),
        DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),
        Edit: forwardRef((props, ref) => <Edit {...props} ref={ref}/>),
        Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref}/>),
        Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref}/>),
        FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref}/>),
        LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref}/>),
        NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),
        PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref}/>),
        ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),
        Search: forwardRef((props, ref) => <Search {...props} ref={ref}/>),
        SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref}/>),
        ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref}/>),
        ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref}/>)
    };

    function clickHandler(event) {
        alert('worked');
    }

    return (
        <MaterialTable
            icons={tableIcons}
            title="Editable Example"
            columns={state.columns}
            data={state.data}
            actions={[
                {
                    icon: tableIcons.Save,
                    tooltip: 'Save User',
                    onClick: (event, rowData) => alert("You saved " + rowData.name)
                }
            ]}
        />
    );
}

Ladle

Thanks for your answer. Actually I mean that I create my own action in actions property. For example action Cancel reservation. After click this action button this row change like above and waiting for acceptation. After confirm it do something (for example post to API). – Maddi

@Maddi I have added another example. Please check it, hope it helps you. – Ladle

This is not what I wanted. I just updated the image to perform to you my expected effect. I am thinking about effect after clicking delete button but for custom action (using action property). For example let's see on your example above. After clicking Save user button this row changes into confirmation Are you sure you want to save this user ? After clicking cancel it reterns to previous view. After clicking save/submit it executes some method. – Maddi

I understand but that will tough I think. why not you use confirmation dialogue and gets user's decision like yes or no and then you can call other method based on the decision. – Ladle