Secondary encapsulation of element-plus Table, providing flexible configuration items
English | 简体中文
element-plus Table Table-column attribute can only be written in the <template></template> template at present, which is not very flexible. If the table has enough column, the code is written and looks bloated, but element-plus Virtualized Table The configurability is very high. In order to maintain unity, I encapsulated Table twice and used cellRenderer, headerRenderer These two custom renderers, Built-in Pagination component that can be rendered by configuration, of course, there are some additional properties, let's explore together
🦾 High flexibility and strong typing: Written using TSX syntax, with powerful type derivation prompts and flexible and convenient configuration
⚡ Completely tree-shakable: Comes with Tree-Shaking, only packages imported code
🫶 Zero code intrusion: Keep all properties, slots, events, and methods of Element-Plus Table At the same time, it provides more flexible configuration, and also has built-in paging components and loading animations that can be rendered through configuration, as well as table adaptive content area height, etc. Of course custom namespace will not be affected in any way
🌍 Internationalization friendly: Built-in three streamlined internationalization (Simplified Chinese: zhCn, Traditional Chinese: zhTw, English: en) support, providing three internationalization configuration methods to configure it More flexible and convenient. Of course, it can also be combined with vue-i18n to make the table adapt to international languages
💚 SSR friendly: fully compatible with Nuxt3
📡 Can be referenced through CDN: Supports both jsdelivr and unpkg
npm install @pureadmin/table
# or
yarn add @pureadmin/table
# or
pnpm add @pureadmin/table<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@pureadmin/table/dist/style.css" />
<script src="//cdn.jsdelivr.net/npm/@pureadmin/table"></script>
<!-- or -->
<link rel="stylesheet" href="//unpkg.com/@pureadmin/table/dist/style.css" />
<script src="//unpkg.com/@pureadmin/table"></script>import "@pureadmin/table/dist/style.css";
import { PureTable } from "@pureadmin/table";
<pure-table :data="dataList" :columns="columns" :pagination="pagination"></pure-table>import { createApp } from "vue";
import App from "./App.vue";
import "@pureadmin/table/dist/style.css";
import PureTable from "@pureadmin/table";
const app = createApp(App);
app.use(PureTable).mount("#app");Click to view usage examples introduced by on-demand, global, namespace, nuxt3 and Html files
If you are using Volar, you can configure compilerOptions.types in tsconfig.json to specify the global component type (especially if you want to get type hints when registering globally, you need to add the following configuration)
// tsconfig.json
{
"compilerOptions": {
//...
"types": ["@pureadmin/table/volar"]
}
}