vue-tables-2
  • Dependencies & Compatability
  • Getting Started
    • Vue Version 3
  • Client Table
    • Asynchronous Loading
    • Grouping
    • Filtering Algorithm
    • Editable Cells
  • Server Table
    • Implementations
    • Custom Request Function
    • Setting Multiple Request Parameters
    • Error Message
    • Draw Counter
  • Virtual Pagination
  • Custom Template
  • Column Templates
  • Nested Data Structures
  • Selectable Rows
  • Date Columns
  • List Filters
  • Custom Filters
  • Custom Sorting
  • Multiple Sorting
  • Child Rows
  • Conditional Cell Styling
  • Columns Visibility
  • Methods
  • Properties
  • Events
  • Slots
  • Options API
Powered by GitBook
On this page

Was this helpful?

Nested Data Structures

PreviousColumn TemplatesNextSelectable Rows

Last updated 5 years ago

Was this helpful?

Oftentimes your dataset will consist of objects, rather than primitive types.

By default, the package has no knowledge of how those objects should be presented.

To tell the package how to handle those fields you can use one of two options, depending on your needs:

1. Decide which primitive property you would like to refer to as the relevant piece of data, by using the dot notation when declaring your `columns` prop. E.g: ['name','age','meta.education.degree']

2. Use

Option 1 is more simple and straight-forward. However, it disregards all the other properties, which means that sorting, filtering and presentation will all refer to the single piece of primitive data at the "end of the chain".

If you want to use the entire object, option 2 is your best route. This will allow you to incorporate all the properties in the presentation.

When using the client component note that:

  • Default filtering behaviour will recursively scan the entire object for the query.

  • If the column is sortable, you will need to define a sorting algorithm, using the option.

Templates
customSorting