@data-cafe/datagrid

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