Skip to content
On this page

List

Powered by Material Web Data Table

All lists require a :service="" which will be used to populate the list using the service.read function. Also, the service is used for CRUD actions if you choose to use them.

Props

PropDescriptionRequired
serviceObject of the service to be used for the list, can be crud or simpleCrudyes
headersArray that define the columns of your list. Requires to be as { text: "Name",key: "name" }yes
actionsCustom actions to be rendered. Requires to be as {type: "string-unique", text: "string", callback: (row) => { ... }no
use-crud-actionsinject edit and delete actions to each row, and when one of the is clicked, it will perform service.edit or service.delete.no
actions-condensedUse the actions as context-menuno

Usage

Simple List

<List :service="service" :headers="headers" />

Custom actions

<List :service="service" :headers="headers" :actions="actions" />

These actions require a callback function that will be called once the actions were clicked and the row selected.

CRUD actions

<List :service="service" :headers="headers" use-crud-actions />