title: How to customize a column in react table 7
body: <p>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.</p>
  
  <pre><code>    const location = useLocation();
  
      useEffect(() =&gt; {
          console.log(location.state);
      });
  
      const data = React.useMemo(
          () =&gt; [
              {
                  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(
          () =&gt; [
              {
                  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 (
          &lt;&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col class-top-heading"&gt;
                      &lt;h4&gt;Class: 7-B&lt;/h4&gt;
                      &lt;h4&gt;Subject: English&lt;/h4&gt;
                      &lt;h4&gt;No of Students: 32&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col table-div-1 highlight" style={{ 'overflowY': 'auto', 'height': '455px' }}&gt;
                      &lt;table {...getTableProps()}&gt;
                          &lt;thead&gt;
                              {headerGroups.map(headerGroup =&gt; (
                                  &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                                      {headerGroup.headers.map(column =&gt; (
                                          &lt;th
                                              {...column.getHeaderProps()}
                                          &gt;
                                              {column.render('Header')}
                                          &lt;/th&gt;
                                      ))}
                                  &lt;/tr&gt;
                              ))}
                          &lt;/thead&gt;
                          &lt;tbody {...getTableBodyProps()}&gt;
                              {page.map(row =&gt; {
                                  prepareRow(row)
                                  return (
                                      &lt;tr key={123} {...row.getRowProps()} &gt;
                                          {row.cells.map(cell =&gt; {
                                              return (
                                                  &lt;td
                                                      {...cell.getCellProps()}
                                                      onClick={() =&gt; console.log(row.original.col2)}
                                                  &gt;
                                                      {cell.render('Cell')}
                                                  &lt;/td&gt;
                                              )
                                          })}
                                      &lt;/tr&gt;
                                  )
                              })}
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="row pagination"&gt;
                  &lt;button onClick={() =&gt; previousPage()} disabled={!canPreviousPage}&gt;
                      {'&lt;'}
                  &lt;/button&gt;{" "}
                  &lt;button onClick={() =&gt; nextPage()} disabled={!canNextPage}&gt;
                      {'&gt;'}
                  &lt;/button&gt;{" "}
                  &lt;select
                      value={pageSize}
                      onChange={e =&gt; {
                          setPageSize(Number(e.target.value));
                      }}
                  &gt;
                      {[7, 10, 20, 30].map(pageSize =&gt; (
                          &lt;option key={pageSize} value={pageSize}&gt;
                              Show {pageSize}
                          &lt;/option&gt;
                      ))}
                  &lt;/select&gt;
              &lt;/div&gt;
  
  
          &lt;/&gt;
  </code></pre>