About this package
This is a vue2 datatable with support for sortable columns, filtering and searching. It is purely implemented with divs
(no tables) and is mobile-first.
Installation
npm install @unicorns/datatable --save
Usage
// In your vue component
<template>
<div>
<data-table :options="tableOptions" :dataset="dataset"></data-table>
</div>
</template>
<script>
import DataTable from '@unicorns/data-table'
export default {
components: {
DataTable
},
data(){
return {
tableOptions: {...},
dataset: [{...}, {...}, {...}, ...]
}
}
}
</script>
Setup
The component accepts only two props
-
options
- A configuration options object, described in details in the next section -
dataset
- An array of data items to be rendered. The data table expects each item in the array to be an object, with each key representing a table column. If your data set consists of simple values like strings and numbers, you can use a mapping function to convert them to objects.
Configuration Options
The options
prop is an object with the following props
-
fields
- an array of configs for each table column. Each config has the following properties-
header
- Boolean. Determines if the column has a header or not -
field
- The value key for this field in the data sets. Use dot syntax to denote nested properties -
name
- Table header label -
type
- Possible values aretext
,currency
,number
,boolean
,component
,count
(count of array items),image
,datetime
,date
,time
orcustom
. Additional options maybe required depending on the type selected here -
image
- Image url if type isimage
-
no
- What to render iftype
is boolean and field value isfalse
-
yes
- What to render iftype
is boolean and field value istrue
-
component
- component if type is component. It can be an object, a string or function that returns a component. The function is called with the data object -
props
- props for field type component. It is a function which receives the row data and returns an object -
events
- an object with event names and handlers. Only required if field type is component -
symbol
- Currency symbol if type is currency -
value
- value if type is custom. Can be a function that returns a value or a literal value -
secondary
- boolean value determines if column is shown on small screens or not -
grow
- flex grow css property
-
-
config
- Has the following properties-
search
- search configuration-
enabled
- true or false. Disable or enable search -
placeholder
- Search box placeholder -
term
- search v-model
-
-
filtering
- Configuration for filtering-
enabled
- Boolean, whether filtering is enabled or not -
filters
- An array of filters-
type
- Filter type. Can betabbed
,checkbox
, ordropdown
-
tabs
- An array of tab filters. Only required iftype
istabbed
-
type
- Tabbed filter type. Can bedate
orrange
-
-
field
- Field to filter -
value
- Initial value of checkbox or dropdown filter -
placeholder
- Dropdown filter placeholder -
options
- An array of options for dropdown filters. Can be strings or objects withlabel
andvalue
keys
-
-
-
linking
- Configuration for converting a whole table row into a link-
enabled
- True or false to enable/disable linking -
link
- A function called with row data and returns a router-link:to
prop value
-
-
-
controls
- An array of configurations for call-to-actions for each row.-
type
- Can belink
orcomponent
-
href
- a callback function to return link configuration if type is link. Its called with the data for that row -
label
- label if type is link -
props
- Either a callback function or object if type iscomponent
-
events
- Events config if type is component
-
Example setup
dataset: [
{
id: 1,
name: 'Jon Doe',
date_of_birth: '01-01-1970',
role: 'admin',
active: true
},
{
id: 2,
name: 'Jane Doe',
date_of_birth: '01-01-1971',
role: 'editor',
active: false
},
{
id: 3,
name: 'Jane Doe',
date_of_birth: '01-01-1971',
role: 'manager',
active: true
},
],
options: {
fields: [
{
field: 'name',
name: 'Name',
type: 'text',
header: true
},
{
field: 'date_of_birth',
name: 'Birthday',
type: 'date',
header: true
},
{
field: 'role',
name: 'Role',
type: 'text',
header: true
},
{
field: 'active',
name: 'Status',
type: 'boolean',
header: true,
yes: 'Active',
no: 'Disabled'
}
],
config: {
filtering: {
enabled: true,
filters: [
{
type: 'dropdown',
field: 'role'
options: [
{label: 'Admin', value: 'admin'},
{label: 'Manager', value: 'manager'},
{label: 'Editor', value: 'editor'}
]
},
{
type: 'checkbox',
field: 'active',
value: true
},
{
type: 'tabbed',
tabs: [
{type: 'date'}
]
}
]
},
controls: [
{
type: 'link',
label: 'View',
href: (user) => {
return {name: 'ViewUserProfile', props: {userId: user.id}}
}
},
{
type: 'component',
component: 'DeleteUserDialog',
props: (user) => {
return {
userId: user.id,
name: user.name
}
},
events: {
success: () => {
//code to reload users list go here
},
error: () => {
//show an error message here
}
}
}
]
}
}
Basic Theme Support
You can set a basic theme on the datatable.
It uses CSS modules and variables and a little bit of upfront processing to override the included defaults.
To pass in the theme you now need to Vue.use(DataTable)
You can also add custom assets for dropdowns, checkboxes, etc.
Example
// In the host application
import DataTable from '@unicorns/datatable'
// This example will override these theme variables.
Vue.use(DataTable, {
theme: {
primary: '#DAB',
secondary: '#343',
padding: '1em',
gap: true, // adds a gap between the filtering and the table
rowHeight: '65px'
},
// you can also add custom assets
assets: {
dropdown: 'url(data:image/svg+xml;utf8,<svg><path stroke="#000" d="m2,2 15,15m0-15-15,15"/></svg>)'
}
})
Version History
v1.x is now deprecated and no longer supported.
v2.x is the latest version and is not backwards compatible with applications currently using v1.x.
Ensure you test your application sufficiently before updating the version from 1.x to 2.x