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.
Table Props:
- numRows: It is used to set the number of rows.
- renderColumnHeaderCell: It is used to define the header in the column component.
ColumnHeaderCell Props:
- index: It specifies the index of the column, a unique identifier.
- isActive: It is a boolean value. It determines whether the column is active or not.
- isColumnReorderable: It is a boolean value. It determines whether the column is reorderable or not.
- isColumnSelected: It is a boolean value. It determines whether the column is selected or not.
- loading: It is a boolean value. It determines whether the column is in a loading state or not.
- menu: A menu element appears on the right of the column.
- menuIconName: Icon set for the menu element.
- name: It specifies the name of the column that is displayed.
- renderMenu: A callback function that returns the menu element.
- renderName: A callback function that overrides the name prop.
- reorderHandle: A react component that helps to reorder.
- resizeHandle: A react component that helps to resize the header.
- style: It helps to add CSS styles.
- useInteractionBar: It is a boolean value. It determines whether to add an interaction bar or not.
Syntax:
<ColumnHeaderCell> ... </ColumnHeaderCell>
Prerequisite:
- Introduction and Installation reactJS
- ReactJS 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 using the table component to show data in the form of a table where numRows specified the number of rows, here we have shown two Columns with headers and have passed our custom sampleColumn function and passed index props which returns the Column header cells with the index.
App.js
Javascript
import React from 'react'import '@blueprintjs/core/lib/css/blueprint.css'; import '@blueprintjs/table/lib/css/table.css'; import { Column, Table, ColumnHeaderCell } from "@blueprintjs/table"; function App() { const sampleColumn = (index) => { return <ColumnHeaderCell> Column {index} </ColumnHeaderCell> }; return ( <div style={{ display: 'block', width: 390, padding: 30 }}> <h4> ReactJS Blueprint Table JS API ColumnHeaderCell </h4> <Table numRows={5}> <Column columnHeaderCellRenderer={sampleColumn} /> <Column columnHeaderCellRenderer={sampleColumn} /> </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 the above code, we are now creating two custom functions naming it as sampleColumnOne and sampleColumnTwo. In the first function, we are passing the loading props, in the second one we are passing the name props and have added some inline style to it.
App.js
Javascript
import React from 'react'import '@blueprintjs/core/lib/css/blueprint.css'; import '@blueprintjs/table/lib/css/table.css'; import { Column, Table, ColumnHeaderCell } from "@blueprintjs/table"; function App() { const sampleColumnOne = () => { return <ColumnHeaderCell loading >Column </ColumnHeaderCell> }; const sampleColumnTwo = (index) => { return <ColumnHeaderCell name="Name" style={{ color: "green" }} /> }; return ( <div style={{ display: 'block', width: 390, padding: 30 }}> <h4> ReactJS Blueprint Table JS API ColumnHeaderCell </h4> <Table numRows={5}> <Column columnHeaderCellRenderer={sampleColumnOne} /> <Column columnHeaderCellRenderer={sampleColumnTwo} /> </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:
Reference: https://blueprintjs.com/docs/versions/1/#table-js.columnheadercell
