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
