React.js Blueprint表格列标题单元格JS API

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

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

表格属性：

numRows： 用于设置行数。
renderColumnHeaderCell： 用于定义列组件中的标题。

列标题单元格属性：

index： 指定列的索引，是一个唯一标识符。
isActive： 布尔值。确定列是否处于活动状态。
isColumnReorderable： 布尔值。确定列是否可重新排序。
isColumnSelected： 布尔值。确定列是否被选中。
loading： 布尔值。确定列是否处于加载状态。
menu： 在列的右侧出现一个菜单元素。
menuIconName： 菜单元素的图标集。
name： 指定要显示的列的名称。
renderMenu： 返回菜单元素的回调函数。
renderName： 覆盖name属性的回调函数。
reorderHandle： 帮助重新排序的React组件。
resizeHandle： 帮助调整标题大小的React组件。
style： 用于添加CSS样式。
useInteractionBar： 布尔值。确定是否添加交互栏。

语法：

<ColumnHeaderCell> ... </ColumnHeaderCell>

先决条件：

介绍和安装 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表格列标题单元格JS API

示例1： 我们使用表格组件以表格形式展示数据，其中numRows指定了行数，在这里我们展示了两列带有标题，我们传递了自定义的sampleColumn函数和index属性，该函数返回带有索引的列标题单元格。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, ColumnHeaderCell }  
    from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumn = (index) => { 
        return <ColumnHeaderCell> 
            Column {index} 
           </ColumnHeaderCell> 
    }; 
    return ( 
        <div style={{ 
            display: 'block', 
            width: 390, 
            padding: 30 
        }}> 
            <h4> 
                ReactJS Blueprint Table JS API ColumnHeaderCell 
            </h4> 
            <Table numRows={5}> 
                <Column 
                    columnHeaderCellRenderer={sampleColumn} /> 
                <Column 
                    columnHeaderCellRenderer={sampleColumn} /> 
            </Table> 
        </div> 
    ); 
} 
  
export default App;

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

npm start

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

React.js Blueprint表格列标题单元格JS API

示例2： 在上面的代码中，我们现在创建了两个自定义函数，命名为sampleColumnOne和sampleColumnTwo。在第一个函数中，我们传递了加载属性（loading props），在第二个函数中，我们传递了名称属性（name props），并给它添加了一些内联样式。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, ColumnHeaderCell }  
    from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumnOne = () => { 
        return <ColumnHeaderCell 
            loading 
        >Column </ColumnHeaderCell> 
    }; 
  
    const sampleColumnTwo = (index) => { 
        return <ColumnHeaderCell 
            name="Name"
            style={{ color: "green" }} 
        /> 
    }; 
  
    return ( 
        <div style={{ 
            display: 'block', 
            width: 390, 
            padding: 30 
        }}> 
            <h4> 
                ReactJS Blueprint Table JS API ColumnHeaderCell 
            </h4> 
            <Table numRows={5}> 
                <Column 
                    columnHeaderCellRenderer={sampleColumnOne} /> 
                <Column 
                    columnHeaderCellRenderer={sampleColumnTwo} /> 
            </Table> 
        </div> 
    ); 
} 
  
export default App;

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