React.js Blueprint Table JS API TruncatedFormat

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 React.js Blueprint Table Component allows showing the data in tabular form. The TruncatedFormat feature allows the incorporation of the long forms of data into a concise format in the table.

Props:

• detectTruncation: It is a boolean value. It denotes whether the component should keep track of the truncation state of the string content or not. 
• measureByApproxOptions: It helps to further add style to the text and the popover drawn.
• parentCellHeight: It determines the height of the parent cell. 
• parentCellWidth: It determines the width of the parent cell. 
• preformatted: It is a boolean value. It sets the popover content style to white space.
• showPopover: It configures when the popover is shown with the TruncatedPopoverMode enum.
• truncateLength: It denotes the number of characters that are displayed before being truncated and appended with the truncationSuffix.
• truncationSuffix: It determines the string that is appended to the display string if it is truncated.

Syntax:

<Cell><TruncatedFormat>...</TruncatedFormat></Cell>

Prerequisite: 

• Introduction and installation ReactJS
• React.js Blueprint Table Component

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core
npm install --save @blueprintjs/table

Project Structure: It will look like this:

Example 1: We are importing the Column, Cell, Table, and TruncatedFormat from “@blueprintjs/core”. 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 an array named messages which contains strings.Created two functions named sampleColumn0 and sampleColumn1 which show the data in the cells and are called through the cellRenderer prop of the Column.

To the function, sampleColumn1 added TruncatedFormat and passed the prop truncateLength with a value of 5 to it.