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

<template> 
	<div id="app"> 
		<DynamicTableVue3 
		:data="clients"
		:translations="translations"
		:visible-columns="['id', 'name', 'email', 'phone', 'locations']"
		show="test/" edit="edit/"  /> 
	</div>
 </template>

Technologies used in the project:

• vue3

• vite

• js

• node

This project is licensed under the MIT

[email protected]