Datagrid
This datagrid is a simple, flexible, and extensible datagrid component, made for data·café applications.
However, it is designed to be used in any Angular + Clarity project.
If you are interested in using this component with another tech stack using WebComponent, please consider contribution or contact us.
Demo
Youtube video:
Features
Here some handy features:
Future features in our roadmap:
- pagination
- OpenAPI structure and data driven
Items
The datagrid consumes simple list of items, yet.
<dt-datagrid [items]="[ ... ]"></dt-datagrid>The structure of the grid (aka the columns) is defined by the properties of the first item.
Edit
The datagrid allows you to edit the items in-cell.
<dt-datagrid (edit)="onEdit($event)" editable></dt-datagrid>Note: the editable property could be used sandalone or with a boolean [editable]="true".
Available properties for edit event:
| Property | Type | Description |
|---|---|---|
| previous | your Item type |
An item with previous values |
| updated | your Item type |
An item with updated values |
| updatedProperties | string[] | List of updated properties |
Texts
You can customise the component texts for i18n purposes.
<dt-datagrid [texts]="{ ... }"></dt-datagrid>Available text properties:
| Property | Type | Required | Description |
|---|---|---|---|
| h1 | string |
no | Header title level 1 |
| h2 | string |
no | Header title level 2 |
| h3 | string |
no | Header title level 3 |
| top | string |
no | Top text paragraph |
| placeholder | string |
no | Grid placeholder if the grid is empty |
| fallbackLabel | string |
no | Cell fallback is a value is missing Note: could be overriden within Structure for each column. |
| counter | (number?) => string |
no | Function that produce the item count for grid footer |
| bottom | string |
no | Bottom text paragraph |
Development
This library was generated with Angular CLI version 13.1.0.
Please read the README of the project.