Display engaging tables from JSON data

As long as you can format your data as a JSON array, you can use this component to display it in dynamic and engaging tables. The cell types include text, code, number, boolean (example 1 below), tags (example 2 below), links, icons, and images.

This component is very flexible and it supports various cell formats, filtering, and customization options, making it perfect for displaying structured data in your documentation. You can see the full list of options on this page: examples.

Example 1: Custom Icons with Hover Text

Service	Status	Monitoring
Authentication API
Payment Gateway
Email Service

Example 2: Tags with custom color schemes

Developer	Technologies
Alice Johnson	JavaScriptVue.jsNode.js
Bob Smith	PythonDjangoPostgreSQL
Carol Chen	ReactTypeScriptGraphQLAWS

Setup

Do initial installation first

Before you follow any of the guides below, you should import and install this project in your VitePress site.

Import the component in docs/.vitepress/theme/index.ts (or equivalent)

index.ts

import { JSONTable } from '@cynber/vitepress-valence'

export default {
    enhanceApp({ app, router, siteData }) {
    app.component('JSONTable', JSONTable) 
    }
} satisfies Theme