DataGridVueGrid

Description

Main entrypoint component to render a data grid.

props

data

data: {
  type: PropType<any[]>;
  required: false;
  default: undefined;
};

Array of objects to display in the data grid when using the built-in ClientSideDataService. This prop is required unless serverSideOptions or customDataService is supplied. The order of precedence is customDataService, serverSideOptions, and then data. The data grid will not react and rerender when this property changes. If that functionality is needed it is recommended to leverage v-if to force a new component instance to render.

Default Value

undefined

Type declaration

Member	Type
`type`	`PropType`<`any`[]>
`required`	`false`
`default`	`undefined`

serverSideOptions

serverSideOptions: {
  type: PropType<ServerSideDataServiceOptions>;
  required: false;
  default: undefined;
};

Description

Options to configure the built-in server-side data service including the POST url and optional callbacks to alter the data format of the request and response allowing. This allows the built-in data service to handle the data contract of any server. ServerSideDataService is used unless customDataService is also specified.

See

dotnet IQueryable helpersopen in new window

Default Value

undefined

Type declaration

Member	Type
`type`	`PropType`<`ServerSideDataServiceOptions`>
`required`	`false`
`default`	`undefined`

customDataService

customDataService: {
  type: PropType<DataService>;
  required: false;
  default: undefined;
};

Description

Custom implementation of DataService to supply the grid's data. When this is specified data and serverSideOptions are ignored.

Default Value

undefined

Type declaration

Member	Type
`type`	`PropType`<`DataService`>
`required`	`false`
`default`	`undefined`

columns

columns: {
  type: PropType<Column[]>;
  required: true;
};

Description

Column definitions to configure data grid columns including header title, column width, custom data getter, and column specific filtering and sorting options. It is recommended to supply an array of objects with v-model:columns since that is required for column reordering and allowing users to show/hide specific columns to rerender the columns. Column objects will not be mutated but a new array will be emitted with the update:columns event and that needs to trigger this property to get an updated value. The grid will react to any change to this prop which can be leveraged to implement custom functionality to do things like allowing users to add/remove columns.

Type declaration

Member	Type
`type`	`PropType`<`Column`[]>
`required`	`true`

allowColumnReorder

allowColumnReorder: {
  type: BooleanConstructor;
  required: false;
  default: boolean;
};

Description

Whether to allow columns to be reordered using drag-and-drop powered by drag-drop-vueopen in new window. In order for columns to rerender after dropping columns should be passed using v-model:columns.

Default Value

false

Type declaration

Member	Type
`type`	`BooleanConstructor`
`required`	`false`
`default`	`boolean`

paged

paged: {
  type: BooleanConstructor;
  required: false;
  default: boolean;
};

Description

Whether the data grid should be paged. When this is false PageDataRequest.pageNum and PageDataRequest.pageSize will be -1.

Default Value

true

Type declaration

Member	Type
`type`	`BooleanConstructor`
`required`	`false`
`default`	`boolean`

initialPageSize

initialPageSize: {
  type: NumberConstructor;
  required: false;
  default: number;
};

Description

The page size to use when the grid initially loads.

Default Value

Type declaration

Member	Type
`type`	`NumberConstructor`
`required`	`false`
`default`	`number`

pageSizes

pageSizes: {
  type: PropType<number[]>;
  required: false;
  default: number[];
};

Description

The page sizes to allow the user to select between. The page size select will only be displayed if this array contains more then one value.

Default Value

[15, 25, 50]

Type declaration

Member	Type
`type`	`PropType`<`number`[]>
`required`	`false`
`default`	`number`[]

sortOptions

sortOptions: {
  type: PropType<SortOptions>;
  required: false;
  default: undefined;
};

Description

Grid-level SortOptions including whether to allow sorting and if more then one column can be sorted at a time. The grid must be set as sortable for any column level sort options to take effect.

Default Value

undefined

Type declaration

Member	Type
`type`	`PropType`<`SortOptions`>
`required`	`false`
`default`	`undefined`

showColumnSelection

showColumnSelection: {
  type: BooleanConstructor;
  required: false;
  default: boolean;
};

Description

Whether to display the Add/Remove Columns menu in the options header. Column selection can be set externally using the Column.hidden property. For this functionality to work correctly columns should be passed using v-model:columns.

Default Value

false

Type declaration

Member	Type
`type`	`BooleanConstructor`
`required`	`false`
`default`	`boolean`

storageKey

storageKey: {
  type: StringConstructor;
  required: false;
  default: string;
};

Description

A key to use to save grid state in localStorageopen in new window or sessionStorageopen in new window. sessionStorage is used unless localStorageType is specified. The data that is saved as part of the grid state is defined in GridState. This is ignored if serverSideStorageOptions or customStorageService is specified.

See

Default Value

''

Type declaration

Member	Type
`type`	`StringConstructor`
`required`	`false`
`default`	`string`

localStorageType

localStorageType: {
  type: NumberConstructor;
  required: false;
  default: LocalStorageType;
};

Description

Whether grid state is stored in localStorageopen in new window or sessionStorageopen in new window. To save grid state storageKey must be specified.The data that is saved as part of the grid state is defined in GridState. This is ignored if serverSideStorageOptions or customStorageService is specified.

See

Default Value

LocalStorageType.sessionStorage

Type declaration

Member	Type
`type`	`NumberConstructor`
`required`	`false`
`default`	`LocalStorageType`

serverSideStorageOptions

serverSideStorageOptions: {
  type: PropType<ServerSideStorageServiceOptions<any, any>>;
  required: false;
  default: undefined;
};

Description

Options to specify to use ServerSideStorageService to retrieve and store GridState storageKey and localStorageType are ignored if this is specified. This is ignored if customStorageService is specified.

See

ServerSideStorageServiceOptions

Default Value

undefined

Type declaration

Member	Type
`type`	`PropType`<`ServerSideStorageServiceOptions`<`any`, `any`>>
`required`	`false`
`default`	`undefined`

customStorageService

customStorageService: {
  type: PropType<StorageService>;
  required: false;
  default: undefined;
};

Description

Custom implementation of StorageService to optionally retrieve/store GridState. When this is specified storageKey, localStorageType, and serverSideStorageOptions are ignored.

Default Value

undefined

Type declaration

Member	Type
`type`	`PropType`<`StorageService`>
`required`	`false`
`default`	`undefined`

emits

update:columns()

update:columns(columns): boolean

Parameters

Parameter	Type	Description
`columns`	`Column`[]	A clone of the new column state.

Returns

boolean

Description

Event emitted when Column state is updated. This includes the column's hidden state and column order. Column objects will not be mutated but a new array will be emitted with this event and that needs to trigger the columns prop to update. Leveraging v-model:columns is recommended.

slots

filter-${column.field.fieldName}

fieldName}: {
  column: Column;
  initialFilterCondition: FilterCondition;
  onFilterUpdated: (condition) => any;
};

Description

Slot to override the filter for the specified column. For example, the slot name filter-id would override the filter for the column with a field with the name id.

Type declaration

Member	Type	Description
`column`	`Column`	The current Column.
`initialFilterCondition`	`FilterCondition`	The current FilterCondition applied to the column.
`onFilterUpdated`	`(condition) => any`	Function to call when the filter condition has been updated to trigger the grid state to update. The function has a FilterCondition parameter to pass the new condition.

cell-${column.field.fieldName}

fieldName}: {
  dataItem: any;
};

Description

Slot to override the cell for the specified column. For example, the slot name cell-id would override the cell for the column with a field with the name id. Any data modifications or formatting done as part of the cell template will not be taken into account for filtering and sorting. If the desired behavior is to also sort and filter based on the formatted value use Field.valueGetter instead.

Type declaration

Member	Type	Description
`dataItem`	`any`	The entire data item for the current row.

options-header

options-header: {
  toggleFilterOptionsShown: () => any;
  toggleColumnSelectionShown: (event) => any;
  clearFilters: () => any;
  filter: Filter | undefined;
  filterOptionsShown: boolean;
  filterSummary: string;
  clearSort: () => any;
  sort: Sort[];
};

Description

Slot to override what is rendered in the options header above the data grid.

Type declaration

Member	Type	Description
`toggleFilterOptionsShown`	`() => any`	Function to call to toggle whether to display the filter row below the data grid's header.
`toggleColumnSelectionShown`	`(event) => any`	Function to call to toggle whether to display the column selection menu. The function has a single Event parameter which is the click or key event that triggered the toggle.
`clearFilters`	`() => any`	Function to call to clear all current filter state.
`filter`	`Filter` \| `undefined`	The current filter state
`filterOptionsShown`	`boolean`	Whether or not the filter row is currently displayed.
`filterSummary`	`string`	A string summary of the current filters applied to the data grid.
`clearSort`	`() => any`	Function to call to clear all current sort state.
`sort`	`Sort`[]	The current sort state

options-header-filter-options-shown: {
  toggleFilterOptionsShown: () => any;
  filterOptionsShown: boolean;
};

Description

Slot to override just the toggle column filters area of the options header above the grid.

Type declaration

Member	Type	Description
`toggleFilterOptionsShown`	`() => any`	Function to call to toggle whether to display the filter row below the data grid's header.
`filterOptionsShown`	`boolean`	Whether or not the filter row is currently displayed.

options-header-clear-filters

options-header-clear-filters: {
  clearFilters: () => any;
  filter: Filter | undefined;
  filterSummary: string;
  clearSort: () => any;
  sort: Sort[];
};

Description

Slot to override just the clear filters area of the options header above the grid.

Type declaration

Member	Type	Description
`clearFilters`	`() => any`	Function to call to clear all current filter state.
`filter`	`Filter` \| `undefined`	The current filter state
`filterSummary`	`string`	A string summary of the current filters applied to the data grid.
`clearSort`	`() => any`	Function to call to clear all current sort state.
`sort`	`Sort`[]	The current sort state

options-header-column-selection-shown

options-header-column-selection-shown: {
  toggleColumnSelectionShown: (event) => any;
};

Description

Slot to override just the add/remove columns area of the options header above the grid.

Type declaration

Member	Type	Description
`toggleColumnSelectionShown`	`(event) => any`	Function to call to toggle whether to display the column selection menu. The function has a single Event parameter which is the click or key event that triggered the toggle.

column-selection-popup: {
  columns: Column[];
  onHiddenUpdated: (column, hidden) => any;
};

Description

Slot to override what is rendered in the add/remove columns menu.

Type declaration

Member	Type	Description
`columns`	`Column`[]	All current column state.
`onHiddenUpdated`	`(column, hidden) => any`	Function to call when the hidden state of a column should be changed. The function has a Column parameter and a boolean hidden parameter.

footer: {
  paged: boolean;
  currentPage: number;
  pageSize: number;
  totalItems: number;
  onCurrentPageChangedAsync: (page) => Promise<any>;
  onPageSizeChangedAsync: (pageSize) => Promise<any>;
};

Description

Slot to override the entire footer of the data grid.

Type declaration

Member	Type	Description
`paged`	`boolean`	Whether the grid is paged.
`currentPage`	`number`	The current page number starting with `1` for the first page.
`pageSize`	`number`	The current page size.
`totalItems`	`number`	The total number of items in the grid after all filter conditions have been applied.
`onCurrentPageChangedAsync`	`(page) => Promise<any>`	Function to call when the current page changes. Promise resolves when the new page data is loaded.
`onPageSizeChangedAsync`	`(pageSize) => Promise<any>`	Function to call when the page size has changed. Promise resolves when the new page data is loaded.

footer-page-size-select: {
  pageSize: number;
  pageSizes: number[];
  onPageSizeChangedAsync: (pageSize) => Promise<any>;
};

Description

Slot to override the page size select in the footer of the data grid.

Type declaration

Member	Type	Description
`pageSize`	`number`	The current page size.
`pageSizes`	`number`[]	The page sizes to allow the user to select between.
`onPageSizeChangedAsync`	`(pageSize) => Promise<any>`	Function to call when the page size has changed. Promise resolves when the new page data is loaded.

footer-additional-content

footer-additional-content: {};

Description

Slot to add custom content to the footer of the data grid. The content is rendered after the page size select.

footer-total-items: {
  totalItems: number;
};

Description

Slot to override the total items in the footer of the data grid.

Type declaration

Member	Type	Description
`totalItems`	`number`	The total number of items in the grid after all filter conditions have been applied.

loader

loader: {};

Description

Slot to override the loader that is displayed when the data grid is loading page data.