Options
All
  • Public
  • Public/Protected
  • All
Menu

Class VueDatatable<TRow, TSub>

The main component of the module, used to display a datatable.

Type parameters

Hierarchy

  • object & object & Vue<this>
    • VueDatatable

Index

Vue Props

Vue Slots

Vue Events

Properties

Accessors

Methods

Vue Props

Const name

name: string

The name of the datatable. It should be unique per page.

Const waitForPager

waitForPager: boolean

Set to true to defer the initialization of the table after a pager has been attached. It may resolve issues related to double execution of data function.

Const columns

columns: TColumnsDefinition<TRow>

List of columns definitions displayed by this datatable.

Const data

data: TRow[] | TDataFn<TRow> | unknown

The list of items to display, or a getter function.

Const filter

filter: string | string[]

Value to match in rows for display filtering.

Const perPage

perPage: number

Maximum number of rows displayed per page.

Const rowClasses

rowClasses: TClassVal | function | null

Class(es) or getter function to get row classes.

Vue Slots

no-results

  • no-results()

  • Shown only if no rows are displayed

default

  • default(row: TRow, index: number, columns: Column[])

  • Used to render each row

    Parameters

    • row: TRow

      The current row to display.

    • index: number

      The current row index.

    • columns: Column[]

      The list of columns.

footer

  • footer(rows: TRow[], pagination: IPageRange, columns: Column[])

  • Displayed at the bottom of the table.

    Parameters

    • rows: TRow[]

      The current list of displayed rows.

    • pagination: IPageRange

      The current pagination range of the table.

    • columns: Column[]

      The list of columns.

Vue Events

vuejs-datatable::ready

  • vuejs-datatable::ready(tableName: string)

  • Emitted when the table has been initialized.

    Parameters

    • tableName: string

      The table name.

vuejs-datatable::page-changed

  • vuejs-datatable::page-changed(newPage: number)

  • Emitted when the page has changed.

    Parameters

    • newPage: number

      The index of the new page.

vuejs-datatable::page-count-changed

  • vuejs-datatable::page-count-changed(newCount: number)

  • Emitted when the page count has changed.

    Parameters

    • newCount: number

      The new total number of pages.

vuejs-datatable::page-changed

  • vuejs-datatable::page-changed()

Properties

$attrs

$attrs: Record<string, string>

$children

$children: Vue[]

$createElement

$createElement: CreateElement

$data

$data: Record<string, any>

$datatables

$datatables: IDict<VueDatatable<any, any>>

$delete

$delete: delete

$el

$el: Element

$isServer

$isServer: boolean

$listeners

$listeners: Record<string, Function | Function[]>

$options

$options: ComponentOptions<Vue>

$parent

$parent: Vue

$props

$props: Record<string, any>

$refs

$refs: object

Type declaration

  • [key: string]: Vue | Element | Vue[] | Element[]

$root

$root: Vue

$scopedSlots

$scopedSlots: object

Type declaration

  • [key: string]: NormalizedScopedSlot | undefined

$set

$set: set

$slots

$slots: object

Type declaration

  • [key: string]: VNode[] | undefined

$ssrContext

$ssrContext: any

$vnode

$vnode: VNode

displayedRows

displayedRows: TRow[] = []

Array of rows displayed by the table.

page

page: number = 1

Current page index.

pagers

pagers: Array<VueDatatablePager<any>> = []

Array of pagers that are linked to this table.

Private sortBy

sortBy: Column<TRow> | null = null

Column used for data sorting.

Private sortDir

sortDir: ESortDir | null = null

Direction of the sort. A null value is equivalent to 'asc'.

Protected tableType

tableType: TableType<any>

totalRows

totalRows: number = 0

Total number of rows contained by this data table.

Static Vue

Vue: VueConstructor

Accessors

currentPageRange

handler

  • get handler(): IHandler<any, any[], any[], any[], any[]>

identifier

  • get identifier(): string

normalizedColumns

  • get normalizedColumns(): Column<TRow>[]

tableClass

  • get tableClass(): string

Private totalPages

  • get totalPages(): number | null

Methods

$destroy

  • $destroy(): void

  • Returns void

$emit

  • $emit(event: string, ...args: any[]): this

  • Parameters

    • event: string
    • Rest ...args: any[]

    Returns this

$forceUpdate

  • $forceUpdate(): void

  • Returns void

$mount

  • $mount(elementOrSelector?: Element | string, hydrating?: undefined | false | true): this

  • Parameters

    • Optional elementOrSelector: Element | string
    • Optional hydrating: undefined | false | true

    Returns this

$nextTick

  • $nextTick(callback: function): void
  • $nextTick(): Promise<void>

  • Parameters

    • callback: function
        • (this: this): void

        • Parameters

          • this: this

          Returns void

    Returns void

  • Returns Promise<void>

$off

  • $off(event?: string | string[], callback?: Function): this

  • Parameters

    • Optional event: string | string[]
    • Optional callback: Function

    Returns this

$on

  • $on(event: string | string[], callback: Function): this

  • Parameters

    • event: string | string[]
    • callback: Function

    Returns this

$once

  • $once(event: string | string[], callback: Function): this

  • Parameters

    • event: string | string[]
    • callback: Function

    Returns this

$watch

  • $watch(expOrFn: string, callback: function, options?: WatchOptions): function
  • $watch<T>(expOrFn: function, callback: function, options?: WatchOptions): function

  • Parameters

    • expOrFn: string
    • callback: function
        • (this: this, n: any, o: any): void

        • Parameters

          • this: this
          • n: any
          • o: any

          Returns void

    • Optional options: WatchOptions

    Returns function

      • (): void

      • Returns void

  • Type parameters

    • T

    Parameters

    • expOrFn: function
        • (this: this): T

        • Parameters

          • this: this

          Returns T

    • callback: function
        • (this: this, n: T, o: T): void

        • Parameters

          • this: this
          • n: T
          • o: T

          Returns void

    • Optional options: WatchOptions

    Returns function

      • (): void

      • Returns void

created

  • created(): void

emitNewPage

  • emitNewPage(): number

getRowClasses

  • getRowClasses(row: TRow): string[]

getSortDirectionForColumn

  • getSortDirectionForColumn(columnDefinition: Column<TRow>): ESortDir | null

Private initWatchCriterions

  • initWatchCriterions(): Promise<void>

  • Starts the watching of following properties: filter, perPage, page, sortBy, sortDir. When a change is detected, the component runs [[datatable#processRows]]. Because the watch is immediate, [[datatable#processRows]] is run immediately when this method is called.

    see

    datatable#processRows

    see

    https://vuejs.org/v2/api/#vm-watch

    Returns Promise<void>

    nothing.

processRows

  • processRows(): Promise<void>

Private processRowsIn

refreshPage

  • refreshPage(): number

refreshPageCount

  • refreshPageCount(): null | number

setSortDirectionForColumn

  • setSortDirectionForColumn(direction: ESortDir | null, column: Column<TRow>): void

Private setTableContent

  • setTableContent(__namedParameters?: object): void

  • Defines the table content & total rows number. You can send none, a single, or both properties. Only non undefined prop will be set.

    Parameters

    • Default value __namedParameters: object = {}
      • rows: undefined | TRow[]
      • totalRowCount: undefined | number

    Returns void

    nothing.

Generated using TypeDoc