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>
</>
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>
</>
2 Answers
Reset to default 18You 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:
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:
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. However this is repetitive if you have a bunch of different conditionals.