bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix data table

Browse source
This commit is contained in:
Casey 2025-11-11 12:40:47 -06:00
parent 8fa55bea70
commit 10cda824e8
3 changed files with 151 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

97
frontend/documentation/components/DataTable.md
View file

@ -768,102 +768,107 @@ const customFilters = {
```vue
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useModalStore } from '@/stores/modal'
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useModalStore } from "@/stores/modal";
const router = useRouter()
const modalStore = useModalStore()
const router = useRouter();
const modalStore = useModalStore();
const columns = [
{ fieldName: 'name', label: 'Client Name', sortable: true, filterable: true },
{ fieldName: 'email', label: 'Email', filterable: true },
{ fieldName: 'status', label: 'Status', type: 'status', sortable: true }
]
{ fieldName: "name", label: "Client Name", sortable: true, filterable: true },
{ fieldName: "email", label: "Email", filterable: true },
{ fieldName: "status", label: "Status", type: "status", sortable: true },
];
const data = ref([
{ id: 1, name: 'Acme Corp', email: 'contact@acme.com', status: 'completed' },
{ id: 2, name: 'Tech Solutions', email: 'info@tech.com', status: 'in progress' }
])
{ id: 1, name: "Acme Corp", email: "contact@acme.com", status: "completed" },
{
id: 2,
name: "Tech Solutions",
email: "info@tech.com",
status: "in progress",
},
]);
const tableActions = [
// Left-positioned action with filled style
{
label: 'Quick Export',
icon: 'pi pi-download',
label: "Quick Export",
icon: "pi pi-download",
action: () => exportAllClients(),
severity: 'success',
layout: { position: 'left', variant: 'outlined' }
severity: "success",
layout: { position: "left", variant: "outlined" },
},
// Center-positioned bulk action
{
label: 'Archive Selected',
icon: 'pi pi-archive',
label: "Archive Selected",
icon: "pi pi-archive",
action: (selectedRows) => archiveClients(selectedRows),
severity: 'warning',
severity: "warning",
requiresMultipleSelection: true,
layout: { position: 'center', variant: 'outlined' }
layout: { position: "center", variant: "outlined" },
},
// Right-positioned main action
{
label: 'Create Client',
icon: 'pi pi-plus',
action: () => modalStore.openModal('createClient'),
severity: 'info',
layout: { position: 'right', variant: 'filled' }
label: "Create Client",
icon: "pi pi-plus",
action: () => modalStore.openModal("createClient"),
severity: "info",
layout: { position: "right", variant: "filled" },
},
// Single selection action
{
label: 'Edit Details',
icon: 'pi pi-pencil',
label: "Edit Details",
icon: "pi pi-pencil",
action: (rowData) => router.push(`/clients/${rowData.id}/edit`),
severity: 'secondary',
severity: "secondary",
requiresSelection: true,
layout: { position: 'left', variant: 'text' }
layout: { position: "left", variant: "text" },
},
// Primary row action - most important
{
label: 'View',
icon: 'pi pi-eye',
label: "View",
icon: "pi pi-eye",
action: (rowData) => router.push(`/clients/${rowData.id}`),
severity: 'info',
severity: "info",
rowAction: true,
layout: { priority: 'primary', variant: 'outlined' }
layout: { priority: "primary", variant: "outlined" },
},
// Secondary row action - less important
{
label: 'Contact',
icon: 'pi pi-phone',
label: "Contact",
icon: "pi pi-phone",
action: (rowData) => initiateContact(rowData),
severity: 'success',
severity: "success",
rowAction: true,
layout: { priority: 'secondary', variant: 'text' }
layout: { priority: "secondary", variant: "text" },
},
// Dropdown row action - additional options
{
label: 'More',
icon: 'pi pi-ellipsis-v',
label: "More",
icon: "pi pi-ellipsis-v",
action: (rowData) => showMoreOptions(rowData),
rowAction: true,
layout: { priority: 'dropdown', variant: 'icon-only' }
}
]
layout: { priority: "dropdown", variant: "icon-only" },
},
];
const exportAllClients = () => {
// Export logic
}
};
const archiveClients = (clients) => {
// Archive logic
}
};
const initiateContact = (client) => {
// Contact logic
}
};
const showMoreOptions = (client) => {
// More options logic
}
};
</script>
<template>