A List page; These are the basic pages where you can perform operations such as pagination, sorting, filtering and exporting. You can easily create a server-side data table with a VaList component and a VaDataTableServer component to use list options.
/olobase-demo-ui/src/resources/Employees/List.vue
<template>
<va-list
disable-create
enable-save-dialog
:filters="filters"
:fields="fields"
:items-per-page="10"
>
<va-data-table-server
row-show
row-save-dialog
row-save-dialog-width="1024"
row-save-dialog-height="600"
disable-clone
disable-show
>
</va-data-table-server>
</va-list>
</template>Note that you are free to put whatever you want for each CRUD page and you do not have to use the optimized components provided. Since all data provider methods are available in a dedicated storage module for each source, it's not that complicated to create your own list components that will fetch your data. You can of course use the existing global $axios instance if you need to fetch any custom data coming out of the data provider logic. See usage in the store section.
The List component allows displaying the settings, filters and parent options of the data table.
<va-list
:filters="filters"
:fields="fields"
disable-settings
hide-header
>
<va-data-table-server></data-va-data-table-server>
</va-list>Options
| Property | Type | Description | Default |
|---|---|---|---|
| class | String |
It allows you to assign a css class to the component. | mb-0 |
| title | String |
It determines the list title. If this value is empty, the title of the current resource is translated with the titles.resource object. | null |
| filters | array |
The data is sent to your provider within the filter parameters. Valid attributes are: source, type, label, attributes.
|
[] |
| fields | Array |
A list of columns required to render resource data. Each column can be a simple string or a complete object with advanced field properties. `source`, `type`, `label`, `sortable`, `align`, `link`, `attributes`, `editable`, `width`. | [] |
| hideTitle | Boolean |
Makes the list title invisible. | false |
| hideHeader | boolean |
The title hides the header; so actions such as filters and settings are hidden. | false |
| hideBulkDelete | boolean |
Makes the multi-delete button that appears when a record is selected from the selection list invisible. | false |
| hideBulkCopy | boolean |
Makes the multi-copy button that appears when a record is selected from the selection list invisible. | false |
| disableSettings | Boolean |
Makes the settings button invisible. | false |
| disableCreate | Boolean |
Makes the standard save button invisible. | false |
| rowCreate | Boolean |
If you are using an editable table, it enables you to activate the Add Row button near by settings button. | false |
| disableCreateRedirect | Boolean |
Disables redirection after creation action. | false |
| disableQueryString | boolean |
Pagination, sorting, filtering, etc. Disables the sending of the URL query string in an action like. | false |
| defaultQueryString | object |
Your resource call url address, for example; By default, it adds a query string such as /api/example/findAllByPaging?a=1 to the end of your backend address, such as /api/example/findAllByPaging. Example value: { id: 4fd4eeac-8ab2-48b9-99e5-fbfd14334ff3 } | {} |
| disableActions | boolean |
Makes the section of all actions invisible. | false |
| disableGlobalSearch | boolean |
Disables global search. | false |
| disableItemsPerPage | boolean |
Disables the perPage parameter sent to the backend. | false |
| globalSearchQuery | string |
Determines the key name of the general search query. Changing the default value may require changes to some front and backside functions. | q |
| disablePositioning | boolean |
Hides the positioning row in the settings panel. | false |
| disableVisibility | boolean |
Hides the visibility row in the settings panel. | false |
| enableSaveDialog | boolean |
Shows/hides the create button for the save feature in the dialog in the right corner. | false |
| itemsPerPage | array |
List of available item selections per page. | 10 |
Slots
| Name | Description |
|---|---|
| actions | Allows new buttons to be added next to the buttons displayed in the list. |
| content | Allows you to add a data table within the list template. |