CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedMigration
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ undefined Star🙏
  • undefined
  • undefined

Vue Smart Table Component

Dynamic table component.

Features #

  • Filter items by one or all columns
  • Sort items by column
  • Integrated with CPagination component by default
  • Customize style of specific rows, columns and cells
  • Customize display of columns
  • Load with initial filters and sorter state
  • Loading state visualization
  • Default header labels generation based on column names

Basic usage #

Name
Registered
Role
Status
Avram Tarasios2018/02/01StaffBanned

User since: 2018/02/01

Nehemiah Tatius2018/02/01StaffBanned

User since: 2018/02/01

Paĉjo Jadon2018/02/01StaffBanned

User since: 2018/02/01

Zbyněk Phoibos2018/02/01StaffBanned

User since: 2018/02/01

Ford Prefect2001/05/25AlienDon't panic!

User since: 2001/05/25

Name
Registered
Role
Status
  • «
  • ‹
  • 1
  • 2
  • 3
  • 4
  • 5
  • ›
  • »
<template>
  <CSmartTable 
    clickableRows
    :tableProps="{
      striped: true,
      hover: true,
    }"
    :tableHeadProps="{
      color: 'danger'
    }"
    :activePage="1"
    footer
    header
    :items="items"
    :columns="columns"
    columnFilter
    tableFilter
    cleaner
    itemsPerPageSelect
    :itemsPerPage="5"
    columnSorter
    :sorterValue="{ column: 'status', state: 'asc' }"
    pagination
  >
  <template #status="{item}">
    <td><CBadge :color="getBadge(item.status)">{{item.status}}</CBadge></td>
    </template>
    <template #show_details="{item, index}">
      <td class="py-2">
        <CButton
          color="primary"
          variant="outline"
          square
          size="sm"
          @click="toggleDetails(item, index)"
        >
          {{Boolean(item._toggled) ? 'Hide' : 'Show'}}
        </CButton>
      </td>
    </template>
    <template #details="{item}">
      <CCollapse :visible="this.details.includes(item._id)">
        <CCardBody>
          <h4>
            {{item.username}}
          </h4>
          <p class="text-muted">User since: {{item.registered}}</p>
          <CButton size="sm" color="info" class="">
            User Settings
          </CButton>
          <CButton size="sm" color="danger" class="ml-1">
            Delete
          </CButton>
        </CCardBody>
      </CCollapse>
    </template>
  </CSmartTable>
</template>
<script>
  export default {
    data: () => {
      return {
        columns: [
          { key: 'name', _style: { width: '40%'}, _props: { color: 'primary', class: 'fw-semibold'} },
          'registered',
          { key: 'role', filter: false, sorter: false, _style: { width: '20%'} },
          { key: 'status', _style: { width: '20%'} },
          {
            key: 'show_details',
            label: '',
            _style: { width: '1%' },
            filter: false,
            sorter: false,
            _props: { color: 'primary', class: 'fw-semibold'}
          }
        ],
        details: [],
        items: [
          {name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
          {name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active', _props: { color: 'primary', align: 'middle'}},
          {name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned', _cellProps: { all: { class: 'fw-semibold'}, 'name': { color: 'info' }}},
          {name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
          {name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
          {name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
          {name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
          {name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned', _props: { color: 'warning', align: 'middle'}},
          {name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
          {name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
          {name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
          {name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
          {name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
          {name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
          {name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
          {name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
          {name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
          {name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
          {name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
          {name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
          {name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
          {name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
          {name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
          {name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
          {name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
        ],
      }
    },
    methods: {
      getBadge (status) {
        switch (status) {
          case 'Active': return 'success'
          case 'Inactive': return 'secondary'
          case 'Pending': return 'warning'
          case 'Banned': return 'danger'
          default: 'primary'
        }
      },
      toggleDetails (item) {
        if (this.details.includes(item._id)) {
          this.details = this.details.filter((_item) => _item !== item._id)
          return
        }
        this.details.push(item._id)
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

API #

CSmartTable #

import { CSmartTable } from '@coreui/vue-pro'
// or
import CSmartTable from '@coreui/vue-pro/src/components/smart-table/CSmartTable'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
active-pageSets active page. If 'pagination' prop is enabled, activePage is set only initially.number-1
cleanerWhen set, displays table cleaner above table, next to the table filter (or in place of table filter if tableFilter prop is not set)
Cleaner resets tableFilterValue, columnFilterValue, sorterValue. If clean is possible it is clickable (tabIndex="0" role="button", color="danger"), otherwise it is not clickable and transparent. Cleaner can be customized through the cleanerIcon slot.
boolean-
clickable-rowsStyle table items as clickable.boolean-
column-filterWhen set, displays additional filter row between table header and items, allowing filtering by specific column.
Column filter can be customized, by passing prop as object with additional options as keys. Available options:
- external (Boolean) - Disables automatic filtering inside component.
- lazy (Boolean) - Set to true to trigger filter updates only on change event.
boolean | ColumnFilter-
column-filter-valueValue of table filter. To set pass object where keys are column names and values are filter strings e.g.:
{ user: 'John', age: 12 }
ColumnFilterValue--
columnsProp for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')

In columns prop each array item represents one column. Item might be specified in two ways:
String: each item define column name equal to item value.
Object: item is object with following keys available as column configuration:
- key (required)(String) - define column name equal to item key.
- filter (Boolean) - removes filter from column when set to false.
- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
- sorter (Boolean) - disables sorting of the column when set to false
- _props (String/Array/Object) - add props to CTableHeaderCell.
- _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
Column[] | string[]-
column-sorterEnables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.

Sorter can be customized, by passing prop as object with additional options as keys. Available options:
- external (Boolean) - Disables automatic sorting inside component.
- resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
boolean | Sorter--
footerDisplays table footer, which mirrors table header. (without column filter).boolean-
headerSet to false to remove table header.boolean-true
itemsArray of objects, where each object represents one item - row in table. Additionally, you can customize each row by passing them by _props key and single cell by _cellProps.

Examples:
- _props: { color: 'primary', align: 'middle'}
- _cellProps: { all: { class: 'fw-semibold'}, 'name': { color: 'info' }}
Item[]-() => []
items-per-pageNumber of items per site, when pagination is enabled.number-
items-per-page-labelLabel for items per page selector.string-'Items per page:'
items-per-page-optionsItems per page selector options.number[]-() => [5, 10, 20, 50]
items-per-page-selectAdds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
- label (String) - replaces default label text
- values (Array) - custom array of pagination values
- external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).
boolean | ItemsPerPageSelect--
loadingWhen set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.boolean-
no-items-labelReactNode or string for passing custom noItemsLabel texts.string-'No items found'
paginationEnables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.boolean-
pagination-propsProperties to CSmartPagination component.object--
selectableAdd checkboxes to make table rows selectable.boolean-
sorter-valueState of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.:
{ column: 'status', state: 'asc' }
SorterValue--
table-body-propsProperties to CTableBody component.object--
table-foot-propsProperties to CTableFoot component.object--
table-filterWhen set, displays table filter above table, allowing filtering by specific column.

Column filter can be customized, by passing prop as object with additional options as keys. Available options:
- external (Boolean) - Disables automatic filtering inside component.
- lazy (Boolean) - Set to true to trigger filter updates only on change event.
boolean | TableFilter-
table-filter-labelThe element represents a caption for a component.string-'Filter:'
table-filter-placeholderSpecifies a short hint that is visible in the search input.string-'type string...'
table-filter-valueValue of table filter.string--
table-head-propsProperties to CTableHead component.object--
table-propsProperties to CTable component.object--

Events #

Event nameDescriptionProperties
active-page-changePage change callback.page number - active page number
column-filter-changeColumn filter change callback.ColumnFilterValue object - {[key: string]: string | number}
filtered-items-changeFiltered items change callback.items array - undefined
items-per-page-changePagination change callback.itemsPerPageNumber number - items per page number
row-clickRow click callback.item object - undefined
index number - undefined
columnName string - undefined
event event - undefined
selected-items-changeSelected items change callback.items array - undefined
sorter-changeSorter value change callback.SorterValue object - { column?: string, state?: number | string}
table-filter-changeTable filter change callback.tableFilterValue string - undefined
On this page
  • Features
  • Basic usage
  • API
    • CSmartTable
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

Code licensed MIT , docs CC BY 3.0 .