Skip to content
Related Articles

Related Articles

Improve Article

How to get cell value on React-Table ?

  • Last Updated : 17 Jun, 2021

React Table is a library that helps us to create a table and gives us many features which we can perform on a table.

Some Features of React Table: 

  • Lightweight (5kb-14kb+ depending on features used and tree-shaking).
  • Headless (100% customizable, Bring-your-own-UI).
  • Auto out of the box, fully controllable API.
  • Sorting (Multi and Stable)
  • Filters.
  • Pivoting & Aggregation.
  • Virtualizable.
  • Resizable

Get Cell Value: We can get the cell/column value of the table by adding the onClick event to the <td> tags.

getCellValue function : onClick={()=> setCellValue(cell.value)}

 



Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command.

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command.

    cd foldername
  • Step 3: After creating the ReactJS application, Install the react-table using the following command.

    npm i react-table

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React, { useState } from 'react';
import { useTable } from 'react-table';
   
const  App = () => {
  
  // Define state
  const [cellValue, setCellValue] = useState('');
  
  // Add data here to show in table
  const data = React.useMemo(
    () => [
      {
        reactCol1: 'Hey',
        reactCol2: 'World',
      },
      {
        reactCol1: 'Here',
        reactCol2: 'is the',
      },
      {
        reactCol1: 'Example',
        reactCol2: 'of react-table',
      },
    ],
    []
  )
  
  // Define coloumn of the table
  const columns = React.useMemo(
    () => [
      {
        Header: 'React',
  
        // Accessor is the "key" in the data
        accessor: 'reactCol1',
      },
      {
        Header: 'Table',
        accessor: 'reactCol2',
      },
    ],
    []
  )
  
  // Function to get cell value
  const getCellValue = (cell) =>{
    setCellValue(cell.value)
  }
  
  // Create the instance of table by 
  // using hooks of react-table
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data })
  
  return (
    <>
    {/* Showing cell value */}
    <h3>Selected Cell Value: {cellValue}</h3>
    <table {...getTableProps()} 
      style={{ border: 'solid 1px blue' }}>
  
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th
                {...column.getHeaderProps()}
                style={{
                  borderBottom: 'solid 3px red',
                  background: 'aliceblue',
                  color: 'black',
                  fontWeight: 'bold',
                }}
              >
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return (
                  <>
                  {/* Here added onClick function to get cell value */}
                  <td
                  onClick={()=> getCellValue(cell)}
                    {...cell.getCellProps()}
                    style={{
                      padding: '10px',
                      border: 'solid 1px gray',
                      background: 'papayawhip',
                    }}
                  >
                    {cell.render('Cell')}
                  </td>
                  </>
                )
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
    </>
  )
}
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output by clicking the of react-table cell

Output

Reference: https://www.npmjs.com/package/react-table




My Personal Notes arrow_drop_up
Recommended Articles
Page :