JSONTable: Full Usage

Basic Usage

Displaying Data from a JSON File

Use the jsonPath prop to specify the source of your JSON data. It accepts a string that specifies the path to the JSON file, which can be either a local file or a URL to a remote resource.

Loading Data from a Local File

• assuming the file is in docs/.vitepress/public/sample-time.json:

<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"
/>

Table corresponding to the above code

No data available

Loading Data from a URL

<JSONTable
    jsonPath="https://jsonplaceholder.typicode.com/users"
    :columns="[
        { key: 'name', title: 'Name', format: 'text' },
        { key: 'company.name', title: 'Company', format: 'text' },
    ]"
    defaultSortField="name"
/>

Table corresponding to the above code

No data available

Displaying Inline JSON Data

To display data with the JSONTable component using inline JSON, use the jsonDataProp prop. This prop accepts an array of JSON objects directly within the component.

<JSONTable
    :jsonDataProp="[
        {
            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'
        }
    ]"
    :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' }
    ]"
/>

Table corresponding to the above code

Model	Range (years)	Paradox Protection	Fuel Type	Reserve
Chrono Cruiser 3000	100		QuantumDark Matter
Temporal Trekker X5	500		Neutrino CoreSolar

You can also take advantage of the <script> tag to define your data.

<JSONTable
    :jsonDataProp="inlineTimeTravel"
// ...
/>
 
<script>
export default {
  data() {
    return {
      inlineTimeTravel: [
        // ...
      ],
    };
  }
};
</script>

Configuring the Table

columns Prop

Element	Type	Optional	Description
key	string	False	The key in the JSON data to display. If nested, use dot notation (ex. company.name).
title	string	False	The text to display in the column header.
format	string	True	The format type for the data in the column. See below for available formats and options.
options	object	True	Additional options specific to the format. See below for available options.

Column Format Types

Text

• Displays the text as-is, without any special formatting.
• No additional options required.

Number

Formats and displays numeric data, with options for decimal places.

No data available

No data available

• Text
• Number
• Boolean
• Link
• Tags
• Icon

---

Sorting Data

Setting the Default Sort Field and Direction

• Using the defaultSortField prop to set the initial sort column.
• Using the defaultSortDirection prop to set ascending or descending order.

Enabling Column Sorting

• How users can sort data by clicking on column headers.
• Visual indicators for sorted columns.

---

Filtering Data

Filter Object Structure

• How to construct the filters prop using logical conditions.
• Explanation of the filter types: and, or, condition.

Filter Types and Operators

• List of supported operators:
  • equals
  • notEquals
  • greaterThan
  • greaterThanOrEqual
  • lessThan
  • lessThanOrEqual
  • includes
  • notIncludes
  • contains
  • notContains

Examples of Filtering

• Example of filtering data where id is greater than 4.
• Example of combining multiple conditions using and and or.

---