React.js Blueprint Table JS API Table

Last Updated : 14 Dec, 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 Column Component shows the columns in the table.

Table Props:

cellRendererDependencies: It helps in re-rendering all cells when any item is changed.
children: It is used for the contents of the table.
columnWidths: It is used to set the width of the column.
enableColumnHeader: It is a boolean value. It helps to determine whether to hide the column headers or not.
enableColumnInteractionBar: It is a boolean value. It helps to determine whether to add an interaction bar on top of all column header cells and moves interaction triggers into it.
enableColumnReordering: It is a boolean value. It helps to determine whether to disable the reordering of columns or not.
enableColumnResizing: It is a boolean value. It helps to determine whether to disable resizing of columns or not.
enableFocusedCell: It is a boolean value. It helps to determine whether to keep a single focused cell or not.
enableGhostCells: It is a boolean value. It helps to determine whether to keep blank space or to cover the space with cells.
enableMultipleSelection: It is a boolean value. It helps to determine whether to select a region or not.
enableRowHeader: It is a boolean value. It helps to determine whether to hide the row headers and settings menu or not.
enableRowReordering: It is a boolean value. It helps to determine whether to disable the reordering of rows or not.
enableRowResizing: It is a boolean value. It helps to determine whether to disable resizing of rows or not.
focusedCell: It sets the focused cell state.
forceRerenderOnSelectionChange: It is a boolean value. It helps to determine whether to ignore the selection state deciding to re-render or not.
getCellClipboardData: A callback function that will be invoked for each cell when the user attempts to copy a selection via mod+c.
numFrozenColumns: It determines the number of columns to freeze to the left side of the table.
numFrozenRows: It determines the number of rows to freeze to the top of the table.
onColumnsReordered: A callback function that will be invoked when the user finishes drag-reordering one or more columns.
onColumnWidthChanged: A callback function that will be invoked when the user finishes drag-resizing a column.
onCompleteRender: A void callback function triggered when all cells in view have been completely rendered.
onCopy: A void callback function is triggered when the user copies data from the table.
onFocusedCell: A void callback function is triggered when the focus is changed in the table.
selectedRegions: It will set the selected regions in the cell.
selectedRegionTransform: A transform function that will be applied to the selected regions.
selectionModes: It determines the mode of selection.
styledRegionGroups: It defines the Styled region groups are rendered as overlays.
numRows: It is used to set the number of rows.
bodyContextMenuRenderer: A callback function to display a menu on the right-click on the table.
className: It is a space-delimited list of class names to pass along to a child element.
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.
onRowHeightChanged: A callback function that will be invoked when the user finishes drag-resizing a row.
onRowsReordered: A void callback function is triggered when the user finishes drag-reordering one or more rows.
onSelection: A callback function that will be invoked when the selection is changed in the table.
onVisibleCellsChange: A void callback function is triggered when the visible cell indices change in the table.
renderMode: It defines the way how the cells will be rendered.
rowHeaderCellRenderer: It renders the header cell of each row.
rowHeights: It determines the height of the row.

Instance methods:

resizeRowsByTallestCell: This method resizes all rows in the table to the height of the tallest cell in the particular column.
resizeRowsByApproximateHeight: This method resizes all rows in the table to the approximate maximum height of wrapped cell content in each row.
scrollToRegion: This method scrolls the table to the target region.

Syntax:

<Table> ... </Table>

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 this example, we are using the table component with the same number of rows and data that is rendered through the cellRenderer prop, which calls the custom function sampleColumn which returns a single cell with a 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 } 
    from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumn = (index) => { 
        return <Cell > {index * 100 + 6}</Cell> 
    }; 
  
    return ( 
        <div style={{ margin: 30 }}> 
            <h1 
                style={{ 
                    color: "green", 
                }} 
            > 
                GeeksforGeeks 
            </h1> 
            <h2>ReactJS Blueprint Table JS API Table</h2> 
            <h5>Table 1</h5> 
            <Table numRows={3} 
                enableGhostCells enableColumnHeader={false}> 
                <Column name="Id"
                    cellRenderer={sampleColumn} /> 
            </Table> 
            <h5>Table 2</h5> 
            <Table numRows={3} numFrozenRows={2}> 
                <Column name="Id"
                    cellRenderer={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 a table component that is taking 6 rows through numRows, we are passing onCopyHandler a custom function that shows copied! when we copy content from the table and passed the className prop.

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 } from "@blueprintjs/table"; 
import { Classes } from "@blueprintjs/core"; 
  
function App() { 
  
    const sampleColumn = (index) => { 
        return <Cell > {index * 100 + 6}</Cell> 
    }; 
  
    const onCopyHandler = () => { 
        alert("copied!") 
    } 
  
    return ( 
        <div style={{ margin: 30 }}> 
            <h1 
                style={{ 
                    color: "green", 
                }} 
            > 
                GeeksforGeeks 
            </h1> 
            <h2>ReactJS Blueprint Table JS API Table</h2> 
  
            <Table numRows={6} onCopy={onCopyHandler} 
                className={Classes.DARK} > 
                <Column name="Id"
                    cellRenderer={sampleColumn} /> 
            </Table> 
  
        </div> 
    ); 
} 
  
export default App;