React.js蓝图表格特性表格加载状态

React.js 蓝图是一个前端UI工具包。用于构建桌面应用程序中复杂数据密集的界面非常高效且流行。

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

表格组件的 loadingOptions 属性设置了组件中的加载状态。它接受列表作为输入，可以设置列头、行头或单元格的加载状态。TableLoadingOption.COLUMN_HEADERS设置列头的加载状态，TableLoadingOption.ROW_HEADERS设置行头的加载状态，TableLoadingOption.CELL将单元格的状态设置为加载状态。

表格属性：

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

语法：

<Table loadingOptions={{]}></Table>

先决条件：

介绍和安装 reactJS
React.js 蓝图表格组件

创建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蓝图表格特性表格加载状态

Example1: 我们从“@blueprintjs/table”中导入{Column，Table，TableLoadingOption，Cell}。为了应用组件的默认样式，我们导入了“@blueprintjs/core/lib/css/blueprint.css”和“@blueprintjs/table/lib/css/table.css”。我们创建了两个自定义函数sampleDataOne和sampleDataTwo，第一个函数返回一个单元格来显示示例数字，第二个函数从我们创建的名为names的列表中返回一个名称。对于这两个列组件，我们传递了name prop来显示列的名称，cellRenderer，对于Table组件，我们传递了loadingOptions作为TableLoadingOption.CELLS。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/table/lib/css/table.css';
import { Column, Table, Cell, TableLoadingOption } 
    from "@blueprintjs/table";
 
function App() {
    const names = ["John", "Alice", "Robert", "Ben", "Tim"];
 
    const sampleDataOne = (idx) => {
        return <Cell>{idx * 100 + 4 + idx}</Cell>
    };
 
    const sampleDataTwo = (idx) => {
        return <Cell>{names[idx]}</Cell>
    };
 
    return (
        <div style={{ margin: 20 }}>
            <h4>ReactJS Blueprint Table 
                features Table loading states</h4>
            <Table numRows={5}
                loadingOptions={[TableLoadingOption.CELLS]}
            >
                <Column
                    name=" Numbers"
                    cellRenderer={sampleDataOne} />
                <Column
 
                    name="Names"
                    cellRenderer={sampleDataTwo} />
 
            </Table>
        </div>
    );
}
 
export default App;

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

npm start

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

React.js蓝图表格特性表格加载状态

示例2: 在这个示例中，我们添加了两个表，numRows={5}，在两个表中，我们添加了一个具有相同名称的列，并通过cellRenderer属性传递了相同的自定义函数sampleData，该函数从我们创建的names列表返回一个名称。在第一个Table组件中，我们将loadingOptions作为TableLoadingOption.COLUMN_HEADERS传递。在第二个Table组件中，我们将loadingOptions作为TableLoadingOption.ROW_HEADERS传递。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/table/lib/css/table.css';
import { Column, Table, Cell, TableLoadingOption }
    from "@blueprintjs/table";
 
function App() {
    const names = ["John", "Alice", "Robert", "Ben", "Tim"];
 
 
 
    const sampleData = (idx) => {
        return <Cell>{names[idx]}</Cell>
    };
 
    return (
        <div style={{ margin: 20 }}>
            <h4>ReactJS Blueprint Table features 
                Table loading states</h4>
            <Table numRows={5}
                loadingOptions=
                    {[TableLoadingOption.COLUMN_HEADERS]}
            >
                <Column
                    name="Names"
                    cellRenderer={sampleData} />
 
            </Table>
            <Table numRows={5}
                loadingOptions={[TableLoadingOption.ROW_HEADERS]}
            >
                <Column
                    name="Names"
                    cellRenderer={sampleData} />
 
            </Table>
        </div>
    );
}
 
export default App;

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