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

Nested Data Structures

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']

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

    customSorting

    option.

PreviousColumn TemplatesNextSelectable Rows