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.
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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
