How to get cell value on React-Table ? - GeeksforGeeks

31 Jul, 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.
Javascript
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 column 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
 
sweetyty
Picked
React-Modules
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?