@rxap/data-grid
Version:
Provides a data grid component for Angular applications. It supports plain and form modes, custom header and cell templates, and integration with Rxap Forms and Data Sources. The component allows for displaying and editing data in a tabular format with fe
464 lines (237 loc) • 11.7 kB
Markdown
[@rxap/data-grid](../wiki/globals) / DataGridComponent
# Class: DataGridComponent\<T\>
Defined in: [data-grid.component.ts:108](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L108)
## Type Parameters
• **T** *extends* `Record`\<`string`, `any`\>
## Implements
- `OnInit`
- `OnDestroy`
- `AfterContentInit`
## Constructors
### new DataGridComponent()
> **new DataGridComponent**\<`T`\>(`cdr`, `router`, `formDirective`?): [`DataGridComponent`](../wiki/Class.DataGridComponent)\<`T`\>
Defined in: [data-grid.component.ts:152](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L152)
#### Parameters
##### cdr
`ChangeDetectorRef`
##### router
`Router`
##### formDirective?
`FormDirective`\<`any`\>
#### Returns
[`DataGridComponent`](../wiki/Class.DataGridComponent)\<`T`\>
## Properties
### data?
> `optional` **data**: `T`
Defined in: [data-grid.component.ts:124](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L124)
***
### data$
> **data$**: `Observable`\<`T`\>
Defined in: [data-grid.component.ts:118](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L118)
***
### dataLoading$
> **dataLoading$**: `Observable`\<`boolean`\>
Defined in: [data-grid.component.ts:142](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L142)
***
### dataSource?
> `optional` **dataSource**: `DataSource`\<`T`, `DataSourceViewer`\>
Defined in: [data-grid.component.ts:116](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L116)
***
### displayProperties
> **displayProperties**: `null` \| `string`[] = `null`
Defined in: [data-grid.component.ts:127](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L127)
***
### editModeChange
> **editModeChange**: `EventEmitter`\<\{ `data`: `T`; `done`: () => `void`; `mode`: `boolean`; \}\>
Defined in: [data-grid.component.ts:135](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L135)
***
### hasError$
> **hasError$**: `Observable`\<`boolean`\>
Defined in: [data-grid.component.ts:141](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L141)
***
### header
> **header**: `boolean` = `false`
Defined in: [data-grid.component.ts:113](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L113)
***
### hideEmptyProperties
> **hideEmptyProperties**: `boolean` = `false`
Defined in: [data-grid.component.ts:130](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L130)
***
### isDevMode
> **isDevMode**: `boolean`
Defined in: [data-grid.component.ts:110](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L110)
***
### isEditMode$
> `readonly` **isEditMode$**: `Observable`\<`boolean`\>
Defined in: [data-grid.component.ts:144](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L144)
***
### isFormMode$
> `readonly` **isFormMode$**: `Observable`\<`boolean`\>
Defined in: [data-grid.component.ts:146](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L146)
***
### isPlainMode$
> `readonly` **isPlainMode$**: `Observable`\<`boolean`\>
Defined in: [data-grid.component.ts:147](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L147)
***
### loading$
> **loading$**: `ToggleSubject`
Defined in: [data-grid.component.ts:143](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L143)
***
### mode$
> `readonly` **mode$**: `Observable`\<[`DataGridMode`](../wiki/Enumeration.DataGridMode)\>
Defined in: [data-grid.component.ts:145](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L145)
***
### rows
> **rows**: `QueryList`\<[`DataGridRowDefDirective`](../wiki/Class.DataGridRowDefDirective)\<`T`\>\>
Defined in: [data-grid.component.ts:133](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L133)
***
### rows$
> **rows$**: `Observable`\<`QueryList`\<[`DataGridRowDefDirective`](../wiki/Class.DataGridRowDefDirective)\<`T`\>\>\> = `EMPTY`
Defined in: [data-grid.component.ts:140](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L140)
***
### viewer
> **viewer**: `DataSourceViewer`
Defined in: [data-grid.component.ts:121](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L121)
## Accessors
### editMode
#### Set Signature
> **set** **editMode**(`value`): `void`
Defined in: [data-grid.component.ts:189](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L189)
##### Parameters
###### value
`boolean`
##### Returns
`void`
***
### hasAnyEditCells
#### Get Signature
> **get** **hasAnyEditCells**(): `boolean`
Defined in: [data-grid.component.ts:181](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L181)
##### Returns
`boolean`
***
### isEditMode
#### Get Signature
> **get** **isEditMode**(): `boolean`
Defined in: [data-grid.component.ts:185](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L185)
##### Returns
`boolean`
***
### isFormMode
#### Get Signature
> **get** **isFormMode**(): `boolean`
Defined in: [data-grid.component.ts:177](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L177)
##### Returns
`boolean`
***
### isFormModeOrHasAnyEditCells
#### Get Signature
> **get** **isFormModeOrHasAnyEditCells**(): `boolean`
Defined in: [data-grid.component.ts:173](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L173)
##### Returns
`boolean`
***
### loading
#### Get Signature
> **get** **loading**(): `boolean`
Defined in: [data-grid.component.ts:196](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L196)
##### Deprecated
use the loading$ property instead
##### Returns
`boolean`
***
### mode
#### Set Signature
> **set** **mode**(`value`): `void`
Defined in: [data-grid.component.ts:165](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L165)
##### Parameters
###### value
`string`
##### Returns
`void`
## Methods
### cancel()
> **cancel**(): `void`
Defined in: [data-grid.component.ts:374](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L374)
#### Returns
`void`
***
### disableEditMode()
> **disableEditMode**(): `void`
Defined in: [data-grid.component.ts:294](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L294)
#### Returns
`void`
***
### enableEditMode()
> **enableEditMode**(`skipPatchValue`): `void`
Defined in: [data-grid.component.ts:272](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L272)
#### Parameters
##### skipPatchValue
`boolean` = `false`
#### Returns
`void`
***
### logCurrentFormState()
> **logCurrentFormState**(): `void`
Defined in: [data-grid.component.ts:207](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L207)
#### Returns
`void`
***
### ngAfterContentInit()
> **ngAfterContentInit**(): `void`
Defined in: [data-grid.component.ts:200](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L200)
A callback method that is invoked immediately after
Angular has completed initialization of all of the directive's
content.
It is invoked only once when the directive is instantiated.
#### Returns
`void`
#### Implementation of
`AfterContentInit.ngAfterContentInit`
***
### ngOnDestroy()
> **ngOnDestroy**(): `void`
Defined in: [data-grid.component.ts:267](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L267)
A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.
#### Returns
`void`
#### Implementation of
`OnDestroy.ngOnDestroy`
***
### ngOnInit()
> **ngOnInit**(): `void`
Defined in: [data-grid.component.ts:211](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L211)
A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.
#### Returns
`void`
#### Implementation of
`OnInit.ngOnInit`
***
### refresh()
> **refresh**(): `void`
Defined in: [data-grid.component.ts:366](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L366)
#### Returns
`void`
***
### reset()
> **reset**(): `void`
Defined in: [data-grid.component.ts:357](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L357)
#### Returns
`void`
***
### retry()
> **retry**(): `void`
Defined in: [data-grid.component.ts:379](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L379)
#### Returns
`void`
***
### submit()
> **submit**(): `void`
Defined in: [data-grid.component.ts:310](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/data-grid/src/lib/data-grid.component.ts#L310)
#### Returns
`void`