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.