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:

• Display simple items
• Edit in-cell
• Localize texts

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 missingNote: 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.