13.0.1 • Published 8 months ago

wutu-data-table v13.0.1

Weekly downloads
-
License
MIT*
Repository
-
Last release
8 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

8 months ago

13.0.1

8 months ago

12.3.0

9 months ago

12.3.1

8 months ago

12.2.0

9 months ago

12.0.3

10 months ago

12.0.4

10 months ago

12.0.5

10 months ago

12.0.0

10 months ago

12.0.1

10 months ago

12.0.2

10 months ago

11.6.0

10 months ago

11.6.1

10 months ago

11.6.2

10 months ago

11.6.3

10 months ago

11.5.1

10 months ago

11.5.2

10 months ago

11.5.0

10 months ago

11.4.10

10 months ago

11.4.11

10 months ago

11.4.12

10 months ago

11.4.13

10 months ago

11.4.14

10 months ago

11.4.8

10 months ago

11.4.9

10 months ago

11.4.3

10 months ago

11.4.6

10 months ago

11.4.7

10 months ago

11.4.4

10 months ago

11.4.5

10 months ago

12.1.0

9 months ago

12.1.1

9 months ago

10.0.5

12 months ago

10.0.0

12 months ago

10.0.1

12 months ago

6.3.0

1 year ago

10.0.2

12 months ago

10.0.3

12 months ago

10.0.4

12 months ago

6.3.1

1 year ago

8.0.5

1 year ago

8.2.2

12 months ago

8.0.4

1 year ago

8.0.6

1 year ago

8.1.0

1 year ago

8.1.1

12 months ago

11.4.2

11 months ago

11.4.0

11 months ago

11.4.1

11 months ago

9.1.1

12 months ago

9.1.0

12 months ago

11.2.0

12 months ago

11.0.0

12 months ago

11.0.1

12 months ago

9.1.2

12 months 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

12 months ago

8.0.3

1 year ago

8.2.0

12 months ago

8.0.2

1 year ago

11.3.1

11 months ago

9.0.1

12 months ago

9.0.0

12 months ago

11.1.1

12 months ago

11.3.0

11 months ago

11.1.0

12 months 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

1 year ago

2.1.0

1 year ago

2.0.0

1 year ago

1.4.0

1 year ago

1.3.0

1 year ago

1.2.0

1 year ago

1.2.1

1 year 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