使整行被点击而不是单元格 react-table v7
Make the entire row to be clicked instead of cell react-table v7
我有一个使用 react-table v7 的 table。我包含的功能之一是使单元格可点击并重定向到特定 link。我想让整行而不是单元格可单击,但应该重定向到与单击单元格时相同的 link。
我怎样才能做到这一点?
下面是我在列中点击的实现。谢谢
.......
const columns = useMemo(
() => [
{
Header: 'Task Name',
accessor: 'name',
Cell:e =><Link to={`${e.value}/runs`}>{e.value}</Link>,**//clickable cell**
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
{
Header: 'Square',
accessor: d => `${d.module.name} ${d.function}`,
disableSortBy: true,
disableFilters : true,
},
{
Header: 'Schedule',
accessor: 'schedules',
disableSortBy: true,
disableFilters : true,
},
{
Header: 'Runs',
accessor: 'rundata.count',
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
{
Header: 'Last Run At',
accessor: 'rundata.results[0].end_date',
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
]
return(
<>
<TableContainer columns={columns} data={runs} />
</>
);
在您的 TableContainer
定义中,您将输出行(tr
或 TableRow
就在 prepareRow 调用之后)
向该行添加一个 onclick。
例如
<tr onClick={((e) => doSomething(e)} />
我有一个使用 react-table v7 的 table。我包含的功能之一是使单元格可点击并重定向到特定 link。我想让整行而不是单元格可单击,但应该重定向到与单击单元格时相同的 link。 我怎样才能做到这一点?
下面是我在列中点击的实现。谢谢
.......
const columns = useMemo(
() => [
{
Header: 'Task Name',
accessor: 'name',
Cell:e =><Link to={`${e.value}/runs`}>{e.value}</Link>,**//clickable cell**
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
{
Header: 'Square',
accessor: d => `${d.module.name} ${d.function}`,
disableSortBy: true,
disableFilters : true,
},
{
Header: 'Schedule',
accessor: 'schedules',
disableSortBy: true,
disableFilters : true,
},
{
Header: 'Runs',
accessor: 'rundata.count',
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
{
Header: 'Last Run At',
accessor: 'rundata.results[0].end_date',
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
]
return(
<>
<TableContainer columns={columns} data={runs} />
</>
);
在您的 TableContainer
定义中,您将输出行(tr
或 TableRow
就在 prepareRow 调用之后)
向该行添加一个 onclick。
例如
<tr onClick={((e) => doSomething(e)} />