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.
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: We are adding a JSON object named customer that contains the name, products, and reviews. Like above we created three functions naming sampleColumn0,sampleColumn1, and sampleColumn2 that show the name, product, and review respectively, and are called through the cellRenderer prop of the Column.
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://blueprintjs.com/docs/versions/1/#table-js.truncatedformat