CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

Vue Smart Table Component (DataTable)

A Vue Smart Table provides a full set of features for displaying and manipulating tabular data. It allows you to easily create dynamic and interactive tables with features such as sorting, filtering, pagination, and searching. Vue Smart Table Component (DataTables) makes it easy to work with large datasets, and it is widely used in a variety of applications, including web-based applications, e-commerce sites, and more.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

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

Filter:

	Name	Registered	Role	Status

	Leopold Gáspár	2022/01/21	Staff	Active
User since: 2022/01/21
	Estavan Lykos	2022/02/07	Staff	Banned
User since: 2022/02/07
	Avram Tarasios	2022/02/07	Staff	Banned
User since: 2022/02/07
	Nehemiah Tatius	2022/02/07	Staff	Banned
User since: 2022/02/07
	Chetan Mohamed	2022/02/07	Admin	Inactive
User since: 2022/02/07
	Name	Registered	Role	Status

Items per page:

<template>
  <CSmartTable
    clickableRows
    :tableProps="{
      striped: true,
      hover: true,
    }"
    :activePage="2"
    footer
    header
    :items="items"
    :columns="columns"
    columnFilter
    tableFilter
    cleaner
    itemsPerPageSelect
    :itemsPerPage="5"
    columnSorter
    :sorterValue="{ column: 'status', state: 'asc' }"
    pagination
  >
    <template #avatar="{item}">
      <td>
        <CAvatar :src="$withBase(`/images/avatars/${item.avatar}`)"/>
      </td>
    </template>
    <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: 'avatar',
          label: '',
          filter: false,
          sorter: false,
        },
        {
          key: 'name',
          _style: { width: '20%' },
        },
        'registered',
        { 
          key: 'role',
          _style: { width: '20%' }
        },
        { 
          key: 'status',
          _style: { width: '20%' }
        },
        {
          key: 'show_details',
          label: '',
          _style: { width: '1%' },
          filter: false,
          sorter: false,
        },
      ],
      details: [],
      items: [
        {
          id: 1,
          name: 'Samppa Nori',
          avatar: '1.jpg',
          registered: '2022/01/01',
          role: 'Member',
          status: 'Active',
        },
        {
          id: 2,
          name: 'Estavan Lykos',
          avatar: '2.jpg',
          registered: '2022/02/07',
          role: 'Staff',
          status: 'Banned',
        },
        {
          id: 3,
          name: 'Chetan Mohamed',
          avatar: '3.jpg',
          registered: '2022/02/07',
          role: 'Admin',
          status: 'Inactive',
          _selected: true,
        },
        {
          id: 4,
          name: 'Derick Maximinus',
          avatar: '4.jpg',
          registered: '2022/03/19',
          role: 'Member',
          status: 'Pending',
        },
        {
          id: 5,
          name: 'Friderik Dávid',
          avatar: '5.jpg',
          registered: '2022/01/21',
          role: 'Staff',
          status: 'Active'
        },
        { 
          id: 6,
          name: 'Yiorgos Avraamu',
          avatar: '6.jpg',
          registered: '2022/01/01',
          role: 'Member',
          status: 'Active'
        },
        {
          id: 7,
          name: 'Avram Tarasios',
          avatar: '7.jpg',
          registered: '2022/02/07',
          role: 'Staff',
          status: 'Banned',
          _selected: true,
        },
        {
          id: 8,
          name: 'Quintin Ed',
          avatar: '8.jpg',
          registered: '2022/02/07',
          role: 'Admin',
          status: 'Inactive'
        },
        { 
          id: 9,
          name: 'Enéas Kwadwo',
          avatar: '9.jpg',
          registered: '2022/03/19',
          role: 'Member',
          status: 'Pending'
        },
        { 
          id: 10,
          name: 'Agapetus Tadeáš',
          avatar: '10.jpg',
          registered: '2022/01/21',
          role: 'Staff',
          status: 'Active'
        },
        { 
          id: 11,
          name: 'Carwyn Fachtna',
          avatar: '11.jpg',
          registered: '2022/01/01',
          role: 'Member',
          status: 'Active'
        },
        {
          id: 12,
          name: 'Nehemiah Tatius',
          avatar: '12.jpg',
          registered: '2022/02/07',
          role: 'Staff',
          status: 'Banned',
          _selected: true,
        },
        {
          id: 13,
          name: 'Ebbe Gemariah',
          avatar: '13.jpg',
          registered: '2022/02/07',
          role: 'Admin',
          status: 'Inactive'
        },
        {
          id: 14,
          name: 'Eustorgios Amulius',
          avatar: '14.jpg',
          registered: '2022/03/19',
          role: 'Member',
          status: 'Pending',
        },
        {
          id: 15,
          name: 'Leopold Gáspár',
          avatar: '15.jpg',
          registered: '2022/01/21',
          role: 'Staff',
          status: 'Active'
        },
      ],
    }
  },
  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>

Column names

By default, Vue Table component will generate the header labels for each column based on the column's data source.

Id	Name	Avatar	Registered	Role	Status

1	Samppa Nori	1.jpg	2022/01/01	Member	Active
2	Estavan Lykos	2.jpg	2022/02/07	Staff	Banned
3	Chetan Mohamed	3.jpg	2022/02/07	Admin	Inactive
4	Derick Maximinus	4.jpg	2022/03/19	Member	Pending
5	Friderik Dávid	5.jpg	2022/01/21	Staff	Active
6	Yiorgos Avraamu	6.jpg	2022/01/01	Member	Active
7	Avram Tarasios	7.jpg	2022/02/07	Staff	Banned
8	Quintin Ed	8.jpg	2022/02/07	Admin	Inactive
9	Enéas Kwadwo	9.jpg	2022/03/19	Member	Pending
10	Agapetus Tadeáš	10.jpg	2022/01/21	Staff	Active

<template>
  <CSmartTable
    :items="items"
    columnFilter
    columnSorter
    pagination
    :tableProps="{
      hover: true,
    }"
  />
</template>
<script>
export default {
  data() {
    return {
      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!" },
      ],
    }
  },
}
</script>

Column groups

The Vue Smart Table component allows users to group related columns under a common header. This can be useful when displaying data that has multiple categories or when comparing different sets of data. When the Smart Table is rendered, the header group will be displayed as a single header cell that spans the width of the columns included in the group. The group header cells feature can help to make the Smart Table component more organized and easier to read by grouping related data together and making it more visually distinct from other columns.

Group 1
Subgroup 1			Subgroup 2
Subgroup 1A		Subgroup 1B	Subgroup 2A
Name	Registered	Role	Status
John Doe	2022/01/01	Guest	Pending
Samppa Nori	2022/01/01	Member	Active
Estavan Lykos		Staff	Banned
Chetan Mohamed	2022/02/07	Admin	Inactive
Derick Maximinus	2022/03/19	Member	Pending
Friderik Dávid	2022/01/21	Staff	Active
Name	Registered	Role	Status

<template>
  <CSmartTable
    :columns="columnsColumnGroupsExample"
    columnSorter
    footer
    :items="itemsColumnGroupsExample"
    :tableHeadProps="{ color: 'light' }"
    :tableProps="{ bordered: true }"
  />
</template>
<script>
export default {
  data() {
    return {
      columnsColumnGroupsExample: [
        {
          group: 'Group 1',
          children: [
            {
              group: 'Subgroup 1',
              children: [
                {
                  group: 'Subgroup 1A',
                  children: [
                    {
                      key: 'name',
                      _style: { width: '20%' },
                    },
                    'registered',
                  ],
                },
                {
                  group: 'Subgroup 1B',
                  children: [
                    { key: 'role', _style: { width: '20%' } },
                  ],
                },
              ]
            },
            {
              group: 'Subgroup 2',
              children: [
                {
                  group: 'Subgroup 2A',
                  children: [
                    { key: 'status', _style: { width: '20%' } },
                  ],
                }
              ]
            }
          ]
        }
      ],
      itemsColumnGroupsExample: [
        { 
          id: 0, 
          name: 'John Doe',
          registered: '2022/01/01',
          role: 'Guest',
          status: 'Pending' 
        },
        {
          id: 1,
          name: 'Samppa Nori',
          registered: '2022/01/01',
          role: 'Member',
          status: 'Active',
        },
        {
          id: 2,
          name: 'Estavan Lykos',
          role: 'Staff',
          status: 'Banned',
          _cellProps: { name: { colSpan: 2 } },
        },
        { 
          id: 3, 
          name: 'Chetan Mohamed', 
          registered: '2022/02/07', 
          role: 'Admin', 
          status: 'Inactive' 
        },
        {
          id: 4,
          name: 'Derick Maximinus',
          registered: '2022/03/19',
          role: 'Member',
          status: 'Pending',
        },
        { 
          id: 5, 
          name: 'Friderik Dávid', 
          registered: '2022/01/21', 
          role: 'Staff', 
          status: 'Active' 
        }
      ],
    }
  },
}
</script>

Table with headers spanning multiple rows or columns

In the example below, the table consists of two individual columns and one column group spanning three columns. It has six rows. Two headers that span multiple rows.

Poster availability
Poster name	Color	Sizes available
Zodiac	Full color	A2	A3	A4
	Black and white	A1	A2	A3
	Sepia	A3	A4	A5
Angels	Black and white	A1	A3	A4
Angels	Sepia	A2	A3	A5

<template>
  <CSmartTable 
    :columns="columnsColumnGroupsExample2"
    :items="itemsColumnGroupsExample2"
    :tableHeadProps="{ color: 'light' }"
    :tableProps="{ bordered: true }"
  >
    <template #size="{item}">
      <td v-for="_item in item.size">
        {{ _item }}
      </td>
    </template>
  </CSmartTable>
</template>
<script>
export default {
  data() {
    return {
      columnsColumnGroupsExample2: [
        {
          group: 'Poster availability',
          _props: { colSpan: 5 },
          children: [
            {
              key: 'poster',
              label: 'Poster name',
              _props: { scope: 'col' },
            },
            {
              key: 'color',
              _props: { scope: 'col' },
            },
            {
              key: 'size',
              label: 'Sizes available',
              _props: { colSpan: 3, scope: 'colgroup' },
              _style: { width: '50%' },
            },
          ]
        }
      ],
      itemsColumnGroupsExample2: [
        {
          poster: 'Zodiac',
          color: 'Full color',
          size: ['A2', 'A3', 'A4'],
          _cellProps: { 
            color: { color: 'light', scope: 'row' },
            poster: { color: 'light', rowSpan: 3, scope: 'rowgroup' }
          },
        },
        {
          color: 'Black and white',
          size: ['A1', 'A2', 'A3'],
          _cellProps: { color: { color: 'light', scope: 'row' } },
        },
        {
          color: 'Sepia',
          size: ['A3', 'A4', 'A5'],
          _cellProps: { color: { color: 'light', scope: 'row' } },
        },
        {
          poster: 'Angels',
          color: 'Black and white',
          size: ['A1', 'A3', 'A4'],
          _cellProps: { 
            color: { color: 'light', scope: 'row' },
            poster: { color: 'light', rowSpan: 2, scope: 'rowgroup' }
          },
        },
        {
          color: 'Sepia',
          size: ['A2', 'A3', 'A5'],
          _cellProps: { color: { color: 'light', scope: 'row' } },
        },
      ],
    }
  },
}
</script>

Example source: https://www.w3.org/WAI/tutorials/tables/irregular/

Custom filters

CoreUI Vue Smart Table (Vue DataTables) provides a number of built-in features for filtering, searching, and sorting data, including the ability to use custom filtering functions.

To use a custom filter in Vue Smart Table (DataTables), you can use the filter option to specify a custom filter for each column.

Date Range Picker

Here is an example of how you might use the <CDateRangePicker /> component to apply custom filters to a Vue DataTable component:

Filter:

Name

Registered

Estavan Lykos

7.02.2022

Chetan Mohamed

7.02.2022

Avram Tarasios

7.02.2022

Quintin Ed

7.02.2022

Nehemiah Tatius

7.02.2022

Ebbe Gemariah

7.02.2022

Paĉjo Jadon

7.02.2022

Micheal Mercurius

7.02.2022

Zbyněk Phoibos

7.02.2022

Name

Registered

Items per page:

<template>
  <CSmartTable 
    cleaner
    clickableRows
    :columns="columnsDateRangePicker"
    columnFilter
    :columnFilterValue="{
      registered: 
        (date) => new Date(Date.parse(date)) >= startDate && new Date(Date.parse(date)) <= endDate
    }"
    columnSorter
    footer
    :items="itemsDateRangePicker"
    itemsPerPageSelect
    :itemsPerPage="10"
    pagination
    tableFilter
  >
    <template #registered="{ item }">
      <td>{{ convertToDate(item.registered) }}</td>
    </template>
  </CSmartTable>    
</template>
<script>
  import { h } from 'vue'
  import { CDateRangePicker } from '@coreui/vue-pro'
  export default {
    data() {
      return {
        startDate: new Date('2022-01-21'),
        endDate: new Date('2022-02-07'),
        columnsDateRangePicker: [
          {
            key: 'name',
            _style: { width: '50%' },
          },
          {
            key: 'registered',
            _style: { width: '50%' },
            filter: (values, onChange) => {
              const unique = [...new Set(values)].sort()
              return h(CDateRangePicker, {
                size: 'sm',
                startDate: this.startDate,
                endDate: this.endDate,
                minDate: this.minDate,
                maxDate: this.maxDate,
                onStartDateChange: (date) => {
                  this.setStartDate(date)
                  onChange((item) => {
                    if (date) {
                      const itemDate = new Date(Date.parse(item))
                      return this.endDate ? itemDate >= date && itemDate <= this.endDate : itemDate >= date
                    } 
                    return true
                  })
                },
                onEndDateChange: (date) => {
                  this.setEndDate(date)
                  onChange((item) => {
                    if (date) {
                      const itemDate = new Date(Date.parse(item))
                      return this.startDate ? itemDate <= date && itemDate >= this.startDate : itemDate <= date
                    } 
                    return true
                  })
                }
              })
            },
          }
        ],
        itemsDateRangePicker: [
          { id: 0, name: 'John Doe', registered: '2022/01/01' },
          {
            id: 1,
            name: 'Samppa Nori',
            registered: '2022/01/01',
          },
          {
            id: 2,
            name: 'Estavan Lykos',
            registered: '2022/02/07',
          },
          { id: 3, name: 'Chetan Mohamed', registered: '2022/02/07' },
          {
            id: 4,
            name: 'Derick Maximinus',
            registered: '2022/03/19',
          },
          { id: 5, name: 'Friderik Dávid', registered: '2022/01/21' },
          { id: 6, name: 'Yiorgos Avraamu', registered: '2022/01/01' },
          {
            id: 7,
            name: 'Avram Tarasios',
            registered: '2022/02/07',
          },
          { id: 8, name: 'Quintin Ed', registered: '2022/02/07' },
          { id: 9, name: 'Enéas Kwadwo', registered: '2022/02/19', role: 'Member', status: 'Pending' },
          { id: 10, name: 'Agapetus Tadeáš', registered: '2022/01/21' },
          { id: 11, name: 'Carwyn Fachtna', registered: '2022/01/01' },
          { id: 12, name: 'Nehemiah Tatius', registered: '2022/02/07' },
          { id: 13, name: 'Ebbe Gemariah', registered: '2022/02/07' },
          {
            id: 14,
            name: 'Eustorgios Amulius',
            registered: '2022/02/19',
          },
          { id: 15, name: 'Leopold Gáspár', registered: '2022/01/21' },
          { id: 16, name: 'Pompeius René', registered: '2022/01/01' },
          { id: 17, name: 'Paĉjo Jadon', registered: '2022/02/07' },
          {
            id: 18,
            name: 'Micheal Mercurius',
            registered: '2022/02/07',
          },
          {
            id: 19,
            name: 'Ganesha Dubhghall',
            registered: '2022/01/19',
          },
          { id: 20, name: 'Hiroto Šimun', registered: '2022/01/21' },
          { id: 21, name: 'Vishnu Serghei', registered: '2022/01/01' },
          { id: 22, name: 'Zbyněk Phoibos', registered: '2022/02/07' },
          {
            id: 23,
            name: 'Aulus Agmundr',
            registered: '2022/01/01',
          },
          {
            id: 42,
            name: 'Ford Prefect',
            registered: '2022/02/25',
          },
        ],
      }
    },
    computed: {
      minDate: function () {
        return new Date(
          Math.min(
            ...this.itemsDateRangePicker.map((item) => {
              return new Date(Date.parse(item.registered))
            }),
          ),
        )
      },
      maxDate: function () {
        return new Date(
          Math.max(
            ...this.itemsDateRangePicker.map((item) => {
              return new Date(Date.parse(item.registered))
            }),
          ),
        )
      }
    },
    methods: {
      convertToDate (date) {
        const _date = new Date(Date.parse(date))
        return _date.toLocaleDateString()
      },
      setStartDate (date) {
        this.startDate = date
      },
      setEndDate (date) {
        this.endDate = date
      }
    }
  }
</script>

Multi Select

Here is an example of how you might use the <CMultiSelect /> component to apply custom filters to a Vue DataTable:

Filter:

Name	Role
	Admin Alien Guest Member Staff
John Doe	Guest
Samppa Nori	Member
Estavan Lykos	Staff
Chetan Mohamed	Admin
Derick Maximinus	Member
Friderik Dávid	Staff
Yiorgos Avraamu	Member
Avram Tarasios	Staff
Quintin Ed	Admin
Enéas Kwadwo	Member
Name	Role

Items per page:

<template>
  <CSmartTable
    cleaner
    clickableRows
    :columns="columnsMultiSelect"
    columnFilter
    columnSorter
    footer
    :items="itemsMultiSelect"
    itemsPerPageSelect
    :itemsPerPage="10"
    pagination
    tableFilter
  />
</template>
<script>
  import { h } from 'vue'
  import { CMultiSelect } from '@coreui/vue-pro'
  export default {
    data() {
      return {
        columnsMultiSelect: [
          {
            key: 'name',
            _style: { width: '50%' },
          },
          {
            key: 'role',
            _style: { width: '50%' },
            filter: (values, onChange) => {
              const unique = [...new Set(values)].sort()
              return h(CMultiSelect, {
                size: 'sm',
                onChange: (selected) => {
                  const _selected = selected.map((element) => element.value)
                  onChange(function(item) {
                    return Array.isArray(_selected) && _selected.length
                      ? _selected.includes(item.toLowerCase())
                      : true
                  })
                },
                options: unique.map((element) => {
                  return {
                    value: element.toLowerCase(),
                    text: element,
                  }
                })})
            },
            sorter: false,
          },
        ],
        itemsMultiSelect: [
          { id: 0, name: 'John Doe', role: 'Guest' },
          {
            id: 1,
            name: 'Samppa Nori',
            role: 'Member',
          },
          {
            id: 2,
            name: 'Estavan Lykos',
            role: 'Staff',
          },
          { id: 3, name: 'Chetan Mohamed', role: 'Admin' },
          {
            id: 4,
            name: 'Derick Maximinus',
            role: 'Member',
          },
          { id: 5, name: 'Friderik Dávid', role: 'Staff' },
          { id: 6, name: 'Yiorgos Avraamu', role: 'Member' },
          {
            id: 7,
            name: 'Avram Tarasios',
            role: 'Staff',
          },
          { id: 8, name: 'Quintin Ed', role: 'Admin' },
          { id: 9, name: 'Enéas Kwadwo', role: 'Member' },
          { id: 10, name: 'Agapetus Tadeáš', role: 'Staff' },
          { id: 11, name: 'Carwyn Fachtna', role: 'Member' },
          { id: 12, name: 'Nehemiah Tatius', role: 'Staff' },
          { id: 13, name: 'Ebbe Gemariah', role: 'Admin' },
          {
            id: 14,
            name: 'Eustorgios Amulius',
            role: 'Member',
          },
          { id: 15, name: 'Leopold Gáspár', role: 'Staff' },
          { id: 16, name: 'Pompeius René', role: 'Member' },
          { id: 17, name: 'Paĉjo Jadon', role: 'Staff' },
          {
            id: 18,
            name: 'Micheal Mercurius',
            role: 'Admin',
          },
          {
            id: 19,
            name: 'Ganesha Dubhghall',
            role: 'Member',
          },
          { id: 20, name: 'Hiroto Šimun', role: 'Staff' },
          { id: 21, name: 'Vishnu Serghei', role: 'Member' },
          { id: 22, name: 'Zbyněk Phoibos', role: 'Staff' },
          {
            id: 23,
            name: 'Aulus Agmundr',
            role: 'Member',
          },
          {
            id: 42,
            name: 'Ford Prefect',
            role: 'Alien',
          },
        ]
      }
    }
  }
</script>

Data sources

You can use Fetch API to load data from different sources and then pass them to <CSmartTable>

External Data (10.000+ records)

One of the key features of Vue Smart Table (Vue DataTables) is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don't want to load all at once, or if you want to allow users to interact with the data without having to reload the page.

To load external data into a Vue Smart Table (Vue DataTables), you can use the Fetch API to the data source.

Here is an example of how you might use Vue Smart Table with external data:

First Name	Last Name	Email	Country	IP

No items found

Items per page:

<template>
  <CSmartTable
    :columns="columnsExternalDataExample"
    :columnFilter="{
      external: true,
    }"
    :columnSorter="{
      external: true,
    }"
    :items="users"
    :itemsPerPage="itemsPerPage"
    itemsPerPageSelect
    :loading="loading"
    :pagination="{
      external: true,
    }"
    :paginationProps="{
      activePage: activePage,
      pages: Math.ceil(records / itemsPerPage) || 1,
    }"
    :tableProps="{
      hover: true,
      responsive: true,
    }"
    @active-Page-change="(activePage) => setActivePage(activePage)"
    @column-filter-change="(filter) => {
      setActivePage(1)
      setColumnFilter(filter)
    }"
    @items-per-page-change="(itemsPerPage) => {
      setActivePage(1)
      setItemsPerPage(itemsPerPage)
    }"
    @sorter-change="(sorter) => setColumnSorter(sorter)"
  />
</template>
<script>
  export default {
    data() {
      return {
        items: []
        activePage: 3,
        columnFilter: [],
        columnSorter: null,
        itemsPerPage: 10,
        users: [],
        records: [],
        columnsExternalDataExample: [
          {
            key: 'first_name',
            _style: { minWidth: '130px' },
          },
          {
            key: 'last_name',
            _style: { minWidth: '130px' },
          },
          'email',
          {
            key: 'country',
            _style: { minWidth: '120px' },
          },
          {
            key: 'ip_address',
            label: 'IP',
          },
        ]
      }
    },
    methods: {
      async getUsers () {
        const offset = this.itemsPerPage * this.activePage - this.itemsPerPage
        let params = new URLSearchParams()
        Object.keys(this.columnFilter).forEach((key) => {
          params.append(key, this.columnFilter[key])
        })
        this.columnSorter &&
          this.columnSorter.column !== undefined &&
          params.append('sort', `${this.columnSorter.column}%${this.columnSorter.state}`)
        this.setLoading(true)
        fetch(`https://apitest.coreui.io/demos/users?offset=${offset}&limit=${this.itemsPerPage}&${params}`)
          .then((response) => response.json())
          .then((result) => {
            this.setRecords(result.number_of_matching_records)
            result.number_of_matching_records ? this.setUsers(result.records) : this.setUsers([])
            this.setLoading(false)
          })
      },
      setActivePage (activePage) {
        this.activePage = activePage
      },
      setColumnFilter (columnFilter) {
        this.columnFilter = columnFilter
      },
      setColumnSorter (columnSorter) {
        this.columnSorter = columnSorter
      },
      setItemsPerPage (itemsPerPage) {
        this.itemsPerPage = itemsPerPage
      },
      setLoading (loading) {
        this.loading = loading
      },
      setRecords (records) {
        this.records = records
      },
      setUsers (users) {
        this.users = users
      }
    },
    watch: {
      activePage() {
        this.getUsers()
      },
      columnFilter() {
        this.getUsers()
      },
      columnSorter: {
        handler() {
          this.getUsers()
        },
        deep: true
      },
      itemsPerPage() {
        this.getUsers()
      }
    }, 
    mounted() {
      this.getUsers()
    }
  }
</script>

JSON (10.000+ records)

The Fetch API can be used to load JSON data by making a GET request to the endpoint where the data is located. In this example, the fetch() method is used to make a GET request to the endpoint https://apitest.coreui.io/fake_data/users.json, which returns a response. The response.json() method is then used to parse the response as a JSON object. The resulting JSON object is stored in the users and loaded by <CSmartTable />.

First Name	Last Name	Email	Country	IP

No items found

Items per page:

<template>
  <CSmartTable
    :columns="columnsJSONDataExample"
    columnFilter
    columnSorter
    :items="usersJSON"
    itemsPerPageSelect
    :loading="loadingJSON"
    pagination
    :tableProps="{
      hover: true,
      responsive: true,
    }"
  />
</template>
<script>
  export default {
    data() {
      return {
        loadingJSON: false,
        usersJSON: [],
        columnsJSONDataExample: [
          {
            key: 'first_name',
            _style: { minWidth: '130px' },
          },
          {
            key: 'last_name',
            _style: { minWidth: '130px' },
          },
          'email',
          {
            key: 'country',
            _style: { minWidth: '120px' },
          },
          {
            key: 'ip_address',
            label: 'IP',
          },
        ]
      }
    },
    methods: {
      async getUsersJSON () {
        this.setLoadingJSON(true)
        fetch('https://apitest.coreui.io/fake_data/users.json')
          .then((response) => response.json())
          .then((result) => {
            this.setUsersJSON(result)
            this.setLoadingJSON(false)
          })
      },
      setLoadingJSON (loading) {
        this.loadingJSON = loading
      },
      setUsersJSON (users) {
        this.usersJSON = users
      }
    },
    mounted() {
      this.getUsersJSON()
    }
  }
</script>

API

CSmartTable

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

Props

Prop name	Description	Type	Values	Default
active-page	Sets active page. If 'pagination' prop is enabled, activePage is set only initially.	number	-	1
cleaner	When 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-rows	Style table items as clickable.	boolean	-	-
column-filter	When 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-value	Value of table filter. To set pass object where keys are column names and values are filter strings e.g.: { user: 'John', age: 12 }	ColumnFilterValue	-	-
columns	Prop 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-sorter	Enables 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	-	-
footer	If `true` Displays table footer, which mirrors table header. (without column filter). Or Array of objects or strings, where each element represents one cell in the table footer. Example items: `['FooterCell', 'FooterCell', 'FooterCell']` or `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`	boolean \| (FooterItem \| string)[]	-	-
header	Set to false to remove table header.	boolean	-	true
items	Array 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-number 4.8.0+	The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.	number	-	-
items-per-page	Number of items per site, when pagination is enabled.	number	-	10
items-per-page-label	Label for items per page selector.	string	-	'Items per page:'
items-per-page-options	Items per page selector options.	number[]	-	() => [5, 10, 20, 50]
items-per-page-select	Adds 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	-	-
loading	When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.	boolean	-	-
no-items-label	ReactNode or string for passing custom noItemsLabel texts.	string	-	'No items found'
pagination	Enables 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	-	-
pagination-props	Properties to CSmartPagination component.	object	-	-
selectable	Add checkboxes to make table rows selectable.	boolean	-	-
select-all 4.8.0+	Enables select all checkbox displayed in the header of the table. Can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic selection inside the component.	boolean \| { external?: boolean }	-	-
selected 4.8.0+	Array of selected objects, where each object represents one item - row in table. Example item: `{ name: 'John' , age: 12 }`	Item[]	-	() => []
sorter-value	State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.: { column: 'status', state: 'asc' }	SorterValue	-	-
table-body-props	Properties to CTableBody component.	object	-	-
table-foot-props	Properties to CTableFoot component.	object	-	-
table-filter	When 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-label	The element represents a caption for a component.	string	-	'Filter:'
table-filter-placeholder	Specifies a short hint that is visible in the search input.	string	-	'type string...'
table-filter-value	Value of table filter.	string	-	-
table-head-props	Properties to CTableHead component.	object	-	-
table-props	Properties to CTable component.	object	-	-

Events

Event name	Description	Properties
active-page-change	Page change callback.	page `number` - active page number
column-filter-change	Column filter change callback.	ColumnFilterValue `object` - {[key: string]: string \| number}
filtered-items-change	Filtered items change callback.	items `array` - undefined
items-per-page-change	Pagination change callback.	itemsPerPageNumber `number` - items per page number
row-click	Row click callback.	item `object` - undefined index `number` - undefined columnName `string` - undefined event `event` - undefined
select-all	Select all callback.
selected-items-change	Selected items change callback.	items `array` - undefined
sorter-change	Sorter value change callback.	SorterValue `object` - { column?: string, state?: number \| string}
table-filter-change	Table filter change callback.	tableFilterValue `string` - undefined

On this page

CoreUI PRO Component

Vue Smart Table Component (DataTable)

Other frameworks

Features #

Basic usage #

Column names #

Column groups #

Table with headers spanning multiple rows or columns #

Custom filters #

Date Range Picker #

Multi Select #

Data sources #

External Data (10.000+ records) #

JSON (10.000+ records) #

API #

CSmartTable #

Props #

Events #

Features

Basic usage

Column names

Column groups

Table with headers spanning multiple rows or columns

Custom filters

Date Range Picker

Multi Select

Data sources

External Data (10.000+ records)

JSON (10.000+ records)

API

CSmartTable

Props

Events