JS Object Viewer

Um ein JavaScript Objekt oder Array visuell ansprechend darzustellen, kann der JsTableViewer verwendet werden. Dieser Viewer ist besonders nützlich, um komplexe Datenstrukturen in einer tabellarischen Form darzustellen.

import JsObjectViewer from '@tdev-components/shared/JsObject/Viewer';

<JsObjectViewer
  js={{
    name: "John Doe",
    age: 30,
    hobbies: [
      "Reading",
      "Traveling",
      {
        name: "Cycling",
        type: ["Sport", "Leisure"],
        details: { bike: "Norco", gear: "Mountain" },
      },
    ],
    address: {
      street: "123 Main St",
      city: "Anytown",
      country: "USA",
    },
    deeplyNested: {
      level1: {
        level2: {
          level3: {
            value: "Deep Value",
            array: [1, 2, 3, { nested: "Nested Value" }],
          },
        },
        level2b: {
          anotherValue: "Another Deep Value",
          array: [4, 5, 6],
        },
      },
    },
    foo: (name) => `Hello, ${name}!`,
  }}
/>

http://localhost:3000

age

30

name

John Doe

hobbies

Reading

Traveling

name

Cycling

type

Sport

Leisure

details

bike

Norco

gear

Mountain

address

city

Anytown

country

USA

street

123 Main St

deeplyNested

level1

level2

level3

level2b

anotherValue

Another Deep Value

array

4

5

6

foo

name => `Hello, ${name}!`

Parameter

collapseAt

collapseAt

Gibt an, ab welcher Tiefe die Darstellung der Objekte und Arrays zusammengeklappt werden soll.

default: 3, daher in der dritten Ebene werden Objekte und Arrays zusammengeklappt.

import JsObjectViewer from '@tdev-components/shared/JsObject/Viewer';

<JsObjectViewer
  js={{
    name: "John Doe",
    // ...
  }}
  collapseAt={1}
/>

http://localhost:3000

age

30

name

John Doe

hobbies

Reading

Traveling

name

Cycling

type

Sport

Leisure

details

address

city

Anytown

country

USA

street

123 Main St

deeplyNested

level1

foo

name => `Hello, ${name}!`