Vuejs Dynamic Slot Content

vue-table-dynamic

A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.

Another really cool feature of VueJS is Dynamic Components. What are dynamic components you ask? Well, let’s say you have a main component and you would like to dynamically load other components into the main template by clicking a button or some other means. This is what can be accomplished with dynamic components.

• Slots are a powerful tool for creating reusable components in Vue.js, though they aren’t the simplest feature to understand. Let’s take a look at how to use slots and some examples of how they can be used in your Vue applications.
• Dynamic scoped slots in Vue.js Posted on 11 April 2019 in Web Slots are super-powerful in Vue.js. They let you inject components from a parent into a various parts of the child, helping you compose nice and generic components.
• Use v-if/v-else if the two components have very different slot content. Use dynamic components if they have the same slot content. I use dynamic components a lot to create different mobile and desktop interfaces.
• Vue.js - The Progressive JavaScript Framework. Modal Component Example. Features used: component, prop passing, content insertion, transitions.

vue-table-dynamic is a vue component of dynamic table. It's designed to respond to data changes in real time, and oriented to the runtime.

Features

• Multiple Select
• Search
• Sort
• Filter
• Pagination
• Edit
• Border
• Stripe
• Highlight
• Column Width
• Configure Header
• Fixed Header

Install

Usage

Import

Registration

Global registration

Local registration

Basic Table

Basic table usage

Border

Bordered table usage

• border:true with border
• border:false without border

Stripe

Striped rows

• stripe:true striped
• stripe:false unstriped

Highlight

Highlighted rows/columns/cells

• highlight:{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;} configure highlighted rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]} if negative, the position from the end of the array.
• highlightedColor:string configure highlighted colors

Multiple Select

Select multiple rows

• showCheck:boolean show checkbox of rows
• getCheckedRowDatas:function get data for all currently selected rows
• setAllRowChecked:function(selected:boolean) toggle all selection
• select:event currently selected/unselected rows

Search

Filter rows by keyword

• enableSearch:boolean enable/disable searching
• search:function(value:string) manual row filtering

Sort

Sort rows based on specified column data

• sort:Array<number> array members are sortable column indexes. such as: [0, 1]

Filter

Filter rows based on specified column data and rule

• filter:Array<{column:number; content:Array<{text:string; value:string number;}>; method:function;}> specify filterable columns and rules. such as: [{column: 0, content: [{text: '> 2', value: 2}], method: (value, cell) => { return cell.data > value }}]
• filter[].column: column index
• filter[].content: filter items
• filter[].method: filter rule.

Pagination

Table with pagination

• pagination:boolean enable/disable pagination
• pageSize?:number row count of each page. default: 10
• pageSizes?:Array<number> options of row count per page. default: [10, 20, 50, 100]

Edit

Editable table
Support specifying rows/columns/cells for editing

• edit:{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;} configure editable rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]}. if negative, the position from the end of the array.
• getData:function() table data changed after editing, get the latest data by this method.
• cell-change:event cell data changed event
• edit:{row: 'all'} all cells can be edited
• if header is 'row', the first row is not editable

Column width

Vuejs Dynamic Slot Content Tool

Configure column width

• columnWidth:Array<{column:number; width:number string;}> such as: [{column: 0, width: 60}, {column: 3, width: '15%'}]
• columnWidth[].column index of column
• columnWidth[].width width of column. number for pixel value, string for percentage

Header Configure

• header:row the first row is header
• header:column the first column is header
• header:' no header

Fixed Header

Vuejs Dynamic Slot Content Key

Fix header by configure the height of table

• height:number table height
• when the value of header is not 'row', the first row is a normal row, will not fixed

API

Vuejs Dynamic Slot Content Guide

Attributes

• params is the object that need to be passed to the component props
• the following items are all child properties of the params object
• data is required attribute, others are optional

Methods

Vuejs Dynamic Slot Content Tutorial

Events

GitHub