VpvTableJSON: Sorting/Filtering Examples

Base Data (for reference)

View JSON Data

[
  {
    "id": "P01",
    "name": "Wireless Headphones",
    "category": "Electronics",
    "price": 199.99,
    "inStock": true,
    "rating": 4.5,
    "tags": ["audio", "wireless"]
  },
  {
    "id": "P02",
    "name": "Coffee Maker",
    "category": "Appliances",
    "price": 89.99,
    "inStock": true,
    "rating": 4.2,
    "tags": ["kitchen", "coffee"]
  },
  {
    "id": "P03",
    "name": "Running Shoes",
    "category": "Sports",
    "price": 129.99,
    "inStock": false,
    "rating": 4.8,
    "tags": ["footwear", "running"]
  },
  {
    "id": "P04",
    "name": "Smartphone",
    "category": "Electronics",
    "price": 699.99,
    "inStock": true,
    "rating": 4.3,
    "tags": ["mobile", "tech"]
  },
  {
    "id": "P05",
    "name": "Yoga Mat",
    "category": "Sports",
    "price": 29.99,
    "inStock": true,
    "rating": 4.1,
    "tags": ["fitness", "yoga"]
  },
  {
    "id": "P06",
    "name": "Blender",
    "category": "Appliances",
    "price": 149.99,
    "inStock": false,
    "rating": 4.6,
    "tags": ["kitchen", "smoothies"]
  }
]

1. No Specified Sort/Filter

No data available

View Code

<VpvTableJSON
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'id', title: 'Product ID', format: 'code' },
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { 
        key: 'price', title: 'Price', format: 'number', 
        options: { 
            decimals: 2,
            formatter: (value) => `$${value}`
        }
    },
    { key: 'inStock', title: 'In Stock', format: 'boolean' },
    { 
        key: 'rating', title: 'Rating', format: 'number', 
        options: { 
            decimals: 1,
            monospace: true
        } 
    }
  ]"
/>

2. Basic Sorting

Products - Sorted by Price (High to Low)

No data available

View Code

<VpvTableJSON
  title="Products - Sorted by Price (High to Low)"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'id', title: 'Product ID', format: 'code' },
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { 
        key: 'price', title: 'Price', format: 'number', 
        options: { 
            decimals: 2,
            formatter: (value) => `$${value}`
        }
    }
  ]"
  defaultSortField="price"
  defaultSortDirection="descending"
/>

3. Force Disable Sorting

Products - No Sorting

No data available

View Code

<VpvTableJSON
  title="Products - No Sorting"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { 
        key: 'price', title: 'Price', format: 'number', 
        options: { 
            decimals: 2,
            formatter: (value) => `$${value}`
        }
    }
  ]"
  :sortable="false"
/>

4. Simple AND Filter

This will display all products that are both Electronics and In Stock.

Electronics in Stock

No data available

View Code

<VpvTableJSON
  title="Electronics in Stock"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { key: 'price', title: 'Price', format: 'number' },
    { key: 'inStock', title: 'In Stock', format: 'boolean' }
  ]"
  :filters="{
    type: 'and',
    conditions: [
      { type: 'condition', key: 'category', operator: 'equals', value: 'Electronics' },
      { type: 'condition', key: 'inStock', operator: 'equals', value: true }
    ]
  }"
/>

5. Simple OR Filter

This will display all products that are either Electronics or Sports.

Electronics or Sports Products

No data available

View Code

<VpvTableJSON
  title="Electronics or Sports Products"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { key: 'price', title: 'Price', format: 'number' }
  ]"
  :filters="{
    type: 'or',
    conditions: [
      { type: 'condition', key: 'category', operator: 'equals', value: 'Electronics' },
      { type: 'condition', key: 'category', operator: 'equals', value: 'Sports' }
    ]
  }"
/>

6. Price Range Filter

This will display all products that are between $50 and $200.

Products $50-$200

No data available

View Code

<VpvTableJSON
  title="Products $50-$200"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'price', title: 'Price', format: 'number' },
    { key: 'category', title: 'Category', format: 'text' }
  ]"
  :filters="{
    type: 'and',
    conditions: [
      { type: 'condition', key: 'price', operator: 'greaterThanOrEqual', value: 50 },
      { type: 'condition', key: 'price', operator: 'lessThanOrEqual', value: 200 }
    ]
  }"
  defaultSortField="price"
/>

7. Complex Nested Filter

This will display all products that are high-rated and either Electronics or Sports.

High-rated Electronics or Sports (4.3+ stars)

No data available

View Code

<VpvTableJSON
  title="High-rated Electronics or Sports (4.3+ stars)"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { key: 'rating', title: 'Rating', format: 'number' },
    { key: 'price', title: 'Price', format: 'number' }
  ]"
  :filters="{
    type: 'and',
    conditions: [
      { type: 'condition', key: 'rating', operator: 'greaterThanOrEqual', value: 4.3 },
      {
        type: 'or',
        conditions: [
          { type: 'condition', key: 'category', operator: 'equals', value: 'Electronics' },
          { type: 'condition', key: 'category', operator: 'equals', value: 'Sports' }
        ]
      }
    ]
  }"
  defaultSortField="rating"
  defaultSortDirection="descending"
/>

8. Array Filter

Kitchen Products

No data available

View Code

<VpvTableJSON
  title="Kitchen Products"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { key: 'tags', title: 'Tags', format: 'tags' },
    { key: 'price', title: 'Price', format: 'number' }
  ]"
  :filters="{
    type: 'condition',
    key: 'tags',
    operator: 'includes',
    value: 'kitchen'
  }"
/>

9. String Contains Filter

This will display all products that have 'phone' in the name.

Phone Products

No data available

View Code

<VpvTableJSON
  title="Phone Products"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { key: 'price', title: 'Price', format: 'number' }
  ]"
  :filters="{
    type: 'condition',
    key: 'name',
    operator: 'contains',
    value: 'phone'
  }"
/>

10. Not Equals Filter

Out of Stock Products

No data available

View Code

<VpvTableJSON
  title="Out of Stock Products"
  jsonPath="/sample-product.json"
  :columns="[
    { key: 'name', title: 'Product Name', format: 'text' },
    { key: 'category', title: 'Category', format: 'text' },
    { key: 'inStock', title: 'In Stock', format: 'boolean' },
    { key: 'price', title: 'Price', format: 'number' }
  ]"
  :filters="{
    type: 'condition',
    key: 'inStock',
    operator: 'equals',
    value: false
  }"
/>