React.js Blueprint Table 特性编辑

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

table组件 允许用户显示数据行。我们可以在ReactJS中使用以下方法来使用ReactJS蓝图表格组件。

EditableCell组件 在表格主体上启用双击编辑功能，而EditableName组件则允许通过点击表头文本在表格中编辑列头。

表格属性：

numRows： 用于设置行数。
cellRenderer： 用于定义数据的显示方式，可以在每个列组件上设置。
renderColumnHeaderCell： 用于定义列组件的表头。

EditableCell2属性：

columnIndex： 指定单元格的列索引。
interactive： 一个布尔值，确定是否启用鼠标交互。
isFocused： 一个布尔值，确定当前单元格是否聚焦。
key： 一个字符串对象。
cellRef： 外部div的引用句柄。
loading： 一个布尔值，确定是否处于加载状态。
onCancel： 一个空回调函数，在取消编辑时触发。
onChange： 一个空回调函数，在编辑过程中触发。
onConfirm： 一个空回调函数，在编辑确认时触发。
onKeyDown： 当单元格聚焦并按下键时调用的回调函数。
onKeyPress： 当按下字符键时调用的回调函数。
onKeyUp： 当单元格聚焦并释放键时调用的回调函数。
rowIndex： 指定单元格的行索引。
style： 指定CSS样式。
tabIndex： 指定单元格的tab索引。
tooltip： 鼠标悬停时显示的元素。
truncated： 一个布尔值，确定单元格的内容是否将被换行以防止溢出。
value： 在文本框中显示的值。
wrapText： 一个布尔值，确定单元格的内容是否将被换行。

EditableNameProps：

className： 一个以空格分隔的类名列表，用于传递给子元素。
index： 指定列的索引，一个唯一标识符。
intent： 定义应用于元素的颜色的视觉意图。
name： 指定在文本框中显示的名称。
onCancel： 一个空回调函数，在取消编辑时触发。
onChange： 一个空回调函数，在编辑过程中触发。
onConfirm： 一个空回调函数，在编辑确认时触发。

语法：

<EditableCell2>...</EditableCell2>

<EditableName> ... </EditableName>

创建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 特性编辑

示例1： 在下面的示例中，，我们正在创建一个名为sampleColumn的自定义函数，通过Column组件的columnHeaderRenderer属性进行调用，返回调用EditableNameComponent的ColumnHeaderCell组件，该组件通过nameRenderer属性返回一个EditableName组件。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, ColumnHeaderCell2, EditableName }  
from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumn = () => { 
        return <ColumnHeaderCell2  
                   nameRenderer={EditableNameComponent} 
        /> 
    }; 
  
    const EditableNameComponent = () => { 
        return <EditableName  name="Edit Column Header"> 
         </EditableName> 
    }; 
  
    return ( 
        <div style={{ margin: 20 }}> 
          <h1 style={{color:"green"}}>GeeksforGeeks</h1>  
          <strong>  
              ReactJS Blueprint Table features Editing  
          </strong> 
            <Table numRows={4}> 
                <Column  
                    columnHeaderCellRenderer={sampleColumn} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;

运行应用的步骤： 在项目的根目录下使用以下命令运行应用：

npm start

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

React.js Blueprint Table 特性编辑

示例2: 我们从”@blueprintjs/table”中导入{ Column, Table, EditableCell2 }。为了应用组件的默认样式，我们导入了”@blueprintjs/core/lib/css/blueprint.css”和”@blueprintjs/table/lib/css/table.css”。

在这个示例中，custom sampleData函数返回显示不同值的EditableCell2组件。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, EditableCell2 } 
    from "@blueprintjs/table"; 
  
  
function App() { 
  
    const sampleData = (idx) => { 
        return <EditableCell2 value={2 * idx * 100 + 3} /> 
    }; 
  
    return ( 
        <div style={{ margin: 20 }}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <strong> 
                ReactJS Blueprint Table features Editing 
            </strong> 
  
            <Table numRows={5}> 
                <Column 
                    name="ID"
                    cellRenderer={sampleData} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;

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