API Reference
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
- 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.
- 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>