React.js Blueprint Table JS API Column

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.

Column  Props:

• renderColumnHeaderCell: It is used to define the header in the column component.  
• cellRenderer: It is used to define how data is displayed and we can set it on each column component.  
• name: It specifies the name of the column that is displayed.
• className: It is a space-delimited list of class names to pass along to a child element.
• id: It denotes a unique identifier for the column.
• loadingOptions: It sets the loading states in the component. It accepts a list as input and can either set the loading state of the column’s headers or the cells. The ColumnLoadingOption. HEADER sets the column’s header in a loading state whereas the ColumnLoadingOption cell sets the states to a loading state.
• name: It is used to display name in the header of the column.
• nameRenderer: A callback function that overrides the name prop.

Syntax:

<Column> ... </Column>

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, ColumnLoadingOption, 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 ‘Id’ and ‘Product Reviews’ respectively. To the first component, we are passing the loadingOptions as ColumnLoadingOption.HEADER and passed sampleColumn custom function through the cellRenderer prop that returns a single cell of random number.

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

function App() {

    const sampleColumn = (index) => {
        return <Cell > {index * 100 + 6}</Cell>
    };

    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table JS API Column</h4>
            <Table numRows={6}>
                <Column name="Id"
                    loadingOptions={[ColumnLoadingOption.HEADER]}
                    cellRenderer={sampleColumn} />
                <Column name="Product Reviews" />
            </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, ColumnHeaderCell, 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 two column components in the table, to the first component we are calling the sampleColumnOne custom function, which returns a cell of random numbers through cellRenderer and name prop as ‘Id’.

In the second column component, we are calling the sampleColumnHeader and sampleColumnTwo custom function that returns the column header component and returns cell component through renderColumnHeaderCell and cellRenderer respectively.

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

function App() {

    const sampleColumnOne = (index) => {
        return <Cell > {index * 100 + 6}</Cell>
    };
    const sampleColumnHeader = () => {
        return <ColumnHeaderCell
            name='Product Reviews'
        />
    };
    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 > {reviews[index]}</Cell>
    };

    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table JS API Column</h4>
            <Table numRows={6}>
                <Column name="Id"
                    cellRenderer={sampleColumnOne} />
                <Column

                    cellRenderer={sampleColumnTwo}
                    columnHeaderCellRenderer={sampleColumnHeader} />

            </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/api.column