React.js Blueprint Table features Table loading states

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.

The table component allows the user to display rows of data. We can use the following approach in ReactJS to use the ReactJS Blueprint Table Component.

The Table Component’s loadingOptions prop sets the loading states in the component. It accepts a list as input and can either set the loading state of the columns header, rows header, or the cells. The TableLoadingOption.COLUMN_HEADERS sets the column’s header in a loading state whereas TableLoadingOption.ROW_HEADERS sets the rows headers in loading state and TableLoadingOption.CELL sets the cell’s states to the loading state.

Table Props:

• numRows: It is used to set the number of rows.
• cellRenderer: It is used to define how data is displayed and we can set it on each column component.  

Syntax:

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

Prerequisite:

• Introduction and Installation reactJS
• React.js Blueprint Table Component

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure: It will look like the following.

Example1: We are importing { Column, Table,TableLoadingOption, Cell } from “@blueprintjs/table”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css” and “@blueprintjs/table/lib/css/table.css”. We are creating two custom functions named sampleDataOne and sampleDataTwo, the first one returns a single cell to show the sample number and the second one returns a name from the list we created named names. To the two column components, we have passed the name prop that shows the name of the column, cellRenderer, and to the Table Component, we have passed loadingOptions as TableLoadingOption.CELLS.

App.js

Javascript

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;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we are adding two tables with numRows={5}, in both tables, we are adding one column with the same name and passing the same custom function through cellRenderer prop named sampleData which returns a name from the names list we created. In the first, Table component we pass loadingOptions as TableLoadingOption.COLUMN_HEADERS. and in the second Table Component we pass loadingOptions as TableLoadingOption.ROW_HEADERS

App.js

Javascript

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;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://blueprintjs.com/docs/versions/1/#table-js.table-loading-states