Skip to content
Related Articles
Open in App
Not now

Related Articles

React.js Blueprint HTML Component table Props

Improve Article
Save Article
  • Last Updated : 28 Jul, 2022
Improve Article
Save Article

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;


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

npm start

Output:

 

Reference: https://blueprintjs.com/docs/#core/components/html-table.props


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!