UNPKG

@orcden/od-smart-list

Version:

OrcDen List Component

bitbucket.org/OrcDen/od-smart-list

95 lines (75 loc) • 3.63 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
# <od-smart-list> > A component to quickly define lists with headers based on a given route `<od-smart-list>` is a simple component that allows the user to define list headers and a route. The list refreshes whenever the route or given data changes. Easy for tooling routes and integrating search and filtering. ## Installation - Install with [npm](https://www.npmjs.com/) ``` npm i @orcden/od-smart-list ``` ## Usage ``` import '@orcden/od-smart-list'; ``` ``` <od-smart-list id='smart-list' row-id='id' route='https://example.com/route'> <od-smart-list-header name='field1'>Test Head 1</od-smart-list-header> <od-smart-list-header name='field2'>Test Head 2</od-smart-list-header> </od-smart-list> ``` ## Attributes ### OD-Smart-List | Attribute | Type | Default | Description | |-----------|---------|---------|-----------------------------------------------------------------------------------------| | `route` | String | undefined | Set this to have the list automatically get data from a route | | `row-id` | String | undefined | Will set each row's id to the field value indicated here. | ### OD-Smart-List-Header | Attribute | Type | Default | Description | |-----------|---------|---------|-----------------------------------------------------------------------------------------| | `name` | String | undefined | set this value to tell which field of data to pull for each column | ## Properties ### OD-Smart-List | Attribute | Type | Default | Description | |-----------|---------|---------|-----------------------------------------------------------------------------------------| | `route` | String | undefined | Set this to have the list automatically get data from a route | | `rowId` | String | undefined | will set each row's id to the field value indicated here. | | `data` | Array | undefined | Can be used to get and set the data displayed in the list | ## Functions ### OD-Smart-List | Name | Parameters | Description | |-----------|------|-----------------------------------------------| | `refresh` | None | Manually refreshes the list. should not need to be called under most circumsatnces | | `addRowClickListener` | callback | Adds a click listener to each row. Callback parameters: event, row | | `orderBy` | string fieldName, int direction | orders the list based on the given header fieldname and direction ( 1 for ascending, -1 for descending ) | ## Styling - CSS variables are available to alter the default styling provided ### OD-Smart-List | Shadow Parts | Description | |------------------|-----------------------| | list-table | The main table used for the list | | header-row | The header row | | header-cell | The cells in the header | | data-row | The rows that hold data | | data-cell | The cells that hold data | | empty-label | The label that displays the empty message | | `fieldName` | maps the 'name' of each header to a column of cells | ## Development ### Run development server and show demo ``` npm run demo ``` ### Run linter ``` npm run lint ``` ### Fix linter errors ``` npm run fix ``` ### Run tests ``` npm run test ``` ### Build for production ``` npm run build ```