Hoc Element Table

Overview

The @hoc-element/table package is a plugin for Vue 3.x that provides a pre-configured table component based on the element-plus library. It aims to simplify table generation by allowing developers to configure tables through a configuration file instead of writing extensive HTML templates. This results in increased flexibility and efficiency in development.

Features

• Built with Webpack 5
• Full support for Vue 3
• JSON serialization for quick table configuration
• Built-in pagination
• Customizable column names
• Customizable cell rendering
• Customizable cell styles
• Support for custom directives
• Support for element-plus Table events and methods
• Control over the visibility of headers and pagination

Installation

To use the @hoc-element/table package, you need to have element-plus installed. Here are the steps to install the package:

1. Install element-plus:

npm install element-plus

2. Install @hoc-element/table:

npm install @hoc-element/table

3. Import the package in your Vue component:

import { createApp } from 'vue';
import { h } from 'vue';
import App from './App.vue';
import HocElementTable from '@hoc-element/table';

const app = createApp({
  components: {
    HocElementTable,
  },
  render: () => h(App),
});

app.use(HocElementTable);
app.mount('#app');

4. Use the hoc-element-table component in your Vue template:

<template>
  <hoc-element-table :data="tableData" :columns="tableColumns"></hoc-element-table>
</template>

Summary

The @hoc-element/table package is a Vue 3.x plugin that simplifies table generation by providing a pre-configured table component based on the element-plus library. With features such as JSON serialization, customizable rendering, and support for element-plus Table events and methods, it offers developers increased flexibility and efficiency in building tables. To use the package, element-plus needs to be installed, and the component can be easily integrated into Vue templates.