Below is the code I am using for generating a table.

I need to make each row clickable and navigate to different page. How to do that?

import { useMemo, useState, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { DataGrid, KeenIcon, TDataGridRequestParams } from '@/components'; import { ColumnDef } from '@tanstack/react-table'; import axios from 'axios'; import { FetchLicensesResponse, LicenseModel } from '@/providers'; import { enqueueSnackbar } from 'notistack'; import { Container } from '@/components/container'; import { LicenseViewModal } from './LicenseViewModal';

const LicenseTable = () => { const navigate = useNavigate(); const location = useLocation();

const [viewLicenseModal, setViewLicenseModal] = useState(false);
const [selectedLicenseId, setSelectedLicenseId] = useState("");

useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
    const licenseId = queryParams.get('licenseId');
    const modalOpen = queryParams.get('modal') === 'true';

    if (modalOpen && licenseId) {
        setSelectedLicenseId(licenseId);
        setViewLicenseModal(true);
    }
}, [location.search]);

const handleSettingsModalClose = () => {
    setViewLicenseModal(false);
    navigate(location.pathname);
};

const handleLicenseViewAction = (licenseId: string) => {
    navigate(`/license/${licenseId}`)
    // navigate(`?modal=true&licenseId=${licenseId}`);
};

const columns = useMemo<ColumnDef<LicenseModel>[]>(
    () => [
        {
            accessorFn: (row) => row,
            id: 'licenseName',
            header: () => 'Name',
            cell: (info) => info.row.original.LicenseName,
            meta: { headerClassName: 'min-w-[180px]' },
        },
        {
            accessorFn: (row) => row,
            id: 'licenseType',
            header: () => <div className='text-center'>Type</div>,
            cell: (info) => <div className='text-center'>{info.row.original.LicenseType}</div>,
            meta: { headerClassName: 'min-w-20' },
        },
        {
            accessorFn: (row) => row,
            id: 'organisation',
            header: () => 'Organisation',
            cell: (info) =>
                info.row.original.Organisation || <div>---</div>,
            meta: { headerClassName: 'min-w-[180px]' },
        },
        {
            accessorFn: (row) => row,
            id: 'unit',
            header: () => 'Unit',
            cell: (info) =>
                info.row.original.Unit || <div>---</div>,
            meta: { headerClassName: 'min-w-[180px]' },
        },
        {
            accessorFn: (row) => row,
            id: 'revoked',
            header: () => <div className='text-center'>Revoked</div>,
            cell: (info) =>
                <div className='text-center'>
                    <span className={`badge badge-sm ${info.row.original.Revoked ? 'badge-danger' : 'badge-success'} badge-outline`}>
                        {info.row.original.Revoked ? <KeenIcon icon="check" /> : <KeenIcon icon="cross" />}
                    </span>
                </div>,
            meta: { headerClassName: 'min-w-10 text-center' },
        },
        {
            accessorFn: (row) => row,
            id: 'action',
            header: () => <div className='text-center'>Action</div>,
            cell: (info) => (
                <div className="flex flex-wrap gap-5 justify-center">
                    <div className="flex">
                        <button
                            className="btn btn-sm btn-primary btn-outline"
                            data-toggle="tooltip"
                            title="View details"
                            onClick={() => handleLicenseViewAction(info.row.original.LicenseId)}
                        >
                            <KeenIcon icon="eye" />
                        </button>
                    </div>
                    <div className="flex">
                        <button
                            className="btn btn-sm btn-danger btn-outline"
                            data-toggle="tooltip"
                            title="Deactivate"
                        >
                            <KeenIcon icon="shield-slash" />
                        </button>
                    </div>
                </div>
            ),
            meta: { headerClassName: 'min-w-5 text-center' },
        },
    ],
    []
);

const onFetchData = async (params: TDataGridRequestParams) => {
    try {
        const offset = params.pageIndex * params.pageSize;

        const response = await axios.post<FetchLicensesResponse>(
            `${import.meta.env.VITE_APP_API_URL}/license/fetch`,
            { maxEntries: params.pageSize, offset }
        );

        return {
            data: response.data.licenses || [],
            totalCount: 30,
            offset,
            nextOffset: offset + params.pageSize,
        };
    } catch (error) {
        console.error('Failed to fetch data:', error);
        enqueueSnackbar('An error occurred while fetching data. Please try again later', {
            variant: 'solid',
            state: 'danger',
        });

        return {
            data: [],
            totalCount: 0,
            offset: 0,
        };
    }
};

return (
    <>
        <div className="card card-grid min-w-full">
            <div className="card-header flex-wrap gap-2">
                <h3 className="card-title font-medium text-sm">Your Licenses</h3>
            </div>
            <div className="card-body">
                <DataGrid
                    layout={{ card: true, cellBorder: false }}
                    columns={columns}
                    serverSide={true}
                    onFetchData={onFetchData}
                    rowSelection={false}
                    pagination={{ size: 10 }}
                />
            </div>
        </div>
        <Container>
            <LicenseViewModal
                open={viewLicenseModal}
                onOpenChange={handleSettingsModalClose}
                licenseId={selectedLicenseId}
            />
        </Container>
    </>
);

};

export { LicenseTable };