make whole row clickable

Question

i'm new on react(hooks) typescript, trying to learn by doing, here i have created antd table(which works), on the right side of table is 'Edit' it is clickable and works well, but my question is how to make each row clickable instead of that 'Edit'? like i could click anywhere on the row and it should take me to its 'Edit' link instead of me clicking just on 'Edit':

 import { useTranslation } from "react-i18next"; const { t } = useTranslation(); const columns = [ { title: t("tilaus.state"), dataIndex: "state", key: "state", render: (value: OrderState) => ( <span className="material-icons"> </span> ), }, { title: t("request.parcelId"), dataIndex: "parcelId", key: "parcelId", }, { title: t("request.date"), dataIndex: "date", key: "date", render: (value: Date) => <div>{value.toLocaleDateString("af-AF")}</div>, }, { title: t("request.sender"), dataIndex: "sender", key: "sender", render: (value: CustomerDto) => <div>{value.name}</div>, }, { title: t("request.recipient"), dataIndex: "recipient", key: "recipient", render: (value: CustomerDto) => <div>{value.name}</div>, }, { title: t("request.price"), dataIndex: "price", key: "price", }, { title: "", dataIndex: "id", key: "id", render: (value: string) => ( <Link to={"details/" + value}>{t("request.edit")}</Link> ), }, ]; <Table dataSource={orders} columns={columns} pagination={false} scroll={{ x: true }} onRow={(record, rowIndex) => { return { onClick: (event) => { handleClick(record); }, }; }} />

Answer 1

Looks like you are using ant.d table . I've grabbed one of the examples and console logged the output. You can find it here: https://codesandbox.io/s/s1xds?file=/index.js to show you how the onclick in the entire row is being triggered.

For your specific thing, you need to change onRow prop. You can't add a Link directly to the row, but you can use history from react-router (if you are using it, docs here ) or directly mutate the URL when onclick is called.

So in your case, you'll have to do this:

<Table
            
            dataSource={orders}
            columns={columns}
            pagination={false}
            scroll={{ x: true }}
            onRow={(record, rowIndex) => {
              return {
                onClick: (event) => {
                  history.push(`/details/${record.id}`);
                },
              };
            }}
          />

or

<Table
            
            dataSource={orders}
            columns={columns}
            pagination={false}
            scroll={{ x: true }}
            onRow={(record, rowIndex) => {
              return {
                onClick: (event) => {
                  window.location.href = `${window.location.href}/details/${record.id}`
                },
              };
            }}
          />