We get a default listing page with default columns, But default columns from database columns rarely fit the needs for any real application.
Here is how do we change the columns of the list and how to we change the content display of a columns.
What we did with above code:
- Added a new field to listing table that not exists on the struct
- Define the listing display for the listing table by using the
Td()and fetch the company data from a different table with associated column value
- Link the company name in the listing to link the edit drawer of company
- Limit the edit drawer field to only have
- Made the
CompanyIDfield a vuetify
- Add companies as a new navigation item, that you can manage companies data
.SearchColumns("name", "email")configure the top navigation search box searches which columns with sql like operation
Here we continue to add filters for the list
presets.ListingBuilder setup to have the filter menu or not.
And how it will combine the sql conditions when doing query. the filter menu will
change the url query strings with the filter values, and for date type in url query
string it uses unix epoch int value. So the sql condition has to convert the database
column data to unix epoch in order to compare with the value in url query string.
Current we support these types
ItemTypeDate: set it as a date filter item, which have many switches to support date and date range
ItemTypeNumber: set it to a number filter item, which have switches to support number and number range
ItemTypeString: set it to a string filter item, which have contains, and match exactly
ItemTypeSelect: set it to a select filter item, which have a options of values for selection
Filter tabs is based on Filters configuration. But display as tabs above the list, You can think it as a short cut that used very frequently to filter something instead of use the pop up panel of filter.
Query string name must be from the Filter's item configuration key field.
Bulk actions makes the list row show checkboxes, and you can select one or many rows, Later do an bulk update data for all of them.
Here is how to use it:
ComponentFuncof the bulk action configure the component that will show to user to input after user clicked the bulk action button
UpdateFuncconfigure the logic that the bulk action execute
SearchFunc defines a data processing function for
This function searches for a model based on the specified search parameters.
It returns the search results along with the total count of matching records.
You can process the data displayed on the listing page here based on context or custom conditions before pagination.
In the following example, the listing page only displays approved customers.