## Default CRUD
By default you can create an AutoQueryGrid that allows authorized users the ability to Create, Read, Update & Delete records
with just the DataModel, e.g:
```html
```
This will utilize your App's existing [AutoQuery APIs](/autoquery/rdbms) for the specified DataModel to enable its CRUD functionality.
## Read Only
You can use `apis` to limit which AutoQuery APIs AutoQueryGrid should use, so if only the AutoQuery DTO is provided, the AutoQueryGrid will only be browsable in **read-only** mode:
```html
```
Table Styles
The same [DataGrid Table Styles](/vue/datagrid#table-styles) can also be used to style AutoQueryGrid, e.g:
```html
```
Different AutoQueryGrid features can be hidden with `hide` and functionality disabled with `deny`, e.g:
```html
```
Features that can be hidden and disabled include:
```ts
defineProps<{
deny: "filtering" | "queryString" | "queryFilters"
hide: "toolbar" | "preferences" | "pagingNav" | "pagingInfo" | "downloadCsv" | "refresh"
| "copyApiUrl" | "filtersView" | "newItem" | "resetPreferences"
}>()
```
Global AutoQueryGrid Configuration
These features can also be disabled at a global level, applying to all `` components with [setConfig](/vue/use-config), e.g:
```js
const { setAutoQueryGridDefaults } = useConfig()
setAutoQueryGridDefaults({
hide: ['pagingNav','copyApiUrl','downloadCsv']
})
```
Limit Columns
By default AutoQueryGrid displays all public properties returned in its AutoQuery API which can be further limited with `selected-columns`:
```html
```
Simple Responsive Columns
Using `visible-from` is a simple way to enable a responsive DataGrid by specifying at which [Tailwind breakpoints](https://tailwindcss.com/docs/responsive-design)
columns should be visible from and `header-titles` to use friendlier aliases for different columns, e.g:
```html
```
Custom Responsive Columns
Which columns are displayed and how they're formatted are further customizable with `` slots:
```html
{{name}}
Room No
Start Date
End Date
Employee
```
Custom Functionality
The column template slots can be leveraged to implement custom functionality, e.g. instead of navigating to separate pages to manage related data
we can use a custom column to manage Booking Coupons from within the same grid, e.g:
```html
```
Data Reference Labels
[AutoQuery](/autoquery/rdbms) is able to infer relationships from the [POCO References](/ormlite/reference-support) of your Data Models where if your DataModel includes `[Reference]` attributes so that its related Data is returned in your AutoQuery APIs, AutoQueryGrid will be able to make use of it to render the Contacts & Job Names and Icons instead of just the plain Foreign Key Ids.
An example of this in the [JobApplications](https://blazor-gallery.servicestack.net/locode/QueryJobApplications) DataModel DTO:
```csharp
[Icon(Svg = Icons.Application)]
public class JobApplication : AuditBase
{
[AutoIncrement]
public int Id { get; set; }
[References(typeof(Job))]
public int JobId { get; set; }
[References(typeof(Contact))]
public int ContactId { get; set; }
[Reference]
[Format(FormatMethods.Hidden)]
public Job Position { get; set; }
[Reference]
[Format(FormatMethods.Hidden)]
public Contact Applicant { get; set; }
[Reference]
public List Comments { get; set; }
public DateTime AppliedDate { get; set; }
public JobApplicationStatus ApplicationStatus { get; set; }
//...
}
```
Which AutoQueryGrid uses to automatically display the Job and Contact name instead of their ids:
```html
```
With the original ids are discoverable by hovering over the Job & Contact labels.
## Reference Fields
By default AutoQuery will infer using the first string column of the related table for its label, this information can also be explicitly defined
with the `[Ref]` attribute, e.g:
```csharp
public class JobApplication : AuditBase
{
[AutoIncrement]
public int Id { get; set; }
[References(typeof(Job))]
[Ref(Model=nameof(Job), RefId=nameof(Job.Id), RefLabel=nameof(Job.Title))]
public int JobId { get; set; }
[References(typeof(Contact))]
[Ref(Model=nameof(Contact), RefId=nameof(Contact.Id), RefLabel=nameof(Contact.DisplayName))]
public int ContactId { get; set; }
//...
}
```
Alternatively you can use `[Ref(None=true)]` to disable any implicit inferences and render the FK property Ids as-is.
When displaying referential data you can tell AutoQueryGrid to hide rendering the complex data references as well columns
using `[Format(FormatMethods.Hidden)]`.
## AutoQueryGrid Template Slots
AutoQueryGrid supports a number of [Vue slots](https://vuejs.org/guide/components/slots.html) to customize its built-in UIs,
including `formheader` and `formfooter` slots to insert custom content before and after the Auto Create & Edit components forms:
```html
```
This feature is used to implement [Locode's Audit History UI](/locode/auditing) for displaying the Audit History of each record in the bottom of the
Edit Form for Authorized Users, implemented with:
```html
```
Which loads the [AuditEvents.mjs](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/src/ServiceStack/modules/locode/components/AuditEvents.mjs)
component at the bottom of **Edit** forms, allowing Admin Users to inspect the Audit History of each record:
[](/locode/auditing)
Alternatively you can replace the entire Create and Edit Forms used with the `createform` and `editforms` slots:
```html
```
Additional toolbar buttons can be added with the `toolbarbuttons` slot, e.g:
```html
```
Alternatively you can replace the entire toolbar with your own with:
```html
```
All other template slots are passed down to the embedded [DataGrid](/vue/datagrid) component where they can be used to customize column headers and cells.
## AutoQueryGrid Properties
Additional customizations available using AutoQueryGrid properties include:
```ts
defineProps<{
filterDefinitions?: AutoQueryConvention[]
id?: string
apis?: string|string[]
type?: string|InstanceType|Function
prefs?: ApiPrefs
deny?: string|GridAllowOptions|GridAllowOptions[]
hide?: string|GridShowOptions|GridShowOptions[]
selectedColumns?:string[]|string
toolbarButtonClass?: string
tableStyle?: TableStyleOptions
gridClass?: string
grid2Class?: string
grid3Class?: string
grid4Class?: string
tableClass?: string
theadClass?: string
tbodyClass?: string
theadRowClass?: string
theadCellClass?: string
headerTitle?:(name:string) => string
headerTitles?: {[name:string]:string}
visibleFrom?: {[name:string]:Breakpoint}
rowClass?:(model:any,i:number) => string
rowStyle?:(model:any,i:number) => StyleValue | undefined
apiPrefs?: ApiPrefs
canFilter?:(column:string) => boolean
disableKeyBindings?:(column:string) => boolean
configureField?: (field:InputProp) => void
skip?: number
create?: boolean
edit?: string|number
}>()
type ApiPrefs = {
take?: number
selectedColumns?: string[]
}
type FormStyle = "slideOver" | "card"
type TableStyle = "simple" | "fullWidth" | "stripedRows" | "whiteBackground" | "uppercaseHeadings"
| "verticalLines"
type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
type GridAllowOptions =
"filtering" | "queryString" | "queryFilters"
type GridShowOptions =
"toolbar" | "preferences" | "pagingNav" | "pagingInfo" | "downloadCsv" |
"refresh" | "copyApiUrl" | "resetPreferences" | "filtersView" | "newItem"
```
## AutoQueryGrid Events
Whilst the `headerSelected` and `rowSelected` events can be used to invoke custom functionality when column headers and rows are selected:
```ts
defineEmits<{
(e: "headerSelected", name:string, ev:Event): void
(e: "rowSelected", item:any, ev:Event): void
}>()
```
## Powers Locode
AutoQueryGrid is already used extensively and is the key component that enables [Locode's](/locode/) Instant Auto UI to manage your App's
AutoQuery CRUD APIs.
[](/locode/)