@redheadphone/react-json-grid - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

dist/index.es.js

@@ -30,4 +30,4 @@ import React, { useState, Fragment, useRef, useEffect } from 'react';
 
-var css_248z = ".styles_json-grid-container__D8Ct0 {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.styles_json-grid-container__D8Ct0,\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm .styles_json-grid-table__VFxOm {\n  margin: 3px 0px;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm .styles_glyphicon__p0P03 {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_highlight__HZ3m4 {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG,\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_name__5VuYX {\n  color: var(--jg-key-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_index__-tk7H {\n  color: var(--jg-index-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_number__hVG0B {\n  color: var(--jg-number-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_boolean__4MfMG {\n  color: var(--jg-boolean-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_string__JAVFr {\n  color: var(--jg-string-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_undefined__SEKlv {\n  color: var(--jg-object-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_object__6D0Dk {\n  color: var(--jg-object-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_order__5CriR {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.styles_json-grid-container__D8Ct0 .styles_key__-d8qq {\n  vertical-align: top;\n}\n.styles_json-grid-container__D8Ct0 .styles_title__ruWz- {\n  font-weight: bold;\n}\n.styles_json-grid-container__D8Ct0 .styles_plusminus__WBxNp {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.styles_json-grid-container__D8Ct0 .styles_search-highlight__zrNw2 {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
-var styles = {"json-grid-container":"styles_json-grid-container__D8Ct0","json-grid-table":"styles_json-grid-table__VFxOm","glyphicon":"styles_glyphicon__p0P03","highlight":"styles_highlight__HZ3m4","obj":"styles_obj__Y8WYG","name":"styles_name__5VuYX","index":"styles_index__-tk7H","number":"styles_number__hVG0B","boolean":"styles_boolean__4MfMG","string":"styles_string__JAVFr","undefined":"styles_undefined__SEKlv","object":"styles_object__6D0Dk","order":"styles_order__5CriR","key":"styles_key__-d8qq","title":"styles_title__ruWz-","plusminus":"styles_plusminus__WBxNp","search-highlight":"styles_search-highlight__zrNw2"};
+var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
+var styles = {"json-grid-container":"json-grid-container","json-grid-table":"json-grid-table","glyphicon":"glyphicon","highlight":"highlight","obj":"obj","name":"name","index":"index","number":"number","boolean":"boolean","string":"string","undefined":"undefined","object":"object","order":"order","key":"key","title":"title","plusminus":"plusminus","search-highlight":"search-highlight"};
 styleInject(css_248z);
@@ -458,2 +458,3 @@
     let keys = [];
+    let isArray = Array.isArray(data);
     if (Array.isArray(data)) {
@@ -469,3 +470,6 @@ allObjects = data.length > 0;
         }
-        keys = Array.from(keysSet);
+        if (allObjects)
+            keys = Array.from(keysSet);
+        else
+            keys = Object.keys(data);
     }
@@ -475,3 +479,3 @@ else if (isObject(data)) {
     }
-    return { allObjects, keys };
+    return { allObjects, keys, isArray };
 }
@@ -538,3 +542,3 @@ function validateProps({ data, defaultExpandDepth, defaultExpandKeyTree, onSelect, highlightSelected, searchText, theme, }) {
             const rowIndex = Array.prototype.indexOf.call(nextHighlightElement?.parentElement?.children, nextHighlightElement);
-            nextKeyPath = [rowIndex];
+            nextKeyPath = [(isArray && !allObjects ? [rowIndex] : rowIndex)];
         }
@@ -558,3 +562,3 @@ else if (currentTarget.hasAttribute("data-colhighlight")) {
                 else {
-                    nextKeyPath = [key];
+                    nextKeyPath = [(isArray ? parseInt(key) : key)];
                 }
@@ -595,3 +599,3 @@ }
     };
-    const { allObjects, keys } = checkAllObjects(data);
+    const { allObjects, keys, isArray } = checkAllObjects(data);
     if (level !== 0) {
@@ -598,0 +602,0 @@ const [open, setOpen] = useState(Boolean(level <= defaultExpandDepth || defaultExpandKeyTree));

dist/index.js

@@ -32,4 +32,4 @@ 'use strict';
 
-var css_248z = ".styles_json-grid-container__D8Ct0 {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.styles_json-grid-container__D8Ct0,\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm .styles_json-grid-table__VFxOm {\n  margin: 3px 0px;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm .styles_glyphicon__p0P03 {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_highlight__HZ3m4 {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG,\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_name__5VuYX {\n  color: var(--jg-key-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_index__-tk7H {\n  color: var(--jg-index-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_number__hVG0B {\n  color: var(--jg-number-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_boolean__4MfMG {\n  color: var(--jg-boolean-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_string__JAVFr {\n  color: var(--jg-string-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_undefined__SEKlv {\n  color: var(--jg-object-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_object__6D0Dk {\n  color: var(--jg-object-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_order__5CriR {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.styles_json-grid-container__D8Ct0 .styles_key__-d8qq {\n  vertical-align: top;\n}\n.styles_json-grid-container__D8Ct0 .styles_title__ruWz- {\n  font-weight: bold;\n}\n.styles_json-grid-container__D8Ct0 .styles_plusminus__WBxNp {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.styles_json-grid-container__D8Ct0 .styles_search-highlight__zrNw2 {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
-var styles = {"json-grid-container":"styles_json-grid-container__D8Ct0","json-grid-table":"styles_json-grid-table__VFxOm","glyphicon":"styles_glyphicon__p0P03","highlight":"styles_highlight__HZ3m4","obj":"styles_obj__Y8WYG","name":"styles_name__5VuYX","index":"styles_index__-tk7H","number":"styles_number__hVG0B","boolean":"styles_boolean__4MfMG","string":"styles_string__JAVFr","undefined":"styles_undefined__SEKlv","object":"styles_object__6D0Dk","order":"styles_order__5CriR","key":"styles_key__-d8qq","title":"styles_title__ruWz-","plusminus":"styles_plusminus__WBxNp","search-highlight":"styles_search-highlight__zrNw2"};
+var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
+var styles = {"json-grid-container":"json-grid-container","json-grid-table":"json-grid-table","glyphicon":"glyphicon","highlight":"highlight","obj":"obj","name":"name","index":"index","number":"number","boolean":"boolean","string":"string","undefined":"undefined","object":"object","order":"order","key":"key","title":"title","plusminus":"plusminus","search-highlight":"search-highlight"};
 styleInject(css_248z);
@@ -460,2 +460,3 @@
     let keys = [];
+    let isArray = Array.isArray(data);
     if (Array.isArray(data)) {
@@ -471,3 +472,6 @@ allObjects = data.length > 0;
         }
-        keys = Array.from(keysSet);
+        if (allObjects)
+            keys = Array.from(keysSet);
+        else
+            keys = Object.keys(data);
     }
@@ -477,3 +481,3 @@ else if (isObject(data)) {
     }
-    return { allObjects, keys };
+    return { allObjects, keys, isArray };
 }
@@ -540,3 +544,3 @@ function validateProps({ data, defaultExpandDepth, defaultExpandKeyTree, onSelect, highlightSelected, searchText, theme, }) {
             const rowIndex = Array.prototype.indexOf.call(nextHighlightElement?.parentElement?.children, nextHighlightElement);
-            nextKeyPath = [rowIndex];
+            nextKeyPath = [(isArray && !allObjects ? [rowIndex] : rowIndex)];
         }
@@ -560,3 +564,3 @@ else if (currentTarget.hasAttribute("data-colhighlight")) {
                 else {
-                    nextKeyPath = [key];
+                    nextKeyPath = [(isArray ? parseInt(key) : key)];
                 }
@@ -597,3 +601,3 @@ }
     };
-    const { allObjects, keys } = checkAllObjects(data);
+    const { allObjects, keys, isArray } = checkAllObjects(data);
     if (level !== 0) {
@@ -600,0 +604,0 @@ const [open, setOpen] = React.useState(Boolean(level <= defaultExpandDepth || defaultExpandKeyTree));

dist/index.umd.js

@@ -34,4 +34,4 @@ (function (global, factory) {
 
-  var css_248z = ".styles_json-grid-container__D8Ct0 {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.styles_json-grid-container__D8Ct0,\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm .styles_json-grid-table__VFxOm {\n  margin: 3px 0px;\n}\n.styles_json-grid-container__D8Ct0 .styles_json-grid-table__VFxOm .styles_glyphicon__p0P03 {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_highlight__HZ3m4 {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG,\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_name__5VuYX {\n  color: var(--jg-key-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_index__-tk7H {\n  color: var(--jg-index-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_number__hVG0B {\n  color: var(--jg-number-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_boolean__4MfMG {\n  color: var(--jg-boolean-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_string__JAVFr {\n  color: var(--jg-string-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_undefined__SEKlv {\n  color: var(--jg-object-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_obj__Y8WYG .styles_object__6D0Dk {\n  color: var(--jg-object-color);\n}\n.styles_json-grid-container__D8Ct0 .styles_order__5CriR {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.styles_json-grid-container__D8Ct0 .styles_key__-d8qq {\n  vertical-align: top;\n}\n.styles_json-grid-container__D8Ct0 .styles_title__ruWz- {\n  font-weight: bold;\n}\n.styles_json-grid-container__D8Ct0 .styles_plusminus__WBxNp {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.styles_json-grid-container__D8Ct0 .styles_search-highlight__zrNw2 {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
-  var styles = {"json-grid-container":"styles_json-grid-container__D8Ct0","json-grid-table":"styles_json-grid-table__VFxOm","glyphicon":"styles_glyphicon__p0P03","highlight":"styles_highlight__HZ3m4","obj":"styles_obj__Y8WYG","name":"styles_name__5VuYX","index":"styles_index__-tk7H","number":"styles_number__hVG0B","boolean":"styles_boolean__4MfMG","string":"styles_string__JAVFr","undefined":"styles_undefined__SEKlv","object":"styles_object__6D0Dk","order":"styles_order__5CriR","key":"styles_key__-d8qq","title":"styles_title__ruWz-","plusminus":"styles_plusminus__WBxNp","search-highlight":"styles_search-highlight__zrNw2"};
+  var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
+  var styles = {"json-grid-container":"json-grid-container","json-grid-table":"json-grid-table","glyphicon":"glyphicon","highlight":"highlight","obj":"obj","name":"name","index":"index","number":"number","boolean":"boolean","string":"string","undefined":"undefined","object":"object","order":"order","key":"key","title":"title","plusminus":"plusminus","search-highlight":"search-highlight"};
   styleInject(css_248z);
@@ -462,2 +462,3 @@
       let keys = [];
+      let isArray = Array.isArray(data);
       if (Array.isArray(data)) {
@@ -473,3 +474,6 @@ allObjects = data.length > 0;
           }
-          keys = Array.from(keysSet);
+          if (allObjects)
+              keys = Array.from(keysSet);
+          else
+              keys = Object.keys(data);
       }
@@ -479,3 +483,3 @@ else if (isObject(data)) {
       }
-      return { allObjects, keys };
+      return { allObjects, keys, isArray };
   }
@@ -542,3 +546,3 @@ function validateProps({ data, defaultExpandDepth, defaultExpandKeyTree, onSelect, highlightSelected, searchText, theme, }) {
               const rowIndex = Array.prototype.indexOf.call(nextHighlightElement?.parentElement?.children, nextHighlightElement);
-              nextKeyPath = [rowIndex];
+              nextKeyPath = [(isArray && !allObjects ? [rowIndex] : rowIndex)];
           }
@@ -562,3 +566,3 @@ else if (currentTarget.hasAttribute("data-colhighlight")) {
                   else {
-                      nextKeyPath = [key];
+                      nextKeyPath = [(isArray ? parseInt(key) : key)];
                   }
@@ -599,3 +603,3 @@ }
       };
-      const { allObjects, keys } = checkAllObjects(data);
+      const { allObjects, keys, isArray } = checkAllObjects(data);
       if (level !== 0) {
@@ -602,0 +606,0 @@ const [open, setOpen] = React.useState(Boolean(level <= defaultExpandDepth || defaultExpandKeyTree));

package.json

 {
   "name": "@redheadphone/react-json-grid",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "React Component that converts JSON to nested grid tables.",
@@ -5,0 +5,0 @@ "author": "Huzaifa Khilawala",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

243799

decreased by-0.37%

No dependency changes