0.0.1 • Published 2 years ago
nvxtable v0.0.1
nvx-table
Browser Support
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Features
- Basic table
- Grid
- Striped
- Table with border
- Cell style
- Column resizing
- Maximum table height
- Resize height & width
- Fixed column
- Grouping table header
- Table footer
- Highlight row & column
- Table sequence
- Radio
- Checkbox
- Select
- Switch
- Sorting
- Multi field sorting
- Filter
- Merged cells
- Merged footer items
- Import/Export/Print
- Show/Hide column
- Loading
- Formatted cell
- Slot - template
- Context menu
- Detail - Expandable row
- Pager
- Form
- Toolbar
- Pulldown
- Virtual list
- Virtual tree
- Editable CRUD
- Validate
- Data Proxy
- Keyboard navigation
- Modal
- VxeGlobalRenderer
- Virtual scroller
- Virtual merger
- (pro) Cell area selection
- (pro) Cell copy & paste
- (pro) Cell find and replace
Installing
Version: vue 3.x, Dependent: xe-utils
npm install xe-utils vxe-table@next
npm
import { createApp } from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount('#app')
Example
<template>
<div>
<vxe-table :data="tableData">
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-colgroup title="Group1">
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const tableData = ref([
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
])
return {
tableData
}
}
})
</script>
Run the project
Install dependencies
npm install
Start local debugging
npm run serve
Compile packaging, generated compiled directory: es,lib
npm run lib
0.0.1
2 years ago