React.js Blueprint Table 特性格式化

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

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

为了在单元格中显示长内容，我们可以使用组件，该组件允许用户在单击时显示单元格的长内容。要在屏幕上显示JSON对象，可以使用组件。

语法:

<TruncatedFormat2 detectTruncation={true}></TruncatedFormat2>
<JSONFormat2 detectTruncation={true}></JSONFormat2>

前提条件：

介绍和安装 ReactJS
ReactJS Blueprint 表格组件

创建 React 应用并安装模块：

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

npx create-react-app foldername

步骤2： 创建项目文件夹，即foldername，使用以下命令切换到该文件夹：

cd foldername

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

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

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

React.js Blueprint Table 特性格式化

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

我们使用表格组件以表格形式展示数据，其中numRows指定了行数，这里我们展示了两列，分别是‘Name’和‘Age’。我们创建了两个自定义函数，nameColumn和ageColumn，第一个函数返回名字，第二个函数返回数据对象列表中的年龄。

App.js

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/table/lib/css/table.css"; 
import { Column, Cell, Table, JSONFormat2 }  
    from "@blueprintjs/table"; 
  
function App() { 
    const data = [ 
        { 
            "name": "Rob", 
            "age": 56, 
  
        }, { 
            "name": "Alice", 
            "age": 60, 
  
        }, { 
            "name": "Bob", 
            "age": 16, 
  
        } 
    ] 
    const nameColumn = (id) => { 
        return <Cell> <JSONFormat2>{data[id].name}</JSONFormat2></Cell>; 
    }; 
    const ageColumn = (id) => { 
        return <Cell> <JSONFormat2>{data[id].age}</JSONFormat2></Cell>; 
    }; 
  
    return ( 
        <div style={{ margin: 30 }}> 
            <h4>ReactJS Blueprint Table features Formatting</h4> 
            <Table numRows={3}> 
                <Column name="Name"
                    cellRenderer={nameColumn} /> 
                <Column name="Age"
                    cellRenderer={ageColumn} /> 
            </Table> 
        </div> 
    ); 
} 
  
export default App;

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

npm start

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

React.js Blueprint Table 特性格式化

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

我们在表格中添加了三个列组件，分别命名为“名称”，“评论”和“JSON信息”，第一个组件与上面的示例相同。

我们还创建了两个自定义函数，命名为reviewColumn和jsonInfoColumn，第一个函数使用detectTruncation设置为true的truncatedFormat2组件返回评论，第二个函数也使用detectTruncation设置为true的JSONFormat2组件返回JSON对象。

App.js

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/table/lib/css/table.css"; 
import { Column, Cell, Table, JSONFormat2, 
    TruncatedFormat2 } from "@blueprintjs/table"; 
  
function App() { 
    const data = [ 
        { 
            "name": "Rob", 
            "age": 56, 
            "review": "This is the best things on the internet"
  
        }, { 
            "name": "Alice", 
            "age": 60, 
            "review": "I have used the product quite a number of times."
  
        }, { 
            "name": "Bob", 
            "age": 16, 
            "review": "There is a technical issue with the device I bought."
  
        } 
    ] 
    const nameColumn = (id) => { 
        return <Cell> <JSONFormat2>{data[id].name}</JSONFormat2></Cell>; 
    }; 
    const reviewColumn = (id) => { 
        return <Cell><TruncatedFormat2 detectTruncation={true}> 
            {data[id].review}</TruncatedFormat2></Cell>; 
    }; 
  
    const jsonInfoColumn = (id) => { 
        return <Cell> <JSONFormat2 detectTruncation={true}> 
            {data[id]}</JSONFormat2></Cell>; 
    }; 
  
    return ( 
        <div style={{ margin: 30 }}> 
            <h4>ReactJS Blueprint Table features Formatting</h4> 
            <Table numRows={3}> 
                <Column name="Name"
                    cellRenderer={nameColumn} /> 
                <Column name="Review"
                    cellRenderer={reviewColumn} /> 
                <Column name="JSON info"
                    cellRenderer={jsonInfoColumn} /> 
            </Table> 
        </div> 
    ); 
} 
  
export default App;