How to customize a column in react table 7
11,828
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
:
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
);
Author by
Nabeel Hussain Shah
Updated on June 22, 2022Comments
-
Nabeel Hussain Shah about 2 years
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> </>