React.js Blueprint Table features Column loading states

Last Updated : 02 Nov, 2022

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 ColumnComponet’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 column’s headers or the cells. The ColumnLoadingOption. HEADER sets the column’s header in a loading state whereas the ColumnLoadingOption cell sets the states to a 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:

loadingOptions={{]}

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.

Example 1: We are importing { Column, Table,ColumnLoadingOption, 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 a sampleData a custom function that returns a single cell to show the sample number. To the Column component, we have passed the name prop that shows the name of the column, cellRenderer, and have passed loadingOptions as ColumnLoadingOption.HEADER.

App.js

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, ColumnLoadingOption, Cell }  
    from "@blueprintjs/table"; 
  
function App() { 
    const sampleData = (idx) => { 
        return <Cell>{idx * 100 + 4 + idx}</Cell> 
    }; 
  
    return ( 
        <div style={{ margin: 20 }}> 
            <h4> 
                ReactJS Blueprint Table features Column loading states 
            </h4> 
            <Table numRows={5}> 
                <Column 
                    loadingOptions={[ColumnLoadingOption.HEADER]} 
                    name=" Numbers"
                    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.

Example 2: In this example, we are adding a list naming names, the first custom function sampleDataOne returns a number and the second custom function sampleDataTwo returns a name from the list. We are adding two Column Components, in the first one we are passing loadingOptions as ColumnLoadingOption.CELLS and in the second one we are passing ColumnLoadingOption.Header.

App.js

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, ColumnLoadingOption, Cell }  
    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  
                Column loading states 
            </h4> 
            <Table numRows={5}> 
                <Column 
                    loadingOptions={[ColumnLoadingOption.CELLS]} 
                    name=" Numbers"
                    cellRenderer={sampleDataOne} /> 
                <Column 
                    loadingOptions={[ColumnLoadingOption.HEADER]} 
                    name="Names"
                    cellRenderer={sampleDataTwo} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;