react material-table won't render icon when clicked

1
votes

I have searched for a few days. Until now I cannot figured it out. I want my visibility icon change to hide, when clicked. But I don't know why it not automatically rendering. I must to type something on search bar to get the visibility_off icon.

I read documentation but, it not works https://material-table.com/#/docs/features/actions and this https://material-table.com/#/docs/features/component-overriding

this my code 

(rowData) => (
            rowData.isActive === 1 ?
                {
                    icon: "visibility_off",
                    tooltip: "Hide Row",
                    onClick: () => {

                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);

                        /*// console.log(row.tableData.id);
                        //find index
                        console.log(data[row.tableData.id]);
                        //change the data value
                        data[row.tableData.id].isActive = 0;


                        //set data with new data
                        setData(data);*/
                    },
                } :
                {
                    icon: "visibility",
                    tooltip: "Show Row",
                    onClick: () => {
                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);
                    },
                }

And this is the full code.

const [tableConfig, setTableConfig] = useState({
    columns:[
        { title: "ID", field: "processID" },
        { title: "Config Name", field: "configName" },
        { title: "Status", field: "processStatus" },
        { title: "Progress", field: "progressPercentage", type: "numeric" },
        { title: "Start Time", field: "lastStartDateTime", type: "datetime" },
        { title: "End Time", field: "lastEndDateTime", type: "datetime" },
        { title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
        { title: "Total Output Records", field: "masterRecords", type: "numeric" },
    ],
    data:[
        {
            processID: "191030070911880",
            configName: "Test2333",
            configDesc: "191030070911880 Test2333",
            userID: "1",
            createdDateTime: "2019-10-30 03:10:06.844",
            lastModifiedDateTime: "2020-01-18 02:24:59.051",
            isActive: 0,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:32:45.976",
            lastEndDateTime: "2020-01-18 02:32:56.197",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "191030072229070",
            configName: "Testimony2",
            configDesc: "191030072229070 Testimony2",
            userID: "1",
            createdDateTime: "2019-10-30 03:22:34.732",
            lastModifiedDateTime: "2019-10-30 03:22:34.732",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "error",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:32:36.533",
            lastEndDateTime: "2020-01-18 02:32:36.566",
            lastInputRecords: 15,
            masterRecords: 0,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "191030084112873",
            configName: "Testimony3",
            configDesc: "191030084112873 Testimony3",
            userID: "1",
            createdDateTime: "2019-10-30 04:41:19.856",
            lastModifiedDateTime: "2019-10-30 04:41:19.856",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "error",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:33:59.231",
            lastEndDateTime: "2020-01-18 02:33:59.256",
            lastInputRecords: 15,
            masterRecords: 0,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "191104084001318",
            configName: "TestA",
            configDesc: "191104084001318 TestA",
            userID: "1",
            createdDateTime: "2019-11-04 03:40:44.697",
            lastModifiedDateTime: "2019-11-04 05:45:45.388",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2019-11-04 05:43:56.451",
            lastEndDateTime: "2019-11-04 05:44:06.846",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "adv191104084317062",
            configName: "TestA1",
            configDesc: "adv191104084317062 TestA1",
            userID: "1",
            createdDateTime: "2019-11-04 03:43:29.58",
            lastModifiedDateTime: "2019-11-04 05:45:45.732",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2019-11-04 05:43:49.78",
            lastEndDateTime: "2019-11-04 05:44:01.566",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "adv191128105553518",
            configName: "TestAAA",
            configDesc: "adv191128105553518 TestAAA",
            userID: "1",
            createdDateTime: "2019-11-28 05:56:00.845",
            lastModifiedDateTime: "2019-11-28 06:21:04.551",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:34:04.565",
            lastEndDateTime: "2020-01-18 02:34:15.933",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        }
    ],
    actions:[
        {
            icon: "play_arrow",
            tooltip: "Run",
            onClick: () => {
                console.log("run button is clicked");
            }
        },
        {
            icon: "description",
            tooltip: "Summary",
            onClick: () => {
                console.log("summary button is clicked");
            }
        },
        {
            icon: "edit",
            tooltip: "Edit",
            onClick: (event, row) => {
                // console.log(row.tableData.id);
                //cari indeks
                /*console.log(data[row.tableData.id]);
                //ganti data yang mau diganti
                data[row.tableData.id].configName = "ase";

                //mengembalikan data dengan isi yang sama persis seperti sebelumnya
                setData(data);*/
            }
        },
        {
            icon: "file_copy",
            tooltip: "Clone",
            onClick: () => {
                console.log("clone button is clicked");
            }
        },
        {
            icon: "delete",
            tooltip: "Delete",
            onClick: () => {
                console.log("Delete button is clicked");
            }
        },
        (rowData) => (
            rowData.isActive === 1 ?
                {
                    icon: "visibility_off",
                    tooltip: "Hide Row",
                    onClick: () => {

                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);

                        /*// console.log(row.tableData.id);
                        //cari indeks
                        console.log(data[row.tableData.id]);
                        //ganti data yang mau diganti
                        data[row.tableData.id].isActive = 0;

                        //mengembalikan data dengan isi yang sama persis seperti sebelumnya
                        setData(data);*/
                    },
                } :
                {
                    icon: "visibility",
                    tooltip: "Show Row",
                    onClick: () => {
                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);
                    },
                }
        )
    ]
});

and this is the result. Please help me. Thank you.

Code Result

NB: because of my reputation. I cannot post image here. Sorry

1
reactjsmaterial-uimaterial-table
The code that you share columns state or JSX part? can you share entire of your code - atadnmz

1 Answers

0
votes

First of all you can separate your actions array.

  const actions = [
        {
            icon: "description",
            tooltip: "Run",
            onClick: () => {
                console.log("run button is clicked");
            }
        },
        {
            icon: "description",
            tooltip: "Summary",
            onClick: () => {
                console.log("summary button is clicked");
            }
        },
        {
            icon: "edit",
            tooltip: "Edit",
            onClick: (event, row) => { }
        }, {
            icon: "visibility_off",
            tooltip: "Hide Row",
            onClick: () => { },
        },
        (rowData) => {
            return {
                icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
                tooltip: "Hide Row",
                onClick: (event, row) => {
                    clickHandler(row)
                }
            }
        }
    ];
    const [tableConfig, setTableConfig] = React.useState({
        columns: [
            { title: "ID", field: "processID" },
            { title: "Config Name", field: "configName" },
            { title: "Status", field: "processStatus" },
            { title: "Progress", field: "progressPercentage", type: "numeric" },
            { title: "Start Time", field: "lastStartDateTime", type: "datetime" },
            { title: "End Time", field: "lastEndDateTime", type: "datetime" },
            { title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
            { title: "Total Output Records", field: "masterRecords", type: "numeric" },
        ],
        data: [
            {
                processID: "191030070911880",
                configName: "Test2333",
                configDesc: "191030070911880 Test2333",
                userID: "1",
                createdDateTime: "2019-10-30 03:10:06.844",
                lastModifiedDateTime: "2020-01-18 02:24:59.051",
                isActive: 0,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:32:45.976",
                lastEndDateTime: "2020-01-18 02:32:56.197",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "191030072229070",
                configName: "Testimony2",
                configDesc: "191030072229070 Testimony2",
                userID: "1",
                createdDateTime: "2019-10-30 03:22:34.732",
                lastModifiedDateTime: "2019-10-30 03:22:34.732",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "error",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:32:36.533",
                lastEndDateTime: "2020-01-18 02:32:36.566",
                lastInputRecords: 15,
                masterRecords: 0,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "191030084112873",
                configName: "Testimony3",
                configDesc: "191030084112873 Testimony3",
                userID: "1",
                createdDateTime: "2019-10-30 04:41:19.856",
                lastModifiedDateTime: "2019-10-30 04:41:19.856",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "error",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:33:59.231",
                lastEndDateTime: "2020-01-18 02:33:59.256",
                lastInputRecords: 15,
                masterRecords: 0,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "191104084001318",
                configName: "TestA",
                configDesc: "191104084001318 TestA",
                userID: "1",
                createdDateTime: "2019-11-04 03:40:44.697",
                lastModifiedDateTime: "2019-11-04 05:45:45.388",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2019-11-04 05:43:56.451",
                lastEndDateTime: "2019-11-04 05:44:06.846",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "adv191104084317062",
                configName: "TestA1",
                configDesc: "adv191104084317062 TestA1",
                userID: "1",
                createdDateTime: "2019-11-04 03:43:29.58",
                lastModifiedDateTime: "2019-11-04 05:45:45.732",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2019-11-04 05:43:49.78",
                lastEndDateTime: "2019-11-04 05:44:01.566",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "adv191128105553518",
                configName: "TestAAA",
                configDesc: "adv191128105553518 TestAAA",
                userID: "1",
                createdDateTime: "2019-11-28 05:56:00.845",
                lastModifiedDateTime: "2019-11-28 06:21:04.551",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:34:04.565",
                lastEndDateTime: "2020-01-18 02:34:15.933",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            }
        ],

    });

As you can see I added clikHandler() function in your action array. This is for setting your tableconfig. You set tableConfig in a wrong way. You can check how to set immutable way your state.

const clickHandler = (rowData) => {
        setTableConfig({
            columns: [...tableConfig.columns],
            data: tableConfig.data.map((item, index) => {
                if (index !== rowData.tableData.id) {
                    return { ...item }
                }
                return {
                    ...item,
                    isActive: item.isActive === 1 ? 0 : 1
                }
            })
        });
    }

btw you should change your action in your jsx part as actions={actions} You can see the working example Trial

Note

In functional component setState does not pretend to merge entire states. You have to merge yourselves.