React.js Blueprint Table JS API Cell

React.js Blueprint 是一个前端UI工具包。它非常优化，用于构建桌面应用程序中复杂数据密集的界面很受欢迎。

表格组件 允许用户显示数据行。我们可以在ReactJS中使用以下方法来使用ReactJS Blueprint表格组件。每个单元格由 Cell 组件表示。

Cell Props:

cellRef: 外部div的引用句柄。
children: 单元格中的内容。
className: 一个由空格分隔的类名列表，用于传递给子元素。
interactive: 它是一个布尔值，确定是否启用鼠标交互。
columnIndex: 指定单元格的列索引。
onKeyDown: 当单元格聚焦并按键时调用的回调函数。
onKeyPress: 当按下字符键时调用的回调函数。
onKeyUp: 当单元格聚焦并释放键时调用的回调函数。
intent: 定义内容的颜色。
key: 字符串对象。
loading: 它是一个布尔值，确定是否处于加载状态。
rowIndex: 指定单元格的行索引。
style: 指定CSS样式。
tabIndex: 指定单元格的标签索引。
tooltip: 悬停时显示的元素。
truncated: 它是一个布尔值，确定单元格的内容是否将被包裹起来以防止溢出。
wrapText: 它是一个布尔值，确定单元格的内容是否将被包装起来。

语法:

<Cell> ... </Cell>

预备知识：

介绍和安装 ReactJS
ReactJS 蓝图表格组件

创建 React 应用并安装模块：

步骤1: 使用以下命令创建一个 React 应用：

npx create-react-app foldername

步骤2： 在创建项目文件夹（即文件夹名称）之后，使用以下命令切换到该文件夹：

cd foldername

步骤3: 在创建 ReactJS 应用程序后，使用以下命令安装所需的模块：

npm install @blueprintjs/core
npm install --save @blueprintjs/table

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

React.js Blueprint Table JS API Cell

示例1： 我们从“@blueprintjs/table”中导入{Column，Table，Cell}。为了应用这些组件的默认样式，我们导入了“@blueprintjs/core/lib/css/blueprint.css”和“@blueprintjs/table/lib/css/table.css”。

我们使用表格组件以表格的形式显示数据，其中numRows指定了行数。在这里，我们展示了两列，分别是“Numbers”和“Names”的标题。对于第一列，我们传入了自定义函数sampleColumnOne，它返回一个单元格，并传递了loading和tooltip属性。对于第二列，自定义函数sampleColumnTwo返回了一个带有列表中名称的单元格，通过cellRenderer属性。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Cell, Table } from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumnOne = (index) => { 
        return <Cell loading tooltip={index * 4 + 10}>sample data</Cell> 
    }; 
    const names = ["Rob", "Bob", "Alice", "Ben", "Ten", "Rin"] 
  
    const sampleColumnTwo = (index) => { 
        return <Cell intent='danger'> {names[index]}</Cell> 
    }; 
  
    return ( 
        <div style={{ margin: 30 }}> 
            <h4>ReactJS Blueprint Table JS API Cell</h4> 
            <Table numRows={6}> 
                <Column name="Numbers"
                    cellRenderer={sampleColumnOne} /> 
                <Column name="Names"
                    cellRenderer={sampleColumnTwo} /> 
            </Table> 
        </div> 
    ); 
} 
  
export default App;

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

npm start

输出： 现在打开浏览器并访问 http://localhost:3000/ ，你将会看到以下输出：

React.js Blueprint Table JS API Cell

示例2： 在上面的代码中，我们现在创建了两个自定义函数，命名为sampleColumnOne和sampleColumnTwo。在第一个函数中，我们传递了rowIndex prop，在第二个函数中，我们传递了truncate prop。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Cell, Table } from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumnOne = (index) => { 
        return <Cell rowIndex={index}> {index * 100 + 6}</Cell> 
    }; 
    const reviews = [" Reviews help customers to learn", 
        "This is the best things on the internet", 
        "Nice product, best to buy", 
        "Good", 
        "Nice one", 
        "I have used the product quite a number of times."] 
  
    const sampleColumnTwo = (index) => { 
        return <Cell truncated> {reviews[index]}</Cell> 
    }; 
  
    return ( 
        <div style={{ margin: 30 }}> 
            <h4>ReactJS Blueprint Table JS API Cell</h4> 
            <Table numRows={6}> 
                <Column name="Id"
                    cellRenderer={sampleColumnOne} /> 
                <Column name="Product Reviews"
                    cellRenderer={sampleColumnTwo} /> 
            </Table> 
        </div> 
    ); 
} 
  
export default App;