React.js Blueprint Table features Editing

Last Updated : 15 Nov, 2022

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 EditableCell component on a Column enables double-click-to-edit functionality in the table body and 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.
cellRenderer: It is used to define how data is displayed and we can set it on each column component.
renderColumnHeaderCell: It is used to define the header in the column component.

EditableCell2 props:

columnIndex: It specifies the column index of the cell.
interactive: It is a boolean value. It determines whether to enable mouse interaction or not.
isFocused: It is a boolean value. It determines whether the current cell is focused or not.
key: A string object.
cellRef: A ref handle for the outer div.
loading: It is a boolean value. It determines whether it’s in a loading state or not.
onCancel: A void callback function that gets triggered when an edit is canceled.
onChange: A void callback function that gets triggered while editing.
onConfirm: A void callback function that gets triggered when an edit is confirmed.
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.
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.
value: It shows the value in the text box.
wrapText: It is a boolean value. It determines whether the contents of the cell will be wrapped or not.

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:

<EditableCell2>...</EditableCell2>

<EditableName> ... </EditableName>

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: In the below example, 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, ColumnHeaderCell2, EditableName }  
from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumn = () => { 
        return <ColumnHeaderCell2  
                   nameRenderer={EditableNameComponent} 
        /> 
    }; 
  
    const EditableNameComponent = () => { 
        return <EditableName  name="Edit Column Header"> 
         </EditableName> 
    }; 
  
    return ( 
        <div style={{ margin: 20 }}> 
          <h1 style={{color:"green"}}>GeeksforGeeks</h1>  
          <strong>  
              ReactJS Blueprint Table features Editing  
          </strong> 
            <Table numRows={4}> 
                <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: We are importing { Column, Table, EditableCell2 } 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”.

In this example, the custom sampleData function returns the EditableCell2 component showing different values.

App.js

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, EditableCell2 } 
    from "@blueprintjs/table"; 
  
  
function App() { 
  
    const sampleData = (idx) => { 
        return <EditableCell2 value={2 * idx * 100 + 3} /> 
    }; 
  
    return ( 
        <div style={{ margin: 20 }}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <strong> 
                ReactJS Blueprint Table features Editing 
            </strong> 
  
            <Table numRows={5}> 
                <Column 
                    name="ID"
                    cellRenderer={sampleData} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;