DOCSEARCHbyAlgolia
Submit Docs

vxe-table Documentation

repository·main·Indexed 27 days ago

https://github.com/x-extends/vxe-table

An enterprise-grade PC table component for Vue 3 based on Vxe UI. It provides high-performance solutions for large datasets via virtual scrolling, editable cells, Excel-style copy-paste, and data pivot tables. The library includes components such as VxeTable, VxeGrid, VxeColumn, VxeColgroup, and VxeToolbar, along with global configuration for themes, internationalization, and UI settings.

Tokens
3.5K
Snippets
10
Records
29
Agent score
91%

What's inside vxe-table

  1. Overview of vxe-table

    main

    vxe-table is an enterprise-grade PC table component built on top of Vxe UI. It is designed for high-performance scenarios and supports features such as:

    • Editable tables with CRUD (Create, Read, Update, Delete) capabilities.
    • Excel-style copy and paste.
    • Pivot tables.
    • Virtual scrolling for high-performance rendering of large datasets.

  2. Install vxe-table via CDN

    main

    If using a CDN, ensure you include the required dependencies in order: vue, xe-utils, vxe-pc-ui, and finally vxe-table. It is recommended to lock version numbers to avoid breaking changes. Note that using third-party CDNs in production is not recommended due to potential connection failures.

    <!-- style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- table -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>

  3. Develop and build vxe-table

    main

    If you are contributing to the repository or running the project locally, use the following commands:

    • npm run update: Install dependencies.
    • npm run serve: Start local debugging server.
    • npm run lib: Compile and build the project into es and lib directories.
    npm run update
npm run serve
npm run lib

  4. Configure vxe-table with NPM

    main

    Import VxeUITable and its corresponding CSS file, then register it as a plugin in your Vue application instance.

    // ...
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeUITable).mount('#app')

  5. Configure vxe-table in a Vue 3 application

    main

    After installing, import VxeUITable and its corresponding CSS. Register it as a plugin in your Vue application instance using .use(VxeUITable).

    // ...
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeUITable).mount('#app')

  6. Install vxe-table via NPM

    main

    To use vxe-table in a Vue 3.x project, install the package using npm. This component is built on top of Vxe UI and provides enterprise-grade table solutions including editable tables, Excel-like copy/paste, and virtual scrolling for high performance.

    npm install vxe-table

  9. Install the VxeColgroup component

    main
    To use the colgroup functionality in a Vue application, install and register the VxeColgroup component. This component can be registered globally via the install method, which also provides backward compatibility by registering the component under the name VxeTableColgroup.