React.js Blueprint Table JS API EditableName

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 EditableName Component enables editing on the Column header in a table by clicking on the header text.

Table Props:

• numRows: It is used to set the number of rows.
• renderColumnHeaderCell: It is used to define the header in the column component.  

EditableName Props:

• className: It is a space-delimited list of class names to pass along to a child element.
• index: It specifies the index of the column, a unique identifier.
• intent: It defines the visual intent of color to apply to the element.
• name: It specifies the name displayed on the text box.
• onCancel: It is a void callback function that gets triggered when the edit is canceled.
• onChange: It is a void callback function that gets triggered while editing.
• onConfirm: It is a void callback function invoked when the edit is confirmed.

Syntax:

<EditableName> ... </EditableName>

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,ColumnHeaderCell,EditableName } 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 creating a custom function named sampleColumn getting called through the columnHeaderRenderer prop of the Column component that returns the ColumnHeaderCell Component that calls the EditableNameComponent a custom function that returns an EditableName component through the nameRenderer prop.

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

function App() {

    const sampleColumn = () => {
        return <ColumnHeaderCell
            nameRenderer={EditableNameComponent}
        />
    };

    const EditableNameComponent = () => {
        return <EditableName
            name="Name"

        />
    };

    return (
        <div style={{ margin: 20 }}>
            <h4>
                ReactJS Blueprint Table JS API EditableName
            </h4>
            <Table numRows={5}>
                <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 this example, we are adding two Column components to the Table Component where numRows={5}. Both the Column component call the custom function sampleColumnOne and sampleColumnTwo respectively that returns the ColumnHeaderCell Component that calls the EditableNameComponentOne a custom function that returns an EditableName  component in which we are passing intent, name and onChange prop that calls the onChangeHandler function that shows text in alert,  through the nameRenderer prop.

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

function App() {

    // sample column 1
    const sampleColumnOne = () => {
        return <ColumnHeaderCell
            nameRenderer={EditableNameComponentOne}
        />
    };
    // sample column 2
    const sampleColumnTwo = () => {
        return <ColumnHeaderCell
        >Age</ColumnHeaderCell>
    };

    // on change function
    const onChangeHandler = () => {
        alert('you are changing the name !')
    }

    const EditableNameComponentOne = () => {
        return <EditableName
            name="Name"
            onChange={onChangeHandler}
            intent="danger"
        />
    };


    return (
        <div style={{ margin: 20 }}>
            <h4>ReactJS Blueprint Table JS API EditableName</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.editablename