Wutu Data Tables

This library aims to simplify creating data tables for Angular applications.

Most important features

- Customizable column widths
- Fixed based on contents
- Fixed based on rem units
- Percentage based by providing ratios
- Automatically generated interface to drag and drop the order how the columns are displayed
- Hover tooltips when data is truncated because the width of a column is smaller than its contents
- Action menu's for each row
- Automatically generated pagination
- Make a selection of one or more rows
- Sort (ascending and descending) for each column

Example

$3

``html
[fetchItemsFn]="fetchItemsFn"
[getActionsForRowFn]="getActionsForRowFn"
(onRowClicked)="onRowClicked($event)"
>

{{value}}


{{value}} years old


{{value.street}} at number {{value.number}}


{{value}}


`

$3

`ts
fetchItemsFn = async (
start: number,
searchQuery: string,
itemsPerPage: number,
sortField: string,
sortOrder: 'ASC' | 'DESC',
): Promise<{ totalAmount: number; data: Array }> => {
const filters = {
start: start,
max: itemsPerPage,
searchQuery: searchQuery,
sort: sortField,
order: sortOrder,
}
const result = await this.someApiCall(filters);
return {
totalAmount: result.count,
data: result.entries,
};
};

getActionsForRowFn = (): Array<{
caption: string,
action: () => void,
}> => {
return [{
caption: 'Export',
action: () => {
console.log('chosen Export');
}
}, {
caption: 'Delete',
action: () => {
console.log('chosen Delete');
}
}];
};

onRowClicked(row) {
console.log('row was clicked', row);
}
``