DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Contact List Vue Template

Our Contact List View template allows you to incorporate the necessary UI elements for Vue-powered CRM/contact management applications.

UI Components

  • DevExtreme Vue DataGrid – displays contact information (with edit/search support).

  • DevExtreme Vue Toolbar – organizes action controls into a single responsive UI block.

  • DevExtreme Vue Buttons, Menus, Drop-Down Lists – allows users to execute specific actions against contact records.

Usage Scenarios

  • CRUD operations

    • Add a new contact

    • Edit an existing contact (inline editing)

    • Delete contacts

  • View/edit/search/engage contacts

    • Full-text search by individual property (name, phone, email, company, etc.) using the DataGrid’s built-in search box.

    • Filter contact records against any field value using the DataGrid’s built-in header filter.

    • Sort contacts against one or more columns.

    • Apply predefined filters using a custom dropdown in the toolbar.

    • View important details via a side detail view (contact info, recent activity, etc.)

    • Customize column visibility/position/width

    • Export contact list to Excel or PDF

  • Process new leads (unqualified contacts)

    • Assign a manager to selected contacts (self or another individual)

    • Plan the first activity for a contact (call/email/meeting/task)

  • Initiate or plan an activity (call/email/meeting/task)