我想在我的其中一列中添加一个按钮，以便单击该按钮时，可以获取该按钮所在行的详细信息。目前我的桌子上没有按钮，我不知道如何将按钮初始化。我也想知道如何在单元格旁边添加自定义标签。我想在一个单元格中添加两个标签，即标题标签和其下方的段落标签，但它们必须位于同一单元格中。
const location = useLocation();
useEffect(() => {
console.log(location.state);
});
const data = React.useMemo(
() => [
{
col1: 'Hello',
col2: "world",
},
{
col1: 'react-table',
col2: 'rocks',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
],
[],
);
const columns = React.useMemo(
() => [
{
Header: 'Student Name',
accessor: 'col1', // accessor is the "key" in the data
show: false
},
{
Header: 'Reg-No',
accessor: 'col2',
},
{
Header: 'QUIZEZ',
accessor: '',
},
{
Header: 'ASSIGNMENT',
accessor: '',
},
{
Header: 'FIRST TERM',
accessor: '',
},
{
Header: 'MID TERM',
accessor: '',
},
{
Header: 'FINAL TERM',
accessor: '',
},
],
[],
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
nextPage,
previousPage,
setPageSize,
pageSize,
} = useTable({ columns, data, initialState: { pageIndex: 0, pageSize: 7 } }, useExpanded, usePagination);
return (
<>
<div className="row">
<div className="col class-top-heading">
<h4>Class: 7-B</h4>
<h4>Subject: English</h4>
<h4>No of Students: 32</h4>
</div>
</div>
<div className="row">
<div className="col table-div-1 highlight" style={{ 'overflowY': 'auto', 'height': '455px' }}>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps()}
>
{column.render('Header')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map(row => {
prepareRow(row)
return (
<tr key={123} {...row.getRowProps()} >
{row.cells.map(cell => {
return (
<td
{...cell.getCellProps()}
onClick={() => console.log(row.original.col2)}
>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
<div className="row pagination">
<button onClick={() => previousPage()} disabled={!canPreviousPage}>
{'<'}
</button>{" "}
<button onClick={() => nextPage()} disabled={!canNextPage}>
{'>'}
</button>{" "}
<select
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value));
}}
>
{[7, 10, 20, 30].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
</>
您可以修改列，例如：
{
accessor: 'accessor',
Header: 'Header',
Cell: ({ row: { original } }) => (
<button
onClick=(() => console.log(original))
>
Button text
</button>
),
},
或者您可以修改默认表单元格DefaultCell.js：
const DefaultCell = ({ cell: { value, column }, row: { original } }) => (
<span
style={{
whiteSpace: 'pre-wrap',
}}
>
{column.id === 'button' ?
(
<button
onClick=(() => console.log(original))
>
Button text
</button>
) : value}
</span>
)
和react-table的用法：
const defaultColumn = React.useMemo(
() => ({
minWidth: 5,
width: 150,
maxWidth: 400,
Cell: DefaultCell,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
nextPage,
previousPage,
setPageSize,
pageSize,
} = useTable({
{
columns,
data,
defaultColumn
},
initialState: { pageIndex: 0, pageSize: 7 } },
useExpanded,
usePagination
);