React.js Blueprint HTML Component table Props

Last Updated : 28 Jul, 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.

React.js Blueprint HTMLTable Component allows to add modifier props to apply styles to an HTML <table> element.

HTML Component table Props:

bordered: It is a boolean value. It enables borders between rows and cells. It is true by default.
condensed: It is a boolean value. It enables a small, condensed appearance.
elementRef: It is a ref handler or a ref object that receives the native HTML element rendered by this component.
interactive: It is a boolean value. It enables hover styles on rows. It is true by default.
striped: It is a boolean value. It enables an alternate background color on odd rows. It is true by default.

Syntax:

<HTMLTable></HTMLTable>

Prerequisite: Introduction and installation ReactJS

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

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

cd project

Step 3: now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this:

Example 1: We are importing the HTMLTable from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

To the HTMLTable Component we are adding the table row <tr> and the table data <td>, and we are passing the bordered and striped props to it.

App.js

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { HTMLTable } from "@blueprintjs/core"; 
  
function App() { 
    return ( 
        <div 
            style={{ 
                margin: "20px 60px", 
            }} 
        > 
            <h4> 
                ReactJS Blueprint HTMLTable Component Props 
            </h4> 
              
            <HTMLTable bordered striped> 
                <thead>Students List</thead> 
                <tbody> 
                    <tr> 
                        <th>Name</th> 
                        <th>Roll No.</th> 
                        <th>Marks</th> 
                    </tr> 
                    <tr> 
                        <td>S1</td> 
                        <td>3</td> 
                        <td>80</td> 
                    </tr> 
                    <tr> 
                        <td>S2</td> 
                        <td>2</td> 
                        <td>100</td> 
                    </tr> 
                    <tr> 
                        <td>S3</td> 
                        <td>9</td> 
                        <td>40</td> 
                    </tr> 
                    <tr> 
                        <td>S4</td> 
                        <td>12</td> 
                        <td>60</td> 
                    </tr> 
                </tbody> 
            </HTMLTable> 
        </div> 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: To the above table we have created we are passing the props condensed and interactive.

App.js

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { HTMLTable } from "@blueprintjs/core"; 
  
function App() { 
    return ( 
        <div 
            style={{ 
                margin: "20px 60px", 
            }} 
        > 
            <h4> 
                ReactJS Blueprint HTMLTable Component Props 
            </h4> 
              
            <HTMLTable interactive condensed> 
                <thead>Students List</thead> 
                <tbody> 
                    <tr> 
                        <th>Name</th> 
                        <th>Roll No.</th> 
                        <th>Marks</th> 
                    </tr> 
                    <tr> 
                        <td>S1</td> 
                        <td>3</td> 
                        <td>80</td> 
                    </tr> 
                    <tr> 
                        <td>S2</td> 
                        <td>2</td> 
                        <td>100</td> 
                    </tr> 
                    <tr> 
                        <td>S3</td> 
                        <td>9</td> 
                        <td>40</td> 
                    </tr> 
                    <tr> 
                        <td>S4</td> 
                        <td>12</td> 
                        <td>60</td> 
                    </tr> 
                </tbody> 
            </HTMLTable> 
        </div> 
    ); 
} 
  
export default App;