Introduction

A VueJS application showing a data-table component in action.

Features

• App is scaffolded using vue cli and follows recommended vue style guide and vue eslint rules
• Client side pagination is done via a generic pagination component
• Case insensitive text search across all columns
• Filtering and sorting of columns
• Inline editing of row fields
• VueX is used for state management with Firebase Realtime Database as persistent data store
• Rows can be selected individually or in bulk and actions can be performed on them
• Active filters can be reset
• Sass is used for writing modular CSS using BEM conventions

Running App

m2-table is the Vue app. After cloning the repo locally, run cd data-table-vue/m2-table

and follow the steps at m2-table readme

This app is also deployed at https://m2-table.surge.sh

API Documentation

m2-table is the main component. It accepts 3 properties like below

<m2-table
  :tableProps="tableProps"
  :model="model"
  :columnDefs="columnDefs"
></m2-table>

tableProps

An object having properties which defines the behaviour of table.

Key	Required	Data Type	Description
isPaginated	no	boolean	Whether pagination elements and functionality is needed
itemsPerPage	no	boolean	Items to show per page, should be provided in addition to above
isSelectable	no	boolean	Is any row selectable
hasGlobalSearch	no	boolean	For text search across all columns
rowActions	no	array	List of objects defining row action (see below)

tableProps.rowActions

An array of objects defining row action. Object structure as follows

Key	Required	Data Type	Description
id	yes	string	A unique string to identify b/w row actions
name	yes	string	Label to be disaplyed for action dropdown menu
handler	yes	function	Handler function which will be called on selecting that action menu

columnDefs

An array of column defintion objects. Object structure as follows

Key	Required	Data Type	Description
id	yes	string	A unique string to identify b/w columns
name	yes	string	Column header string
isSortable	no	boolean	Whether column is sortable or not
isFilterable	no	boolean	Whether column is filterable or not
isCellEditable	no	boolean	Whether row cell is inline editable or not

model

An array of data objects which will be displayed per row in table

Workflow Examples

Column Filtering and Sorting

Inline Editing

Search

Pagination

Responsiveness

Bulk Actions