Interactive demos available below!
The library react-json-grid provides the React component JSONGrid, which is a user-friendly and versatile tool that enables you to effortlessly transform nested JSON objects or arrays into structured nested grid tables. This component has got you covered when dealing with big and complex JSON data, allowing you to display it in an organized manner.
Run the following command in your React project directory:
npm install @redheadphone/react-json-grid
You can also use other package managers like yarn
or pnpm
, if preferred.
Here's an example of how to use the react-json-grid library:
import JSONGrid from '@redheadphone/react-json-grid'
function ExampleComponent() {
const data = {
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters": {
"batter": [
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping": [
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
return <JSONGrid data={data} />
}
The JSONGrid component supports the following props:
Name | Type | Description | Default |
---|---|---|---|
data | object | The JSON object or array to be transformed into a grid table. | undefined |
defaultExpandDepth | number | The depth to which the grid is expanded by default. | 0 |
defaultExpandKeyTree | object | Tree-like structure with all keys that needs to be expanded. | undefined |
onSelect | function | Event to obtain selected cell's keyPath | (keyPath)=>{} |
highlightSelected | boolean | Whether to highlight the selected cell or not. | true |
searchText | string | The text that needs to be searched in the JSON data. | undefined |
theme | string | The theme name that needs to be applied. | 'default' |
customTheme | object | The customTheme object which specify color code of each part of grid. | {} |
Note: Pass one of above themes as a string in the theme prop. You can contribute your custom theme in themes.js if you want.
{
"bgColor": "#222",
"borderColor": "#b5b5b5",
"selectHighlightBgColor": "#3b3b3b",
"cellBorderColor": "#474747",
"keyColor": "#ffffff",
"indexColor": "#949494",
"numberColor": "#6c99bb",
"booleanColor": "#6c99bb",
"stringColor": "#a5c261",
"objectColor": "#ffffff",
"tableHeaderBgColor": "#444",
"tableIconColor": "#ffffff",
"searchHighlightBgColor": "#565a36"
}
Note: These fields override original theme fields, so all fields are not mandatory. All field values need to be strings that are accepted by CSS for color.