wutu-data-table v13.0.1
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
Template
<wutu-data-table
[fetchItemsFn]="fetchItemsFn"
[getActionsForRowFn]="getActionsForRowFn"
(onRowClicked)="onRowClicked($event)"
>
<ng-template columnKey="name" columnCaption="Full name" defaultSort="DESC" let-value="value" [fixedWidthInREM]="6">
{{value}}
</ng-template>
<ng-template columnKey="age" columnCaption="Age" let-value="value" [fixedWidthOnContents]="true">
{{value}} years old
</ng-template>
<ng-template columnKey="address" columnCaption="Address" let-value="value">
{{value.street}} at number {{value.number}}
</ng-template>
<ng-template columnKey="occupation" columnCaption="Occupation" let-value="value">
{{value}}
</ng-template>
</wutu-data-table>
Controller
fetchItemsFn = async (
start: number,
searchQuery: string,
itemsPerPage: number,
sortField: string,
sortOrder: 'ASC' | 'DESC',
): Promise<{ totalAmount: number; data: Array<Category> }> => {
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);
}
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago