React.js Blueprint Table features Formatting

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 Column Component shows the columns in the table.

To display long content in the cell, we can use the <TruncatedFormat2> component, which allows the user to display the long content of the cell on click. And to display JSON objects on the screen, one can use the <JSONFormat2> component.

Syntax:

<TruncatedFormat2 detectTruncation={true}></TruncatedFormat2>
<JSONFormat2 detectTruncation={true}></JSONFormat2>

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, JSONFormat2, 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 the names ‘Name’ and ‘Age’ respectively. We are creating two custom functions named nameColumn and ageColumn, the first one returns the names and the second one returns the age from the list of objects named data.

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, JSONFormat2 }
    from "@blueprintjs/table";

function App() {
    const data = [
        {
            "name": "Rob",
            "age": 56,

        }, {
            "name": "Alice",
            "age": 60,

        }, {
            "name": "Bob",
            "age": 16,

        }
    ]
    const nameColumn = (id) => {
        return <Cell> <JSONFormat2>{data[id].name}</JSONFormat2></Cell>;
    };
    const ageColumn = (id) => {
        return <Cell> <JSONFormat2>{data[id].age}</JSONFormat2></Cell>;
    };

    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table features Formatting</h4>
            <Table numRows={3}>
                <Column name="Name"
                    cellRenderer={nameColumn} />
                <Column name="Age"
                    cellRenderer={ageColumn} />
            </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: We are importing { Column, Table, JSONFormat2,TruncatedFormat2,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 adding three column components in the table with names “Name”, “Review” and “JSON info” respectively,  the first component remains the same as the above example.

We further created two more custom functions namig reviewColumn and jsonInfoColumn, the first return the reviews in the truncatedFormat2 component with detectTruncation set to true, and the second one returns the JSON object through the JSONFormat2 component with detectTruncation set to true as well.

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, JSONFormat2,
    TruncatedFormat2 } from "@blueprintjs/table";

function App() {
    const data = [
        {
            "name": "Rob",
            "age": 56,
            "review": "This is the best things on the internet"

        }, {
            "name": "Alice",
            "age": 60,
            "review": "I have used the product quite a number of times."

        }, {
            "name": "Bob",
            "age": 16,
            "review": "There is a technical issue with the device I bought."

        }
    ]
    const nameColumn = (id) => {
        return <Cell> <JSONFormat2>{data[id].name}</JSONFormat2></Cell>;
    };
    const reviewColumn = (id) => {
        return <Cell><TruncatedFormat2 detectTruncation={true}>
            {data[id].review}</TruncatedFormat2></Cell>;
    };

    const jsonInfoColumn = (id) => {
        return <Cell> <JSONFormat2 detectTruncation={true}>
            {data[id]}</JSONFormat2></Cell>;
    };

    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table features Formatting</h4>
            <Table numRows={3}>
                <Column name="Name"
                    cellRenderer={nameColumn} />
                <Column name="Review"
                    cellRenderer={reviewColumn} />
                <Column name="JSON info"
                    cellRenderer={jsonInfoColumn} />
            </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/#table/features.formatting