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 HTMLTable Component allows to add modifier props to apply styles to an HTML <table> element
The JSONFormat Component allows the incorporation of data that is in JSON form into the table.
React.js Blueprint Table JS API JSONFormat props:
- measureByApproxOptions: It helps to further add style to the text and the popover drawn.
- detectTruncation: It is a boolean value. It denotes whether the component should keep track of the truncation state of the string content or not.
- omitQuotesOnStrings: It is a boolean value. It denotes whether to keep the double quotes(“”) on the string or not.
- stringify: It is a method that stringifies the JSON object to a string with 2-space indentation.
- 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> <JSONFormat>....</JSONFormat></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 @blueprintjs/table
Project Structure: It will look like this:
Example 1: We are importing the Column, Cell, Table, and JSONFormat 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 a JSON object naming it as data that has a user and within it has name and age. Created a function sampleColumn which shows the data in the cells and is called through the cellRenderer prop of the Column.
App.js
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import "@blueprintjs/table/lib/css/table.css"; import { Column, Cell, Table, JSONFormat } from "@blueprintjs/table"; function App() { const data = { "user": { "name": "gfg", "age": 56, } } const sampleColumn = () => { return <Cell> <JSONFormat>{data}</JSONFormat></Cell>; }; return ( <div style={{ margin: 30 }}> <h4>ReactJS Blueprint Table JS API JSONFormat</h4> <Table numRows={3}> <Column name="Using JSONFormat" cellRenderer={sampleColumn} /> </Table> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: In this example, we have added more data to our data object. Created three functions named sampleColumn0, sampleColumn1, and sampleColumn2 which show the JSON data in the cells and are called through the cellRenderer prop of the Column.
App.js
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import "@blueprintjs/table/lib/css/table.css"; import { Column, Cell, Table, JSONFormat } from "@blueprintjs/table"; function App() { const data = { user0: { "name": "gfg", "age": 56, }, user1: { "name": "John", "age": 6, }, user2: { "name": "Rita", "age": 80, } } const sampleColumn0 = () => { return <Cell><JSONFormat>{data.user0}</JSONFormat></Cell>; }; const sampleColumn1 = () => { return <Cell><JSONFormat>{data.user1}</JSONFormat></Cell>; }; const sampleColumn2 = () => { return <Cell><JSONFormat>{data.user2}</JSONFormat></Cell>; }; return ( <div style={{ margin: 30 }}> <h4>ReactJS Blueprint Table JS API JSONFormat</h4> <Table numRows={1}> <Column name="User0 Info" cellRenderer={sampleColumn0} /> <Column name="User1 Info" cellRenderer={sampleColumn1} /> <Column name="User2 Info" cellRenderer={sampleColumn2} /> </Table> </div> ); } export default App; |
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.jsonformat
