How to customize a column in react table 7

Question

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>


        </>

Answer 1

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
);