React.js Blueprint Table JS API Cell

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. The Cell Component represents each cell in the table.

Cell Props:

cellRef: A ref handle for the outer div.
children: The content in the cell.
className: It is a space-delimited list of class names to pass along to a child element.
interactive: It is a boolean value. It determines whether to enable mouse interaction or not.
columnIndex: It specifies the column index of the cell.
onKeyDown: A callback function invoked when the cell is focused and a key is pressed.
onKeyPress: A callback function invoked when a character key is pressed.
onKeyUp: A callback function invoked when a cell is focussed and a key is released.
intent: It defines the color of the content.
key: A string object.
loading: It is a boolean value. It determines whether it’s in a loading state or not.
rowIndex: It specifies the row index of the cell.
style: It specifies CSS styles.
tabIndex: It specifies the tab index of the cell.
tooltip: An element displayed on hover.
truncated: It is a boolean value. It determines whether the contents of the cell will be wrapped or not to prevent overflowing.
wrapText: It is a boolean value. It determines whether the contents of the cell will be wrapped or not.

Syntax:

<Cell> ... </Cell>

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 importing { Column, Table, Cell } from “@blueprintjs/table”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css” and “@blueprintjs/table/lib/css/table.css”.

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 “Numbers” and “Names”, to the first column passed our custom function sampleColumnOne which returns a single cell passing loading and tooltip props and to the second column, the custom function sampleColumnTwo returns a cell with name from the list, through the cellRenderer prop.

App.js

Javascript

import React from 'react'

import '@blueprintjs/core/lib/css/blueprint.css'; 

import '@blueprintjs/table/lib/css/table.css'; 

import { Column, Cell, Table } from "@blueprintjs/table"; 

function App() { 

    const sampleColumnOne = (index) => { 

        return <Cell loading tooltip={index * 4 + 10}>sample data</Cell> 

    }; 

    const names = ["Rob", "Bob", "Alice", "Ben", "Ten", "Rin"] 

    const sampleColumnTwo = (index) => { 

        return <Cell intent='danger'> {names[index]}</Cell> 

    }; 

    return ( 

        <div style={{ margin: 30 }}> 

            <h4>ReactJS Blueprint Table JS API Cell</h4> 

            <Table numRows={6}> 

                <Column name="Numbers"

                    cellRenderer={sampleColumnOne} /> 

                <Column name="Names"

                    cellRenderer={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:

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 rowIndex prop, in the second one we are passing the truncate prop.

App.js

Javascript

import React from 'react'

import '@blueprintjs/core/lib/css/blueprint.css'; 

import '@blueprintjs/table/lib/css/table.css'; 

import { Column, Cell, Table } from "@blueprintjs/table"; 

function App() { 

    const sampleColumnOne = (index) => { 

        return <Cell rowIndex={index}> {index * 100 + 6}</Cell> 

    }; 

    const reviews = [" Reviews help customers to learn", 

        "This is the best things on the internet", 

        "Nice product, best to buy", 

        "Good", 

        "Nice one", 

        "I have used the product quite a number of times."] 

    const sampleColumnTwo = (index) => { 

        return <Cell truncated> {reviews[index]}</Cell> 

    }; 

    return ( 

        <div style={{ margin: 30 }}> 

            <h4>ReactJS Blueprint Table JS API Cell</h4> 

            <Table numRows={6}> 

                <Column name="Id"

                    cellRenderer={sampleColumnOne} /> 

                <Column name="Product Reviews"

                    cellRenderer={sampleColumnTwo} /> 

            </Table> 

        </div> 

    ); 
} 

export default App;