This component allows you to create a dynamically sortable table using Vue.js. The table headers, rows, and optionally action areas can be defined dynamically.
- Dynamic Sorting: Click on the table headers to sort the rows in ascending or descending order.
- Custom Icons: You can customize the sorting icons.
- Action Area: Optionally, add an action area to the far right of each row where you can insert custom content using a template slot.
- Search Area: Optionally, add search area to each column.
- Pagination: Easily paginate your data to control the number of rows displayed per page.
- Conditional Row Coloring: Change the background color of rows based on specific conditions.
- Custom Column Slots: Add custom content to specific columns using template slots.
- No Results Message: Customize the message shown when no search results are found using a template slot.
Ensure you have Vue 3 installed to use this component.
Include the component in your project and use it as shown in the example below:
<template>
<MyTableComponent
:headers="headers"
:rows="rows"
:sortAscIcon="'sort-asc'"
:sortDescIcon="'sort-desc'"
:sortDefaultIcon="'sort-default'"
:action="true"
:columnSearch="true"
:perPage="5"
:coloredRows="coloredRows"
:defaultCss="true"
>
<template #action="{ row }">
<button @click="handleAction(row)">Action</button>
</template>
<template #column-age="{ row, value }">
<span :style="{ fontWeight: value > 30 ? 'bold' : 'normal' }">{{ value }}</span>
</template>
</MyTableComponent>
</template>
<script setup lang="ts">
import MyTableComponent from './MyTableComponent.vue';
const headers = [
{ text: 'Name', value: 'name' },
{ text: 'Age', value: 'age' },
{ text: 'Country', value: 'country' }
];
const rows = [
{ name: 'John Doe', age: 30, country: 'USA' },
{ name: 'Jane Smith', age: 25, country: 'Canada' },
{ name: 'Sam Green', age: 35, country: 'UK' }
];
const handleAction = (row) => {
alert(`Action clicked for ${row.name}`);
};
</script>
Defines the table headers. Each header should be an object with text (header label) and value (key for table data) properties.
const headers = [
{ text: 'Name', value: 'name' },
{ text: 'Age', value: 'age' },
{ text: 'Country', value: 'country' }
];
Defines the table headers. Each header should be an object with text (header label) and value (key for table data) properties.
const rows = [
{ name: 'John Doe', age: 30, country: 'USA' },
{ name: 'Jane Smith', age: 25, country: 'Canada' },
{ name: 'Sam Green', age: 35, country: 'UK' }
];
Adds a CSS class to the table header row.
Applies styles to the table header row.
const headerStyle = {
backgroundColor: '#f1f1f1',
color: '#333'
};
CSS class for the ascending sort icon.
<span class="sort-asc"></span>
CSS class for the descending sort icon.
<span class="sort-desc"></span>
CSS class for the default sort icon.
<span class="sort-default"></span>
If true, adds an action area to the far right of each row. Default is false.
If true, there is a search field under each column.
Number of records to show on one page
Defines conditions to color the rows based on specific key-value pairs. Each condition is an object with a key, value, and color property.
const coloredRows = [
{ key: 'age', value: '30', color: 'lightblue' },
{ key: 'country', value: 'Canada', color: 'lightgreen' }
];
If true, css works. If not the table works without css.
You can define custom content for the action area of each row using a template slot named action.
<template #action="{ row }">
<button @click="handleAction(row)">Action</button>
</template>
You can define custom content for a specific column using a slot named column-[header.value], where [header.value] is the value of the header.
<template #column-age="{ row, value }">
<span :style="{ fontWeight: value > 30 ? 'bold' : 'normal' }">{{ value }}</span>
</template>
You can define custom content to be displayed when no search results are found using a slot named undefined-result.
<template #undefined-result>
<div>No results found</div>
</template>
- Custom Column Slots: To add custom content to a specific column, use a slot named column-[header.value], replacing [header.value] with the value of the column header. This allows you to insert custom elements or apply custom styling based on the data in that column.
A method to handle actions for a specific row. You can define this method in your component and pass it to the table component.
const handleAction = (row) => {
alert(`Action clicked for ${row.name}`);
};