Vuetable Properties

Vuetable - Properties

• api-mode
• api-url
• fields
• data
• data-manager
• data-path
• data-total
• pagination-path
• load-on-start
• append-params
• query-params
• http-options
• track-by
• sort-order
• multi-sort
• multi-sort-key
• per-page
• css
• render-icon
• min-rows
• row-class
• detail-row-component
• detail-row-transition

# api-mode

• type: Boolean

• default: true

• description

  By default, Vuetable will load the data from and send the request to the API endpoint specified in api-url. If you prefer to supply your own data instead of automatically requesting the data from server, you have to set api-mode to false. Then, pass the data via data prop.

  Please note that disabling api-mode (by setting it to false) will also disable pagination, sorting, and filtering functions.

  Note
  Setting api-mode to false is not recommended. It will not scale well when you have to handle a large dataset yourself instead of letting database manager handles it for you.

# api-url

• works in api-mode only

• type: String

• default: '' (empty string)

• description

  The URL of the api endpoint that Vuetable will interact with. If the API supports sorting, filtering, pagination of the data, Vuetable can automatically append appropriate information to the server via query string.

# fields

• type: Array

• default: none

• required: true

• description

  Array of field definition that Vuetable will be used to map to the data structure in order to render the table for presentation.

# data

• type: Array | Object

• default: null

• description

  The data that Vuetable will be used to render the table when api-mode is set to false.

  New in v1.7
  You can utilize the pagination functionality of Vuetable if the data you supplied is an object that has data structure as described in Data Format.

  Note
  The prop only works when api-mode is false.

# data-manager (v1.7)

• type: Function

• default: null

• description

  [TODO]

  Note
  The prop only works when api-mode is false.

# data-path

• works in api-mode only

• type: String

• default: data

• description

  The path inside the data structure that actually contains the data. If the data is at the root of the structure, set this prop to empty string, e.g. data-path="".

# data-total (v1.7)

• type: Number

• default:

• description

  [TODO]

  Note
  The prop only works when api-mode is false.

# pagination-path

• works in api-mode only

• type: String

• default: links.pagination

• description

  The pagination path inside the data structure that contains the pagination information. If the your data from the server does not have pagination information, you should set the prop to empty string, e.g. pagination-path="", to suppress Vuetable warning.

# load-on-start

• works in api-mode only

• type: Boolean

• default: true

• required: true

• description

  Whether Vuetable should immediately load the data from the server.

# append-params

• works in api-mode only

• type: Object

• default: {} (empty object)

• description

  Additional parameters that Vuetable should append to the query string when requesting data from the server.

  See also: Appending Other Parameters to the Query String

# query-params

• works in api-mode only

• type: Object

• default:

  {
    sort: 'sort',
    page: 'page',
    perPage: 'per_page'
  }
  

• description

  The text to be used as keys in query string that will be sent to the server. If your API endpoint uses different keys, you can specified them via this prop.

  See also: Sorting, Paging, and Page Sizing of Data

# http-options

• works in api-mode only

• type: Object

• default: {} (empty object)

• description

  Allow passing additional options to the server during AJAX call. Internally, Vuetable uses axios to handle AJAX request.

# track-by

• type: String

• default: id

• description

  The key that uses to unqiuely identified each row in the data array to help track the state of detail row and checkbox features of Vuetable. This is necessary for the detail row and checkbox features to function correctly.

  For detail row feature, whenever the user click to expand the detail row, Vuetable will insert the id of that row into its internal array (visibleDetailRows). And when that detail row is hidden, the id of that detail row is removed from the array.

  For checkbox feature, when the user select (checked) a row, Vuetable will insert the id of the row into its internal array (selectedTo). And when that row is unselected (unchecked), the id of that row is removed from the array.

  See also: visibleDetailRows, and selectedTo

# sort-order

• works in api-mode only

• type: Array

• default: [] (empty array)

• description

  The default sort order that Vuetable should use when requesting the data from server.

# multi-sort

• works in api-mode only

• type: Boolean

• default: false

• description

  Enable multiple sort columns interaction.

# multi-sort-key

• works in api-mode only

• type: String

• default: alt

• possible values: alt, ctrl, shift, meta

• description

  The key to trigger sort colum adding/subtracting when multi-sort is enabled.

# per-page

• works in api-mode only

• type: Number

• default: 10

• description

  The number of data to be requested per page.

# css

• type: Object

• default:

  {
    tableClass: 'ui blue selectable celled stackable attached table',
    loadingClass: 'loading',
    ascendingIcon: 'blue chevron up icon',
    descendingIcon: 'blue chevron down icon',
    detailRowClass: 'vuetable-detail-row',
    sortHandleIcon: 'grey sidebar icon'
  }
  

• description

  This is where you should override the CSS classes that Vuetable uses to render HTML table that should help you style the table to your needs.

  See also: CSS Styling

# render-icon

• type: Function

• default: null

• description

  By default, Vuetable uses <i> tag to render icon according to Semantic UI CSS. But you can override this by providing your own icon rendering callback function via this render-icon property.

  The following icon rendering in Vuetable will use this provided callback instead of the default one if provided.

  • sort icon on the table header <th>
  • handle icon of the table column <td>

  The callback will receive two parameters.

  1. the array of CSS classes
  2. the optional string options expected to be appended to the tag

  See example below:

  <vuetable
    //...
    :render-icon='renderBootstrapIcon'
  ></vuetable>

  //...
  methods: {
    renderBootstrapIcon (classes, options) {
      return `<span class="${classes.join(' ')}" ${options}></span>`
    }
  }

# min-rows

• type: Number

• default: 0

• description

  The minimum number of rows that should be displayed when rendering the table.

  If the number of row available is less than the number specified in min-rows prop, Vuetable will render empty table rows to satisfy that minimum rows.

  Note
  The prop only works when api-mode is false.

# row-class

• type: String, Function

• default: '' (empty string)

• description

  The CSS class name that will be applied to each table row.

  If row-class prop refers to a method, Vuetable will automatically call the given method on each row, passing the row data and row index to it. Vuetable will then use the returned string from the given method as CSS class for that row.

  Here is the example on using a method to return the row class for styling.

  <template>
    <vuetable>
      :row-class="onRowClass"
    ></vuetable>
  </template>
  <script>
    //..
    methods: {
      onRowClass (dataItem, index) {
        return (dataItem.isOverdue) ? 'color-red' : 'color-white'
      }
    }
  </script>

# detail-row-component

• type: String

• default: '' (empty string)

• description

  A component name to be used as the content of detail row to be displayed underneath the current row.

# detail-row-transition

• type: String

• default: '' (empty string)

• description

  The CSS class to apply to detail row during transition.