Implementing the Org Chart Component

PrimeVue includes an Org Chart component that simplifies the process of creating organizational charts. To implement this feature, we begin with the following code in main.js:

import { createApp } from "vue";

import App from "./App.vue";

import PrimeVue from "primevue/config";

import OrganizationChart from 'primevue/organizationchart';

import 'primevue/resources/primevue.min.css';

import 'primevue/resources/themes/saga-blue/theme.css';

import 'primeicons/primeicons.css';

import 'primeflex/primeflex.css';

const app = createApp(App);

app.use(PrimeVue);

app.component("OrganizationChart", OrganizationChart);

app.mount("#app");

In App.vue, we define the structure of our organization chart using the following template:

<template>

<div>

<OrganizationChart :value="data">

<template #default="slotProps">

<span>{{ slotProps.node.data.label }}</span>

</template>

</OrganizationChart>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

data: {

key: "0",

data: { label: "F.C. Barcelona" },

children: [

{

key: "0_0",

data: { label: "Barcelona" },

children: [

{

key: "0_0_0",

data: { label: "Chelsea" },

},

{

key: "0_0_1",

data: { label: "Barcelona" },

},

],

},

{

key: "0_1",

data: { label: "Real Madrid" },

children: [

{

key: "0_1_0",

data: { label: "Bayern Munich" },

},

{

key: "0_1_1",

data: { label: "Real Madrid" },

},

],

},

],

},

};

},

methods: {},

};

</script>

Here, we register the OrganizationChart component within main.js and include it in the App.vue component. The value prop is linked to the data object, which includes properties for key, data, and children. The key serves as a unique identifier, while the data object contains the label that we display.

Introducing the Paginator Component

To enhance our Vue 3 application further, we can integrate a Paginator component, enabling page navigation. The code snippet below adds the paginator functionality.

import { createApp } from "vue";

import App from "./App.vue";

import PrimeVue from "primevue/config";

import Paginator from 'primevue/paginator';

import 'primevue/resources/primevue.min.css';

import 'primevue/resources/themes/saga-blue/theme.css';

import 'primeicons/primeicons.css';

import 'primeflex/primeflex.css';

const app = createApp(App);

app.use(PrimeVue);

app.component("Paginator", Paginator);

app.mount("#app");

In App.vue, we can utilize the Paginator as shown below:

<template>

<div>

<Paginator :rows="10" :totalRecords="200"></Paginator>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {};

},

methods: {},

};

</script>

We register the Paginator component and add it to the App. The rows attribute specifies how many entries will appear per page, while totalRecords indicates the total number of records available.

To set the initial page to a specific value, we can modify the component like this:

<template>

<div>

<Paginator :rows="10" :totalRecords="200" :first="20"></Paginator>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {};

},

methods: {},

};

</script>

Alternatively, we can manage the initial page using a data property:

<template>

<div>

<Paginator

:rows="10" :totalRecords="200"

v-model:first="offset"

></Paginator>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

offset: 20,

};

},

methods: {},

};

</script>

Now the application will start on page 3. Additionally, we can implement a dropdown for selecting rows per page with the rowsPerPageOptions property:

<template>

<div>

<Paginator

:rows="10" :totalRecords="200"

v-model:first="offset" :rowsPerPageOptions="[10, 20, 30]"

>

</Paginator>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

offset: 20,

};

},

methods: {},

};

</script>