Как перейди на другую страницу по клику на строку в useTable
Сделал таблицу в useTable. А как по клику на сообщение (т.е. на строку row) переходить на другую страницу? куда только Link не добавлял.
const COLUMNS = [
{
Header: "Дата",
accessor: "createdAt",
disableFilters: true,
sticky: "left",
Cell: ({ value }) => {
return format(new Date(value), "dd/MM/yyyy");
},
},
{
Header: "Ф.И.О.",
accessor: "ownerFullName",
sticky: "left",
},
{
Header: "Модель",
accessor: "type",
sticky: "left",
},
{
Header: "Цвет",
accessor: "Цвет",
},
{
Header: "Delete",
id: "_id",
accessor: "_id",
Cell: (tableProps) => (
<img
src={del2}
className="delete"
onClick={() => deleteRow(tableProps)}
></img>
),
},
];
const columns = useMemo(() => COLUMNS, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
selectedFlatRows,
} = useTable({
columns,
data,
});
return (
<>
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
console.log(cell);
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
);
})}
</tr>
);
})}
</tbody>
</table>
</>
);
Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
В компонент добавляем хук useNavigate и функцию для обработки события нажатия кнопки мыши(клик):
const route = useNavigate();
const hClick = (link) => {
route(link); // Меняем link
};
В tr добавляем событие onClick в котором вызываем фукнцию и передаем нужный линк(в примере ниже `/${row.id}`, это просто пример, надо поменять на вашу нужную ссылку)
<tr onClick={() => hClick(`/${row.id}`)} {...row.getRowProps()}>
Либо можно обойтись без фукнции hClick так:
<tr onClick={() => route(`/${row.id}`)} {...row.getRowProps()}>