Přeskočit na hlavní obsah

Column

Rendering sloupců v datagridu vám umožní zobrazit data přesně tak, jak potřebujete - sloupce jsou Vue komponenty.

Megio panel

Instalace vitejs/plugin-vue​

Pokud jste doposud nepracovali se soubory .vue, tak nyní je potřeba provést menší konfiguraci - postupujte prosím podle následujících kroků v kapitole práce s assety - vue a teprve poté pokračujte dále.

1. Vytvoření komponenty​

assets/panel/datagrid/columns/MyCustomColumnRenderer.vue
<script setup lang="ts">
import { mdiMinus } from '@mdi/js'
import { useVuetify } from 'megio-panel'
import type { IRow, IColumnSchema, IColumnProp } from 'megio-api/types/collections'

// Vuetify
const { VIcon } = useVuetify()

// Dostupné props
defineProps<{
    value: any // Otypovat dle potřeby
    columnIndex: number
    columnSchema: IColumnProp
    tableSchema: IColumnSchema
    row: IRow
}>()
</script>

<template>
    <a
        class="text-decoration-none"
        v-if="value"
        :href="value"
        target="_blank"
    >
        {{ value }}
    </a>
    <VIcon v-else :icon="mdiMinus" color="grey" size="sm" />
</template>

2. Registrace komponenty​

Aby se datagrid dozvěděl o novém column-rendereru, je nutné ho zaregistrovat v souboru assets/panel.ts.

assets/panel.ts
import 'megio-panel/styles'
import { createMegioPanel, useGlobals } from 'megio-panel'
import MyCustomColumnRenderer from '@/assets/panel/datagrid/columns/MyCustomColumnRenderer.vue'

const { columns, modals, actions, fields } = useGlobals()
const datagrid = { actions, modals, fields, columns }
const apiUrl = window.location.host.includes('localhost') ? 'http://localhost:8090/' : '/'

createMegioPanel(apiUrl, {
    datagrid: {
        ...datagrid,
        columns: [
            ...columns,
            {
                // Komponenta column rendereru
                component: MyCustomColumnRenderer,
                
                // Název rendereru definovaného v `MyCustomColumn.php`
                rendererName: 'my-custom-column-renderer'
            }
        ]
    }
})

3. Build projektu​

yarn build

Související​