DataTable

A table with sort, a global search, column filters (text, list, range), pagination and selection. In server mode it only shows the rows it gets and asks for the next ones with the query event. Its state can live in the URL.

import { DataTable } from '@zairakai/vue-components/Data'

Usage

<DataTable />

Example

Search

Filter Name

Filter Age

Filter StatusAllopenclosed

People

			Status
	Ada	36	open
	Alan	41	closed
	Grace	85	open

<script setup>
  const columns = [
    { key: 'name', label: 'Name', sortable: true, filter: 'text' },
    { key: 'age', label: 'Age', type: 'number', sortable: true, align: 'end', filter: 'range' },
    { key: 'status', label: 'Status', filter: 'select', options: ['open', 'closed'] },
  ]

  const rows = [
    { id: 1, name: 'Ada', age: 36, status: 'open' },
    { id: 2, name: 'Alan', age: 41, status: 'closed' },
    { id: 3, name: 'Grace', age: 85, status: 'open' },
    { id: 4, name: 'Linus', age: 55, status: 'open' },
  ]
</script>

<template>
  <DataTable
    :columns="columns"
    :rows="rows"
    caption="People"
    searchable
    selectable
    :page-size="3"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
columns	array	[]	The columns: { key, label, sortable, type: "text" | "number" | "date", align, format }.
rows	array	[]
rowKey	string	'id'	The property that identifies a row.
caption	string
sort	object	undefined	{ key, direction: "asc" | "desc" }, with v-model:sort.
search	string	undefined	The text filtered on, with v-model:search. A search box is shown when searchable.
searchable	boolean	false
filters	object	undefined	The value of every column filter, by column key, with v-model:filters. A range is "min..max".
clearFiltersLabel	string	'Clear filters'
filterLabel	string	'Filter {column}'	The label of a filter. Use {column}.
minLabel	string	'from'
maxLabel	string	'to'
allLabel	string	'All'
searchLabel	string	'Search'
page	number	undefined	The current page, starting at 1, with v-model:page.
pageSize	number	10
selected	array	undefined	The keys of the selected rows, with v-model:selected. A selection column is shown when selectable.
selectable	boolean	false
serverSide	boolean	false	The server sorts, filters and paginates: the table only shows the rows it gets and asks for the next ones with the query event. Give the total of rows.
total	number
loading	boolean	false
emptyText	string	'Nothing to show'
queryPrefix	string	undefined	Keep the page, the sort and the search in the URL: ?page=2&sort=name&dir=desc&q=ada. The value is the prefix of the parameters, an empty string for none.
locale	string
selectAllLabel	string	'Select all rows'
selectRowLabel	string	'Select row'

Events

Name	Description
update:sort
update:search
update:page
update:selected
update:filters
query

Slots

Name	Description
cell-${column.key}
empty

See Theming for the class hooks and the data-* state of the components.