moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reusable ag grid

Browse Source
This commit is contained in:
Moein Moradi
2025-09-03 17:28:04 +03:30
parent dafb07375a
commit c382d97d8d
7 changed files with 1311 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/pages/dashboards/demo.vue
View File

@@ -1,12 +1,27 @@
<script setup>
import { onMounted, nextTick } from 'vue'
import { onMounted, nextTick, ref } from 'vue'
import { GridStack } from 'gridstack'
import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
import AnalysisCard from "@/components/AnalysisCard.vue";
import CostOverview from "@/components/CostOverview.vue";
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
import GanttChart from './gantt.vue'
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
const ganttColumns = ref([
{ field: 'id', headerName: 'ID', sortable: true, filter: true, width: 80 },
{ field: 'todo', headerName: 'Task', sortable: true, filter: true, flex: 1 },
{ field: 'userId', headerName: 'User ID', sortable: true, filter: true, width: 100 },
{
field: 'completed', headerName: 'Status', sortable: true, filter: true, width: 120, cellRenderer: (params) => {
return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
}
}
])
const processAPIData = (response) => {
return response.todos || response
}
onMounted(async () => {
const grid = GridStack.init({
@@ -49,9 +64,12 @@ onMounted(async () => {
<AnalysisCard />
</div>
</div>
<div class="grid-stack-item" gs-w="12" gs-h="8" gs-max-h="8">
<div class="grid-stack-item" gs-w="12" gs-h="4" gs-max-h="8">
<div class="grid-stack-item-content">
<GanttChart />
<AgGridTable :columns="ganttColumns" api-url="https://dummyjson.com/todos"
:data-processor="processAPIData" :enable-export="true" :enable-edit="true" :enable-delete="true"
:enable-search="true" height="500px" />
</div>
</div>
</div>
@@ -69,11 +87,11 @@ onMounted(async () => {
margin-bottom: 3.2rem;
}
.grid-stack-item:has(GanttChart) {
.grid-stack-item:has(AgGridTable) {
height: 100vh !important;
}
.grid-stack-item:has(GanttChart) .grid-stack-item-content {
.grid-stack-item:has(AgGridTable) .grid-stack-item-content {
height: 100vh;
}
</style>