如何在 React-Table 上获取单元格值？

React Table是一个库，它可以帮助我们创建表格，并为我们提供了许多可以在表格上执行的功能。

React 表的一些特性：

• 轻量级（5kb-14kb+，取决于使用的功能和摇树）。
• 无头（100% 可定制，自带 UI）。
• 自动开箱即用，完全可控的 API。
• 排序（多和稳定）
• 过滤器。
• 透视和聚合。
• 可虚拟化。
• 可调整大小

获取单元格值：我们可以通过在标签中添加onClick事件来获取表格的单元格/列值。

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

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd foldername

第 3 步：创建 ReactJS 应用程序后，使用以下命令安装 react-table。

npm i react-table

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

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 */}
    
Selected Cell Value: {cellValue}
    
 
      
        {headerGroups.map(headerGroup => (
          
            {headerGroup.headers.map(column => (
              
            ))}
          
        ))}
      
      
        {rows.map(row => {
          prepareRow(row)
          return (
            
              {row.cells.map(cell => {
                return (
                  <>
                  {/* Here added onClick function to get cell value */}
                  
                  
                )
              })}
            
          )
        })}
      
    

                {column.render('Header')}
              
 getCellValue(cell)}
                    {...cell.getCellProps()}
                    style={{
                      padding: '10px',
                      border: 'solid 1px gray',
                      background: 'papayawhip',
                    }}
                  >
                    {cell.render('Cell')}
                  
    
  )
}
 
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，单击react-table单元格将看到以下输出

输出

参考： https://www.npmjs.com/package/react-table