Categories
PrimeVue

Vue 3 Development with the PrimeVue Framework — Org Chart and Paginator

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Org Chart

PrimeVue comes with an org chart component to let us add one easily.

To add one, we write:

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");

App.vue

<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>

We register the OrganizationChart component in main.js .

Then we add the OrganizationChart component into our App.vue component.

value is set to data , which is an object with the key , data , and children properties.

key is a unique ID. data is an object with the label property, which we display by populating the default slot.

slotProps.node.data has the same data property of each object.

children has an array of child node objects.

Paginator

We can add the Paginator component into our Vue 3 app to let us add page navigation into our app.

To add it, we can write:

main.js

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");

App.vue

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

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

We register the Pagination component and add it into App .

We set the rows to set the number of entries per page.

And totalRecords have a total number of records.

Also, we can set the offset to set the initial page to a different page:

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

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Equivalently, we can write:

<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 initial page is page 3.

Also, we can add a rows per page dropdown with the rowsPerPageOptions prop:

<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>

Conclusion

We can add an org chart and a paginator component into our Vue 3 app with PrimeVue.

Categories
PrimeVue

Vue 3 Development with the PrimeVue Framework — Calendar and Order List

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Calendar

We can add a calendar into our Vue 3 app with PrimeVue’s FullCalendar component.

To use it, we install the required packages by running:

npm install @fullcalendar/core --save
npm install @fullcalendar/daygrid --save
npm install @fullcalendar/timegrid --save
npm install @fullcalendar/interaction --save

Then we can add the calendar into our Vue 3 app by writing:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import FullCalendar from 'primevue/fullcalendar';
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("FullCalendar", FullCalendar);
app.mount("#app");

App.vue

<template>
  <div>
    <FullCalendar :events="events" :options="options" />
  </div>
</template>

<script>
import '@fullcalendar/core'
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
  name: "App",
  data() {
    return {
      options: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialDate: "2020-12-01",
        headerToolbar: {
          left: "prev,next",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        },
        editable: true,
      },
      events: [
        {
          id: 1,
          title: "All Day Event",
          start: "2020-12-01",
        },
        {
          id: 2,
          title: "Long Event",
          start: "2020-12-07",
          end: "2020-12-10",
        },
      ],
    };
  },
  methods: {},
};
</script>

We have to install the @fullcalendar dependencies.

Then we import and register the FullCalendar component.

Then in App.vue , we add the required plugins by putting them into the options.plugins array.

Then events are populated by the events array, which has the id , title , start and end properties.

If end isn’t specified, then the event lasts a day.

We also specify how the top bar in the calendar is displayed with the headerToolbar property.

All the items listed are names for toolbar buttons.

We can set the initialDate property to set the initial date to display in the calendar.

Order List

We can add a list that can be reordered with the OrderList component.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import OrderList from 'primevue/orderlist';
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("OrderList", OrderList);
app.mount("#app");

App.vue

<template>
  <div>
    <OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
      <template #header> List of Cars </template>
      <template #item="slotProps">
        <div class="p-caritem">
          <div>
            <span class="p-caritem-vin">{{ slotProps.item.vin }}</span>
            <span>{{ slotProps.item.year }} - {{ slotProps.item.color }}</span>
          </div>
        </div>
      </template>
    </OrderList>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We register the OrderList component in main.js .

Then we add it into App.vue .

We populate the header slot with the header content.

And we populate the item slot with the content for a single item.

The slotProps.item property has the item data.

We should now get a list of items that we can select with buttons to reorder them.

v-model is bound to the cars array, which has the list items.

Conclusion

We can add calendars and reorderable lists into our Vue 3 app with PrimeVue.

Categories
PrimeVue

Vue 3 Development with the PrimeVue Framework — Data Views

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Data View

We can use PrimeVue’s DataView component to add data views into our app.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import DataView from 'primevue/dataview';
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
import Panel from 'primevue/panel';
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("DataView", DataView);
app.component("DataViewLayoutOptions", DataViewLayoutOptions);
app.component("Panel", Panel);
app.mount("#app");

App.vue

<template>
  <div>
    <DataView :value="cars" layout='grid'>
      <template #list="slotProps">
        <div class="p-col-12">
          <div class="car-details">
            <div>
              <div class="p-grid">
                <div class="p-col-12">
                  Vin: <b>{{ slotProps.data.vin }}</b>
                </div>
                <div class="p-col-12">
                  Year: <b>{{ slotProps.data.year }}</b>
                </div>
                <div class="p-col-12">
                  Brand: <b>{{ slotProps.data.brand }}</b>
                </div>
                <div class="p-col-12">
                  Color: <b>{{ slotProps.data.color }}</b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #grid="slotProps">
        <div style="padding: 0.5em" class="p-col-12 p-md-3">
          <Panel :header="slotProps.data.vin" style="text-align: center">
            <div class="car-detail">
              {{ slotProps.data.year }} - {{ slotProps.data.color }}
            </div>
          </Panel>
        </div>
      </template>
    </DataView>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We set the value prop to populate it with data.

The list slot is used to rendering items with layout prop is set to list .

And the grid slot is used for rendering items when the layout prop it set to grid .

We get the entry data with the slotProps.data property.

The header slot lets us populate the header content.

And the footer slot lets us populate the footer content:

<template>
  <div>
    <DataView :value="cars" layout="list">
      <template #header>Header </template>
      <template #footer>Footer </template>
      <template #list="slotProps">
        <div class="p-col-12">
          <div class="car-details">
            <div>
              <div class="p-grid">
                <div class="p-col-12">
                  Vin: <b>{{ slotProps.data.vin }}</b>
                </div>
                <div class="p-col-12">
                  Year: <b>{{ slotProps.data.year }}</b>
                </div>
                <div class="p-col-12">
                  Brand: <b>{{ slotProps.data.brand }}</b>
                </div>
                <div class="p-col-12">
                  Color: <b>{{ slotProps.data.color }}</b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #grid="slotProps">
        <div style="padding: 0.5em" class="p-col-12 p-md-3">
          <Panel :header="slotProps.data.vin" style="text-align: center">
            <div class="car-detail">
              {{ slotProps.data.year }} - {{ slotProps.data.color }}
            </div>
          </Panel>
        </div>
      </template>
    </DataView>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

Conclusion

We can add a data view into our Vue 3 app with PrimeVue’s DataView component.

Categories
PrimeVue

Vue 3 Development with the PrimeVue Framework — Scrolling Table, Expandable Rows, and Editable Table Cells

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Scrolling Table

We can make the table scrollable with the scrollable and scrollHeight props.

For example, we can write:

<template>
  <div>
    <DataTable
      :value="cars"
      scrollable
      scrollHeight="200px"
    >
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
const seed = [
  { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
  { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
  { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];
let cars = [...seed];
for (let i = 1; i <= 100; i++) {
  cars.push(...seed);
}

export default {
  name: "App",
  data() {
    return {
      cars,
    };
  },
  methods: {},
};
</script>

We can freeze one or more rows with the frozenValue prop:

<template>
  <div>
    <DataTable
      :value="cars"
      scrollable
      scrollHeight="200px"
      :frozenValue="frozenValue"
    >
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
const seed = [
  { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
  { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
  { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];
let cars = [...seed];
for (let i = 1; i <= 100; i++) {
  cars.push(...seed);
}

export default {
  name: "App",
  data() {
    return {
      cars,
      frozenValue: [seed[0]],
    };
  },
  methods: {},
};
</script>

Expandable Table Rows

We can add expandable table rows with the expander prop:

<template>
  <div>
    <DataTable
      :value="cars"
      v-model:selection="selectedCars"
      v-model:expandedRows="expandedRows"
      dataKey="vin"
      [@row](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Frow "Twitter profile for @row")-expand="onRowExpand"
      [@row](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Frow "Twitter profile for @row")-collapse="onRowCollapse"
    >
      <Column :expander="true" headerStyle="width: 3rem" />
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
      <template #expansion="slotProps">
        <div>
          <h5>{{ slotProps.data.vin }}</h5>
        </div>
      </template>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
      expandedRows: [],
    };
  },
  methods: {
    onRowExpand() {
      console.log("expanded");
    },
    onRowCollapse() {
      console.log("collapsed");
    },
  },
};
</script>

The expansion slot has the content for the expanded row.

slotProps.data has the table row data.

We can listen to the row-expand and row-collapse events to listen to event emitted when rows are expanded and collapsed.

The expandedRows reactive property has the expanded rows since we bound with v-model .

Editable Table Cells

We can make table cells editable by populating the editor slot:

<template>
  <div>
    <DataTable :value="cars" editMode="cell">
      <Column field="vin" header="Vin">
        <template #editor="slotProps">
          <InputText v-model="slotProps.data[slotProps.column.props.field]" />
        </template>
      </Column>
      <Column field="year" header="Year">
        <template #editor="slotProps">
          <InputText v-model="slotProps.data[slotProps.column.props.field]" />
        </template>
      </Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

The cell’s value is stored in the slotProps.data[slotProps.column.props.field] variable.

Conclusion

We can add scrolling, expandable rows, and editable table cells into our Vue 3 app with PrimeVue.

Categories
PrimeVue

Vue 3 Development with the PrimeVue Framework — Scrolling Table, Expandable Rows, and Editable Table Cells

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Scrolling Table

We can make the table scrollable with the scrollable and scrollHeight props.

For example, we can write:

<template>
  <div>
    <DataTable
      :value="cars"
      scrollable
      scrollHeight="200px"
    >
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
const seed = [
  { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
  { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
  { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];
let cars = [...seed];
for (let i = 1; i <= 100; i++) {
  cars.push(...seed);
}

export default {
  name: "App",
  data() {
    return {
      cars,
    };
  },
  methods: {},
};
</script>

We can freeze one or more rows with the frozenValue prop:

<template>
  <div>
    <DataTable
      :value="cars"
      scrollable
      scrollHeight="200px"
      :frozenValue="frozenValue"
    >
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
const seed = [
  { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
  { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
  { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];
let cars = [...seed];
for (let i = 1; i <= 100; i++) {
  cars.push(...seed);
}

export default {
  name: "App",
  data() {
    return {
      cars,
      frozenValue: [seed[0]],
    };
  },
  methods: {},
};
</script>

Expandable Table Rows

We can add expandable table rows with the expander prop:

<template>
  <div>
    <DataTable
      :value="cars"
      v-model:selection="selectedCars"
      v-model:expandedRows="expandedRows"
      dataKey="vin"
      [@row](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Frow "Twitter profile for @row")-expand="onRowExpand"
      [@row](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Frow "Twitter profile for @row")-collapse="onRowCollapse"
    >
      <Column :expander="true" headerStyle="width: 3rem" />
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
      <template #expansion="slotProps">
        <div>
          <h5>{{ slotProps.data.vin }}</h5>
        </div>
      </template>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
      expandedRows: [],
    };
  },
  methods: {
    onRowExpand() {
      console.log("expanded");
    },
    onRowCollapse() {
      console.log("collapsed");
    },
  },
};
</script>

The expansion slot has the content for the expanded row.

slotProps.data has the table row data.

We can listen to the row-expand and row-collapse events to listen to event emitted when rows are expanded and collapsed.

The expandedRows reactive property has the expanded rows since we bound with v-model .

Editable Table Cells

We can make table cells editable by populating the editor slot:

<template>
  <div>
    <DataTable :value="cars" editMode="cell">
      <Column field="vin" header="Vin">
        <template #editor="slotProps">
          <InputText v-model="slotProps.data[slotProps.column.props.field]" />
        </template>
      </Column>
      <Column field="year" header="Year">
        <template #editor="slotProps">
          <InputText v-model="slotProps.data[slotProps.column.props.field]" />
        </template>
      </Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

The cell’s value is stored in the slotProps.data[slotProps.column.props.field] variable.

Conclusion

We can add scrolling, expandable rows, and editable table cells into our Vue 3 app with PrimeVue.