Introduction

This is a test project that I made to practice and better understand Vue 3. I haven't seen a thorough table component for Vue 3 this may fill in that gap for future uses. It may go open source with it after it matures enough for public usage.

Installation

---

Install the package

npm install --save vue-my-table-3

Import and globally register the component in your entry file (main.js).

import { createApp } from 'vue'
import VueMyTable3 from 'vue-my-table-3'

createApp(App)
	.use(VueMyTable3)
	.mount('#app')

Then you can use it in your Vue components as:

<vue-table></vue-table>

Properties

---

columns

Required: true

Property	Description	Required?	Default	Values
name	Name of the column to use from the data set	true	-	-
text	Header text to appear on the table	true	-	-
dataType	Data type to use for column filtering, only used in conjunction with isFilterable column property	false	'text'	'text' 'select' 'boolean' 'date' 'daterange'
align	Text alignment for data rows	false	'center'	'left' 'right'
customClass	Custom class to apply to the data cell	false	-	-
isSortable	Sets if the column should sort	false	false	true false
isFilterable	Sets if the column should be filtered, used in conjunction with dataType column property	false	false	true false
isVisible	Sets if the column should be visible	false	true	true false

data

Required: true

This property should contain an array of objects that have property names that match with name column properties from the columns table property.

pagination

Required: false

This property is optional but can allow for the given data set to be paginated once provided.

Property	Description	Type
currentPage	Page to start at	Number
perPage	How many rows to show per page	Number

locale

Required: false

Default: 'en-US'

This property is used for deciding locale for sorting and filtering.

isFilterable

Required: false

Default: false

If set to true, adds a row under column headers for filtering that column (if that column's isFilterable property is set to true).

striped

Required: false

Default: false

If set to true, adds stripes to the even rows.