@quanzo/vue-table

Table - component for Vue.js

The component allows you to display tabular data. Sort by columns. Select lines. Edit data directly in the table. Block columns or rows from changing.

Demo

 

Install via NPM

npm i --save-dev @quanzo/vue-table

Load from CDN

You can load specific version of package from jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/@quanzo/vue-table"></script>

 

Methods provided by the component Table

provide	return	description
registerEventListener(eventName, func)
load(tableData)		Upload new data to the table.
getColumnConfig(col)	Object
isRow(row)	boolean	Checks for row presence
isCell(row, col)	boolean	Checks for cell presence
cell(row, col)	mixed
setCell(row, col, value)	boolean
rows()	integer	Total count rows in table
row(row)	array|object	Get row data
setRow(row, value)	boolean	Set row data. Value is array or object/
insertRow(afterRow, ...value)		Insert rows after row. afterRow =-1 then insert at the beginning of the array
deleteRow(row, count = 1)		Delete lines starting from this
getCellClasses(row, col)	string	Get cell classes
getRowClasses	string	Get row classes
setCellClasses(row, col, classes)		Set cell classes
setRowClasses(row, classes)		Set row classes
getChecked()	array	Returns the status checked of each row in an array. Array index - line number. Value - if checked = true, other = false
checkRow(row, status = null)	boolean	Get or set selection mark. If status == true/false - set or reset mark
blockRow	boolean	Set or reset row lock. If the line is locked, then its editing is prohibited. If status == true/false - set or reset block

 

Events

event	$emit	event params	description
event-end-edit-cell	yes	{row: ..., col: ..., initial: ..., result: ..., data: ...}	The event will be triggered after editing the cell.
event-sort-table	yes	[{col: ..., direct: "asc|desc"}, ... {col: ..., direct: "asc|desc"} ]	The event will be triggered after sorting.
event-checked	yes	{current: []}	The event will be triggered after checked row.

 

Options

param	type	default	sample	description
data	array	[]		Data to display in the table. Array of strings. A string can be an array or a data object.
columns	array	false	[”ID”, “Name”, “Family”]	Data on the columns of the table. If an array, then these are the column headers. If the object is advanced settings. If not, column headers will not be displayed.
columns	object	false	{ID: {name:”Identify”, enableEdit: false, enableSort: false, type:”number”}, town: {name:”Company town”, enableEdit: true, enableSort: true, type: “select”, options: {msk: “Moscow”, spb: “Snakt-Petersburg”}}}	Данные по колонкам таблицы. Если массив, то это заголовки колонок. Если объект - то это расширенные настройки. Если нет - заголовоки колонок выведены не будут.
useUndo	boolean	true		Activate ctrl+z
defEnableEdit	boolean	true		Default value enableEdit param for column
enableEdit	boolean	true		Enable/disable edit all cell
defEnableSort	boolean	true		Default value enableSort param for column
enableSort	boolean	true		Enable/disable all row in table
enableChecked	boolean	true		Whether or not line marking is available.
sort	array	[]	[{col:”name”, direct:”asc”}, {col:”id”, direct:”desc”}]
checkedRows	array	[]	[false, true]	Checked row number 1.
blockedRows	array	[]	[false, false, true]	Block row number 2
cellClasses	array	[]
rowClasses	array	[]	[”marked checked”, ”not-marked”, “”, “”]

 

Available types of columns

type = string

...
name: {
    name:”User name”,
    enableEdit: false,
    enableSort: false,
    type:”string”, // or do not set the parameter
    default: "" // or not set
}
...

type = number

...
id: {
    name:”Identify”,
    enableEdit: false,
    enableSort: false,
    type:”number”,
    default: 0 // or not set
}
...

type = select

...
town: {
    name:”Company town”,
    enableEdit: true,
    enableSort: true,
    type: “select”,
    options: {
        msk: “Moscow”,
        spb: “Sankt-Petersburg”
    },
    default: "spb"
}
...

type = image

edit as string, view as image