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;