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.