13.0.1 • Published 11 months ago

wutu-data-table v13.0.1

Weekly downloads
-
License
MIT*
Repository
-
Last release
11 months ago

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);
}
13.0.0

11 months ago

13.0.1

11 months ago

12.3.0

11 months ago

12.3.1

11 months ago

12.2.0

11 months ago

12.0.3

1 year ago

12.0.4

1 year ago

12.0.5

1 year ago

12.0.0

1 year ago

12.0.1

1 year ago

12.0.2

1 year ago

11.6.0

1 year ago

11.6.1

1 year ago

11.6.2

1 year ago

11.6.3

1 year ago

11.5.1

1 year ago

11.5.2

1 year ago

11.5.0

1 year ago

11.4.10

1 year ago

11.4.11

1 year ago

11.4.12

1 year ago

11.4.13

1 year ago

11.4.14

1 year ago

11.4.8

1 year ago

11.4.9

1 year ago

11.4.3

1 year ago

11.4.6

1 year ago

11.4.7

1 year ago

11.4.4

1 year ago

11.4.5

1 year ago

12.1.0

12 months ago

12.1.1

12 months ago

10.0.5

1 year ago

10.0.0

1 year ago

10.0.1

1 year ago

6.3.0

1 year ago

10.0.2

1 year ago

10.0.3

1 year ago

10.0.4

1 year ago

6.3.1

1 year ago

8.0.5

1 year ago

8.2.2

1 year ago

8.0.4

1 year ago

8.0.6

1 year ago

8.1.0

1 year ago

8.1.1

1 year ago

11.4.2

1 year ago

11.4.0

1 year ago

11.4.1

1 year ago

9.1.1

1 year ago

9.1.0

1 year ago

11.2.0

1 year ago

11.0.0

1 year ago

11.0.1

1 year ago

9.1.2

1 year ago

6.4.0

1 year ago

7.0.0

1 year ago

8.0.1

1 year ago

8.0.0

1 year ago

8.2.1

1 year ago

8.0.3

1 year ago

8.2.0

1 year ago

8.0.2

1 year ago

11.3.1

1 year ago

9.0.1

1 year ago

9.0.0

1 year ago

11.1.1

1 year ago

11.3.0

1 year ago

11.1.0

1 year ago

6.2.1

1 year ago

6.2.2

1 year ago

6.2.0

1 year ago

6.1.5

1 year ago

6.1.0

1 year ago

6.1.2

1 year ago

6.1.1

1 year ago

6.1.4

1 year ago

6.1.3

1 year ago

6.0.0

1 year ago

5.1.1

1 year ago

5.1.0

1 year ago

5.0.1

1 year ago

5.0.0

1 year ago

4.0.1

1 year ago

4.0.0

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

2.2.1

1 year ago

2.2.0

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago

1.2.1

2 years ago

1.1.0

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago