dynamic-table-vue3 v1.0.6

Here're some of the project's best features:

• Data: Array of objects representing the data to be displayed in the table. Required.

• Translations: Object mapping data fields to their translations for display in the table headers. Default is an empty object.

• VisibleColumns: Array of strings representing the columns that should be initially visible. Default is an empty array.

• Edit: String representing the base URL for the edit action used to construct the URLs for edit buttons.

• Show: String that could be used to build URLs for a "show" action although it's not utilized in this component.

• organizeData(): Prepares the data to be displayed in the table. Automatically called when the component is created.

• changePage(page): Changes the current page of displayed data.

• nextPage(): Moves to the next page of data.

• prevPage(): Moves to the previous page of data.

• downloadCSV(): Downloads the filtered and visible data in CSV format.

• downloadExcel(): Downloads the filtered and visible data in Excel format.

• toggleColumn(col): Adds or removes a column from the list of visible columns.

• sortBy(key): Sorts the data by the specified column. If already sorted by that column, reverses the order.

• sortData(data): Auxiliary function for sorting the data.

Step 1: Install the Dependency

npm install dynamic-table-vue3

yarn add dynamic-table-vue3

  

### Step 2: Import and Register the Component Globally

  

import { createApp } from 'vue'; import App from './App.vue'; // Import the component import DynamicTableVue3 from 'dynamic-table-vue3'; const app = createApp(App); // Register the component globally app.component('DynamicTableVue3' DynamicTableVue3); app.mount('#app');

### Step 3: Use the Component in Your Vue Application

Technologies used in the project:

• vue3
• vite
• js

• node

This project is licensed under the MIT

dev.ecortescl@gmail.com