@tigerbui/vue3-tig-table
v0.0.9
Published
Vue 3 tale ui/ux design
Downloads
16
Maintainers
Readme
Quick start
NPM
npm i @tigerbui/vue3-tig-table
Usage
<script setup lang="ts">
import ITable from "@tigerbui/vue3-tig-table";
import { ref } from "vue";
interface InterfaceTableCol {
title: string;
key: string;
}
const dataDemo = ref<any>({
columns: [
{
title: 'Tên',
key: 'name',
sorter: true
},
{
title: 'Văn phòng',
key: 'office',
},
{
title: 'Extn',
key: 'extn'
},
{
title: 'Ngày bắt đầu',
key: 'start_date'
},
{
title: 'Salary',
key: 'salary'
}
] as any[],
rows: [] as any[]
});
Array.from({length: 50}, (_, _id) => {
dataDemo.value.rows.push({
name: `Name ${_id+1}`,
position: 'System Architect',
salary: "$" + Math.ceil(Math.random()*(_id+5000)),
start_date: '2011/04/25',
office: `Office ${Math.ceil(Math.random()*_id)}`,
extn: Math.random()*(_id+5421)
})
});
const rowCheckbox = ref<InterfaceRowCheckbox>({});
</script>
<template>
<h1>Demo Vu3 i-table</h1>
<ITable :row-checkbox="rowCheckbox" :columns="dataDemo.columns" :rows-data="dataDemo.rows"/>
</template>
Demo online
http://table.tigerbui.com/
API
Vue3 ITable
| Property | Description | Type | Default |
|----------|-------------|------|---------|
| columns | Columns of table config | array
| - |
| rowsData | Data record array to be displayed | any[]
| - |
| headerOptions | headerOptions of table config | object
| - |
| rowCheckbox | Checkbox to be displayed | type? | null
| null |
| pagination | pagination of table config | object
| - |
Column
| Property | Description | Type | Default |
|----------|-------------|------|---------|
| Title | Title of this column | string
| - |
| key | Unique key of this column | string
| - |
| sorter | Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true | Function|boolean
| - |
Header Options
| Property | Description | Type | Default |
|----------|-------------|------|---------|
| show | Show hide header of table | boolean
| true |
| search | Search of HeaderOptions config | object
| - |
Search
| Property | Description | Type | Default |
|----------|-------------|------|---------|
| placeholder | placeholder of input[type=search]
| string
| "Tìm kiếm ..." |
Pagination
| Property | Description | Type | Default |
|----------|-------------|------|---------|
| current(v-model:current) | current page number | number
| 1 |
| defaultPageSize | default number of data items per page | number
| 10 |
| pageSize(v-model:pageSize) | number of data items per page | number
| - |
| totalItem | total number of data items | number
| 0 |
License
vue3-tig-table open-sourced software licensed under the MIT license.