How to get cell value on React-Table ?
Last Updated :
20 Sep, 2024
React-Table is a powerful library that allows you to create flexible and feature-rich tables in your React applications. It provides various functionalities to manipulate and interact with table data. One common requirement is to retrieve the value of a specific cell in React-Table. In this article, we will explore React Table.
Prerequisites:
Approach
To get the cell values on react table we will use useState to store the selected cell value. This value will be updated on click event on each table cell. Generate the table using useTable hook and use cell.value to access, update, and display the value.
Steps to Create 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:
Project StructureThe updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-table": "^7.8.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}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
//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 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
Similar Reads
How to create a table in ReactJS ? In ReactJS, tables are commonly used to display data in rows and columns. Tables can be static, where data is hardcoded, or dynamic, where data is passed from an array or fetched from an API. React makes it simple to create interactive and dynamic tables, with additional features such as sorting, pa
6 min read
How To Get Select Element's Value In react-bootstrap? React-Bootstrap is a popular library that provides Bootstrap-styled React components. One of the most commonly used form elements is the <select> dropdown, which allows users to choose from a list of options. In this article, we’ll explore how to get the value of a select element in a React-Bo
2 min read
How to create a table in react-native ? React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m
2 min read
How To Get Multiple Checkbox Values In ReactJS? Handling checkboxes in ReactJS becomes important when creating forms or managing user input. If you need to select multiple options, we can do it by implementing multiple checkboxes. In this article, we'll explore how to get the values of multiple checkboxes in ReactJS, manage the state, and display
4 min read
How to add Table in React Native ? React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities. In this article, we will
2 min read
How to parse JSON Data into React Table Component ? In React parsing JSON Data into React Table Component is a common task to represent and structure data. We can render the JSON data into a table dynamically using the array map.Prerequisites:NPM & Node JSReact JSJSON parse()ApproachTo render JSON data in React Table we will be using the JavaScri
2 min read