Group rows programatically

[natashajaved]

I have an external filter for groupBy and on change of it's value I need to group rows according to that selected options.

I have options like Date, User, Name etc and need to group rows on basis of the selected option.
I went through the example provided for grouping though it is triggered when column is clicked, whereas I want the grouping to occur when that filter value changes.

Would appreciate the suggestions.

Have tried to groupBy programatically for column date. Though I get "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate"

const columns = React.useMemo( () => [ { Header: "Date/Time", accessor: "date", Cell: row => { console.log("date",{row},row.column); if (watch("groupBy") === "Date" && !row.column.isGrouped) { row.column.toggleGroupBy(row.column.id, true); } return ( <span> {moment(row.value).format("DD/MM/YYYY - hh:mm A")} </span> ); } }, { Header: "Name", accessor: "name" }, { Header: "Room", accessor: "room" }, { Header: "Type", accessor: "type" }, { Header: "Notes", accessor: "notes" }, { Header: "Quantity", accessor: "quantity", Footer: () => { return ( <span className="font-weight-bold flex justify-content-lg-end"> Total </span> ); } }, { Header: "Debit", accessor: "debit", aggregate: "sum", Aggregated: ({ value }) => ${value} (total), Cell: row => { console.log(row); const adjust = row.row.original?.transactionType === "Adjust"; return ( <span className={${adjust ? "color_red" : ""}}> {row.value ? adjust ? (Rs ${row.value}):Rs ${row.value}: ""} </span> ); }, // Footer: "Rs 500" Footer: totalDebit ?Rs ${totalDebit} : "" }, { Header: "Credit", accessor: "credit", Cell: row => { console.log(row); const refund = row.row.original?.transactionType === "Refund"; return ( <span className={${
row.row.original?.transactionType === "Refund"
? "color_red"
: ""
}} > {row.value ? refund ? (Rs ${row.value}):Rs ${row.value}: ""} </span> ); }, //Footer: "Rs 500" Footer: totalCredit ?Rs ${totalCredit}` : ""
},
{
Header: "",
accessor: "options",
disableSortBy:true,
Cell: props => {
const data = props.row.original;

                const options =
                    data?.allocated ||
                    data?.paymentType === paymentTypes.EXPENSE
                        ? folioOptions.filter((op, i) => i === 0)
                        : data?.transactionType === "Refund"
                        ? [folioOptions[0], "Refund Allocation"]
                        : folioOptions;
                return (
                    <div className="dropdown mr-3">
                        <button
                            className="btn bg_red d-flex align-items-center px-2"
                            data-toggle="dropdown"
                        >
                            <i className="fal fa-cog font_20"></i>
                            <i className="fal fa-angle-down font_20 ml-3"></i>
                        </button>
                        <div className="dropdown-menu dropdown-menu-right">
                            {options.map((option, index) => (
                                <span
                                    style={{ cursor: "pointer" }}
                                    className="dropdown-item"
                                    onClick={() => {
                                        if (index === 0) {
                                            setVoidModal({
                                                paymentType:
                                                    data?.paymentType,
                                                show: true
                                            }),
                                                setSelectedTransaction(
                                                    data
                                                );
                                            return;
                                        }
                                        if (
                                            data?.transactionType ===
                                            "Refund"
                                        ) {
                                            return dispatch(
                                                showAllocateRefModal(
                                                    data?.credit
                                                )
                                            );
                                        }
                                        dispatch(
                                            showAllocatePayModal(
                                                data?.credit
                                            )
                                        );
                                    }}
                                >
                                    {option}
                                </span>
                            ))}
                        </div>
                    </div>
                );
            }
        }
    ],
    [transacactions, totalCredit, totalDebit]
); `