[英]How to customize a column in react table 7
I want to add a button in one of my columns, so that when i click it, i can get the details of the row in which the button is located.我想在我的一个列中添加一个按钮,这样当我单击它时,我可以获得按钮所在行的详细信息。 Currently there is no button in my table and i don't know how to put a button init.
目前我的表中没有按钮,我不知道如何设置按钮初始化。 Also i want to know how can i add a custom tag in side a cell.
另外我想知道如何在单元格中添加自定义标签。 i Want to add two tags in a cell a heading tag and a paragraph tag below it, but they must be in the same cell.
我想在一个单元格中添加两个标签,一个标题标签和一个段落标签,但它们必须在同一个单元格中。
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>
</>
You can modify column like:您可以修改列,如:
{
accessor: 'accessor',
Header: 'Header',
Cell: ({ row: { original } }) => (
<button
onClick=(() => console.log(original))
>
Button text
</button>
),
},
Or you can modify default table cell DefaultCell.js
:或者您可以修改默认表格单元
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>
)
And react-table
usage:和
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
);
You can also just make a styled td element and find the cell.column.id
value and conditionally render whatever style you need.您也可以只制作一个样式化的 td 元素并找到
cell.column.id
值并有条件地呈现您需要的任何样式。 However this is repetitive if you have a bunch of different conditionals.但是,如果您有一堆不同的条件,这是重复的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.