React.js Blueprint Table features Freezing

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications. The Table component allows the user to display rows of data.

In this example, we will discuss Freezing in React.js Blueprint Table Component. The table supports column and row freezing via the numFrozenColumns and numFrozenRows props, respectively to freeze and fix columns and rows of the Table component. When numFrozenColumns={n} is used, the n leftmost columns will be frozen in place but the remaining columns can still be scrolled. Similar to this, passing numFrozenRows={m} will freeze the first m rows in place while allowing scrolling of all subsequent rows.

Syntax:

<Table numFrozenColumns={n} 
       numFrozenRows={m}>
</Table>

Prerequisite:

• Introduction and installation ReactJS
• React.js 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: Now write down the following code in the App.js file. Here, we are freezing 2 columns of this Table Component.

App.js

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() {

    // Sample Column data
    const sampleColumn = (index) => {
        return <Cell>CellNo{index}</Cell>;
    };

    return (
        <div style={{ display: "block", width: 800,
                      height: 400, padding: 30 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>ReactJS Blueprint Table features Freezing</h4>
            <Table numRows={30} numFrozenColumns={2}>
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
            </Table>
        </div>
    );
}

export default App;

Output:

Example 2: Here, we are freezing some rows and columns of the Table Component.

App.js

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() {
    // Sample Column data
    const sampleColumn = (index) => {
        return <Cell>CellNo{index}</Cell>;
    };
    return (
        <div style={{ display: "block", width: 800,
                      height: 400, padding: 30 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>ReactJS Blueprint Table features Freezing</h4>
            <Table numRows={30} numFrozenColumns={2}
                numFrozenRows={3}>
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
                <Column name="Numbers"
                    cellRenderer={sampleColumn} />
            </Table>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#table/features.freezing