JSONTable: Examples

Inline Data with Customization

Model ↓	Range (years)	Paradox Protection	Fuel Type	Reserve
Temporal Trekker X5	500		Neutrino CoreSolar
Era Explorer V2	200		QuantumDark MatterSolar
Chrono Cruiser 3000	100		QuantumDark Matter

<JSONTable
    :jsonDataProp="inlineTimeTravel"
    :columns="[
        { key: 'modelName', title: 'Model', format: 'text' },
        { key: 'maxTimeJump', title: 'Range (years)', format: 'number' },
        { key: 'isAvailable', title: 'Paradox Protection', format: 'boolean' },
        { key: 'fuelType', title: 'Fuel Type', format: 'tags' },
        { key: 'productLink', title: 'Reserve', format: 'link' }
    ]"
    defaultSortField="modelName"
/>

<script>
export default {
  data() {
    return {
      inlineTimeTravel: [
        {
            "modelName": "Chrono Cruiser 3000",
            // ...
        },
        // ...
    ],
    };
  }
};
</script>

See full code

<JSONTable
    :jsonDataProp="inlineTimeTravel"
    :columns="[
        { key: 'modelName', title: 'Model', format: 'text' },
        { key: 'maxTimeJump', title: 'Range (years)', format: 'number' },
        { key: 'isAvailable', 
          title: 'Paradox Protection', 
          format: 'boolean',
          options: {
            displayAs: 'icon',
          }
        },
        { key: 'fuelType', title: 'Fuel Type', format: 'tags' },
        { key: 'productLink', title: 'Reserve', format: 'link' }
    ]"
    defaultSortField="modelName"
/>
 
<script>
export default {
  data() {
    return {
      inlineTimeTravel: [
        {
            "modelName": "Chrono Cruiser 3000",
            "maxTimeJump": 100,
            "isAvailable": true,
            "fuelType": [
                "Quantum",
                "Dark Matter"
            ],
            "productLink": "https://example.com/chrono-cruiser-3000"
        },
        {
            "modelName": "Temporal Trekker X5",
            "maxTimeJump": 500,
            "isAvailable": false,
            "fuelType": [
                "Neutrino Core",
                "Solar"
            ],
            "productLink": "https://example.com/temporal-trekker-x5"
        },
        {
            "modelName": "Era Explorer V2",
            "maxTimeJump": 200,
            "isAvailable": true,
            "fuelType": [
                "Quantum",
                "Dark Matter",
                "Solar"
            ],
            "productLink": "https://example.com/era-explorer-v2"
        }
    ],
    };
  }
};
</script>

Local Data File Example

No data available

example.md

<JSONTable
    jsonPath="/sample-time.json"
    :columns="
        [
            { key: 'modelName', title: 'Model', format: 'text' },
            { key: 'maxTimeJump', title: 'Range (years)', format: 'number' },
            { key: 'isAvailable', title: 'Paradox Protection', format: 'boolean' },
            { key: 'fuelType', title: 'Fuel Type', format: 'tags' },
            { key: 'productLink', title: 'Reserve', format: 'link' }
        ]
    "
    defaultSortField="modelName"
/>

public/sample-time.json

[
    {
        "modelName": "Chrono Cruiser 3000",
        "maxTimeJump": 100,
        "isAvailable": true,
        "fuelType": [
            "Quantum",
            "Dark Matter"
        ],
        "productLink": "https://example.com/"
    },
    {
        "modelName": "Temporal Trekker X5",
        "maxTimeJump": 500,
        "isAvailable": false,
        "fuelType": [
            "Neutrino Core",
            "Solar"
        ],
        "productLink": "https://example.com/"
    },
    {
        "modelName": "Era Explorer V2",
        "maxTimeJump": 200,
        "isAvailable": true,
        "fuelType": [
            "Quantum",
            "Dark Matter",
            "Solar"
        ],
        "productLink": "https://example.com/"
    }
]

Loading JSON from URL with Filtering and Sorting

• Loading JSON from a URL (view the data at jsonplaceholder.typicode.com/users)
• Selecting from nested JSON fields (e.g. address.city and company.name)
• Filtering and sorting

<JSONTable
    jsonPath="https://jsonplaceholder.typicode.com/users"
    :columns="[
        { key: 'name', title: 'Name', format: 'text' },
        { key: 'address.city', title: 'City', format: 'text' },
        { key: 'company.name', title: 'Company', format: 'text' },
        { key: 'address.geo.lat', title: 'Latitude', format: 'text' },
        { key: 'id', title: 'ID', format: 'number',
          options: { decimals: 0 }
        }
    ]"
    defaultSortField="name"
    :filters="{
        type: 'and',
        conditions: [
            {
                type: 'condition',
                key: 'id',
                operator: 'greaterThan',
                value: 4
            },
            {
                type: 'condition',
                key: 'address.geo.lat',
                operator: 'lessThan',
                value: '0'
            }
        ]
    }"
/>

No data available