Overview
To help you understand every section, we have created a live demo for each DkGrid feature.
Last updated
To help you understand every section, we have created a live demo for each DkGrid feature.
Last updated
We have deployed all the DkGrid features as live examples. We describe every DkGrid part showing a code snippet from its corresponding live demo.
A live-demo link looks as follows:
Getting Started live example.
When navigating the live examples, you can change the Theme and Scheme at run time. The following themes are available in light
and dark
schemes:
Theme name | Palettes |
---|---|
Except for dikesoft-blue, we have taken all palettes from the Material Design Color System.
We have used Tailwind CSS to generate all the above themes and schemes. We also use the predefined classes offered by Tailwind CSS.
Visit the Tailwind CSS official docs for further details.
As you can change the Theme and the Scheme, you can also change some DkGrid properties when interacting with the live examples.
The following are all the properties you can change. These properties feed the corresponding DkGrid properties.
We bind the DkGrid properties corresponding to the DkGrid feature we are describing.
While navigating the live examples, you will see a red square with white gear.
Clicking on the white gear will show a floating panel with all the themes, schemes, and DkGrid properties.
You can click on the circular arrow icon to reset the values for each group of properties.
The DkGrid changes all the described properties through a service called DkGridConfig
. This service is responsible for delivering every property when changing one of them through the Floating Configuration Panel.
Remember that the DkGridConfig
service does not belong to the DkGridComponent
definition itself. It was created only for demo purposes.
As you can see in the DkGridConfig
definition, it has a public property called configChange
of type Observable<DkGridProperties>
. Therefore, If a live-demo feature should react to these properties changes, the corresponding DkGridComponent
instance must listen to the configChange
observable.
We have grouped all the properties in one type called DkGridProperties
, an Intersection type.
We have created these interfaces for demo purposes. Therefore, every property of these interfaces feeds the corresponding DkGridComponent
properties.
We generate sample data of 1000 rows or even more. The service SampleData
is responsible for this data generation.
We have generated only five rows for the Quick Start Tutorial by hand.
The main interface is Employee
. This interface contains all the fields that we display in the live examples.
For a better experience reading this set of docs, we have taken some conventions:
Any type, even primitives, are highlighted in the text in green color. For example, Date
, string
, numeric
, DkGridComponent
, Employee
.
HTML selectors are highlighted in the text in red color. For example, div
, section
, dk-grid
, dk-grid-column
.
Properties for the dk-grid
and dk-grid-column
selectors are highlighted in text in orange color. For example, allowSorting
, sortable
, allowRowGrouping
, draggable
, filterable
.
Injection Tokens are highlighted in blue color. For example, HEADER_ROW_HEIGHT
, LOADING_MESSAGE
.
Property | Description | Default value | Validators |
---|---|---|---|
Property | Description | Default value | Validators |
---|---|---|---|
Property | Description | Default value | Validators |
---|---|---|---|
Property | Description | Default value |
---|---|---|
Property | Description | Default value | Validators |
---|---|---|---|
Property | Description | Default value | Validators |
---|---|---|---|
Property | Description | Default value |
---|---|---|
Property | Description | Default value | Validators |
---|---|---|---|
Property | Description | Default value |
---|---|---|
Property | Description | Default value | Validators |
---|---|---|---|
Property | Description | Default value | Validators |
---|---|---|---|