Props

• title
  • Description: Table-title
  • Required: No
  • Type: String
  • Default: ""
• is-slot-mode
  • Description: If you want use v-slot (V-slot Mode), set TRUE.
  • Required: No
  • Type: Boolean
  • Default: false
• is-static-mode
  • Description: If you not need use ajax or axios to get any data. set TRUE.
  • Required: No
  • Type: Boolean
  • Default: false
• has-checkbox
  • Description: Show checkbox on rows
  • Required: No
  • Type: Boolean
  • Default: false
• checked-return-type
  • Description: Return checked row data's type
  • Required: No
  • Type: String
  • Default: key
  • Values: key | row
• is-loading
  • Description: Show loading modal (Not required on is-static-mode)
  • Required: No
  • Type: Boolean
  • Default: false
• skeleton-screen
  • Description: Show skeleton loading screen
  • Required: No
  • Type: Boolean
  • Default: false
  • skeleton-rows
    • Description: Show the number of rows during the loading screen
    • Required: No
    • Type: Number
    • Default: 5
• is-re-search
  • Description: If reload data, be set true (Not required on is-static-mode)
  • Required: No
  • Type: Boolean
  • Default: false
• is-fixed-first-column
  • Description: Fixed first column on horizontal scrolling
  • Required: No
  • Type: Boolean
  • Default: false
• max-height
  • Description: Set table's max height
  • Required: No
  • Type: String || Number
  • Default: "auto"
• columns
  • Description: The table columns
  • Required: Yes
  • Type: Array
  • Default: null
  • isKey
    • Description: If field is primary key. set to true
    • Required: No
    • Type: Boolean
    • Default: false
  • label
    • Description: Field lable for display (HTML support)
    • Required: Yes
    • Type: string
  • field
    • Description: Row field keyname
    • Required: Yes
    • Type: string
  • width
    • Description: Field's width size
    • Required: No
    • Type: string
  • sortable
    • Description: If the field can sorting. set to true
    • Required: No
    • Type: Boolean
    • Default: false
  • display
    • Description: You can customize display data in there. (html tag or Etc.)
    • Required: No
    • Type: Function
    • Default: null
  • headerClasses
    • Description: Data header's classes array
    • Required: No
    • Type: Array
    • Default: null
    • Example: ["bg-gray", "color-red"]
  • columnClasses
    • Description: Data column's classes array
    • Required: No
    • Type: Array
    • Default: null
    • Example: ["bg-gray", "color-red"]
  • headerStyles
    • Description: Data header's in-line style object
    • Required: No
    • Type: Object
    • Default: null
    • Example: {"background": "gray", "color": "red"}
  • columnStyles
    • Description: Data column's in-line style object
    • Required: No
    • Type: Object
    • Default: null
    • Example: {"background": "gray", "color": "red"}
• rows
  • Description: Records
  • Required: Yes
  • Type: Array
• rowClasses
  • Description: <tr> tag's classes
  • Required: No
  • Type: Array | Function
  • Example: ["a", "b"] | (row) => { return (row.name === "tony") ? ['member'] : [] }
• total
  • Description: Records count
  • Required: Yes
  • Type: Number
• sortable
  • Description: Order field and sort for Sortable
  • Required: Yes
  • Type: Object
  • order
    • Description: Field key
    • Required: Yes
    • Type: string
  • sort
    • Description: "asc" or "desc"
    • Required: Yes
    • Type: string
• messages
  • Description: Messages
  • Required: No
  • Type: Object
  • pagingInfo
    • Required: No
    • Type: string
    • Default: "Showing {0}-{1} of {2}"
  • pageSizeChangeLabel
    • Required: No
    • Type: string
    • Default: "Row count:"
  • gotoPageLabel
    • Required: No
    • Type: string
    • Default: "Go to page:"
  • noDataAvailable
    • Required: No
    • Type: string
    • Default: "No data"
• is-hide-paging
  • Description: No Show paging infomation on bottom
  • Required: No
  • Type: Boolean
  • Default: false
• page
  • Description: If you want to control page no yourself, use it can will be to change page no.
  • Required: No
  • Type: Number
  • Default: 1
• page-size
  • Description: Default display the number of items on one page. In most cases no set required.
  • Required: No
  • Type: Number
  • Default: 10
• pageOptions
  • Description: Pages dropdown list
  • Required: No
  • Type: Array
  • Required: Yes
  • Type: Object
  • value
    • Required: Yes
    • Type: Number
  • text
    • Required: Yes
    • Type: Number | string
  • Default:[ { value: 10, text: 10 }, { value: 25, text: 25 }, { value: 50, text: 50 } ]
• grouping-key
  • Description: If you want use grouping table, set your grouping field's name.
  • Required: No
  • Type: string
  • Default: null
• has-group-toggle
  • Description: Show group toggle if you'r using grouping table.
  • Required: No
  • Type: Boolean
  • Default: false
• grouping-display
  • Description: Customize grouping title display if you'r using grouping table.
  • Required: No
  • Type: Function
  • Default: null
• start-collapsed
  • Description: Grouping rows will be collapsed after initial
  • Required: No
  • Type: Boolean
  • Default: false
• is-keep-collapsed
  • Description: Keep collapsed status after refresh
  • Required: No
  • Type: Boolean
  • Default: false
• is-vertical-highlight
  • Description: If you need vertical highlight on mouse hover, be set true
  • Required: No
  • Type: Boolean
  • Default: false

Events

• do-search
  • Description: Your search event. It's will be auto trigger after data sort and paging.
  • Required: Yes
  • Hint: It's required in default-mode, and in static-mode is not.
  • Type: (offset, limit, order, sort) => void
  • Arguments:
    • offset
      • Description: Offset value for database.
      • Required: Yes
      • Type: Number
    • limit
      • Description: limit value for database.
      • Required: Yes
      • Type: Number
    • order
      • Description: Sortable value for database.
      • Required: Yes
      • Type: string
    • sort
      • Description: Sortable value for database.
      • Required: Yes
      • Type: string
• is-finished
  • Description: Will be trigger this function after table rendering finished.
  • Type: (elements) => void
  • Arguments:
    • elements
      • Description: Pass by has 「is-rows-el」 class name's elements.
      • Required: No
      • Type: Array
• return-checked-rows
  • Description: Will be call this function after table checkbox on checked.
  • Type: (rowsKey) => void
  • Arguments:
    • rowsKey
      • Description: Pass by checked row's key field name.
      • Required: No
      • Type: Number
• get-now-page
  • Description: You can get now page no from this function.
  • Type: (pageNo) => void
  • Arguments:
    • pageNo
      • Description: Pass by page no.
      • Required: No
      • Type: Number
• row-clicked
  • Description: You can get row data from this function after row clicked.
  • Type: (rowData) => void
  • Arguments:
    • rowData
      • Description: Pass by row data.
      • Required: No
      • Type: Object
• row-toggled
  • Description: You can get rows data and toggle state after toggled.
  • Type: (rows, isCollapsed) => void
  • Arguments:
    • rows
      • Description: Pass by grouping rows.
      • Required: Yes
      • Type: Array
    • isCollapsed
      • Description: Pass by collapse state.
      • Required: Yes
      • Type: Boolean

Slots

This is option. But, If you enabled V-slot mode, You should be to write it.

• Header
  • Description: Show header's scope

  • Slot name is 'vtl-header-' + column's field name

    <template v-slot:vtl-header-id="data">
      <YourComponent>{{ data.value }}</YourComponent>
    </template>
    <template v-slot:vtl-header-name="data">
      <YourComponent>{{ data.value }}</YourComponent>
    </template>
    <template v-slot:vtl-header-email="data">
      <YourComponent>{{ data.value }}</YourComponent>
    </template>
                                    

• Field's name
  • Description: Show Row data's scope

  • Usage (Custom every one)

    <template v-slot:id="data">
      <YourComponent>{{ data.value.id }}</YourComponent>
    </template>
    <template v-slot:name="data">
      <YourComponent>{{ data.value.name }}</YourComponent>
    </template>
    <template v-slot:email="data">
      <YourComponent>{{ data.value.email }}</YourComponent>
    </template>
                                    

    Usage (All to same)

    <template v-for="(col, i) of table.columns" v-slot:[col.field]="data" :key="i">
      <YourComponent>{{ data.value[col.field] }}</YourComponent>
    </template>