@@ -108,6 +108,8 @@ npm install @proangular/pro-table --save
108108
109109## Usage <a name =" usage " ></a >
110110
111+ ### Importing and Usage <a name =" importing-and-usage " ></a >
112+
111113Import the table component to use in your Angular application where used:
112114
113115``` diff
@@ -131,17 +133,38 @@ Import the table component to use in your Angular application where used:
131133 ],
132134})
133135
134- ...
135-
136- // Markup
137- + <pro-table>
138- + ... TODO
139- + </pro-table>
136+ // Markup usage
137+ + <pro-table [columns]="columns" [data]="data" />
140138```
141139
142140> ![ Info] [ img-info ] See example table code [ here] [ url-example-table-code ] , or a
143141> live demo [ here] [ url-demo ] .
144142
143+ ### API <a name =" api " ></a >
144+
145+ Input Bindings
146+
147+ | Input | Type | Default Value | Required | Description |
148+ | ---------------------- | --------------- | ---------------------- | -------- | ------------------------------------------------------ |
149+ | ` columns ` | ` TableColumn[] ` | N/A | | Table column definitions mapped to keys in the ` data ` . |
150+ | ` data ` | ` any[] ` | N/A | | Table data array to display. |
151+ | ` highlightOddRows ` | ` boolean ` | ` false ` | | Highlight odd rows. |
152+ | ` maxSelectableRows ` | ` number ` | No limit | | Maximum number of selectable rows. |
153+ | ` placeholderEmptyData ` | ` string ` | ` N/A ` | | Placeholder text when no data is available for a cell. |
154+ | ` placeholderEmptyList ` | ` string ` | ` No items to display. ` | | Placeholder text when data array is empty. |
155+ | ` placeholderLoading ` | ` string ` | ` Loading... ` | | Placeholder text when data is loading. |
156+ | ` rowClickEnabled ` | ` boolean ` | ` false ` | | Enable row click event. |
157+ | ` selectable ` | ` boolean ` | ` false ` | | Enable row selection. |
158+ | ` stickyHeader ` | ` boolean ` | ` false ` | | Enable sticky table header. |
159+
160+ Event Handling
161+
162+ | Event | Description |
163+ | ----------------- | ----------------------------------------------------------- |
164+ | ` rowClick ` | Emits if a row is clicked when ` rowClickEnabled ` is true. |
165+ | ` rowSelectChange ` | Emits if a row selection changes when ` selectable ` is true. |
166+ | ` sortChange ` | Emits when sort changes. |
167+
145168<p align =" right " >[ <a href =" #index " >Index</a > ]</p >
146169
147170<!-- -------------------------------------------------------------------------->
@@ -217,23 +240,21 @@ Thank you to the entire Angular team and community for such a great framework to
217240build upon. If you have any questions, please let me know by opening an issue
218241[ here] [ url-new-issue ] .
219242
220- | Type | Info |
221- | :----------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
222- | <img width =" 48 " src =" https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/ .github/images/ng-icons/email.svg" /> | webmaster@codytolene.com |
223- | <img width =" 48 " src =" https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/ .github/images/simple-icons/github.svg" /> | https://github.com/sponsors/CodyTolene |
224- | <img width =" 48 " src =" https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/ .github/images/simple-icons/buymeacoffee.svg" /> | https://www.buymeacoffee.com/codytolene |
225- | <img width =" 48 " src =" https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/ .github/images/simple-icons/bitcoin-btc-logo.svg" /> | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |
243+ | Type | Info |
244+ | :------------------------------------------------------------------------ | :------------------------------------------------------------- |
245+ | <img width =" 48 " src =" .github/images/ng-icons/email.svg " /> | webmaster@codytolene.com |
246+ | <img width =" 48 " src =" .github/images/simple-icons/github.svg " /> | https://github.com/sponsors/CodyTolene |
247+ | <img width =" 48 " src =" .github/images/simple-icons/buymeacoffee.svg " /> | https://www.buymeacoffee.com/codytolene |
248+ | <img width =" 48 " src =" .github/images/simple-icons/bitcoin-btc-logo.svg " /> | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |
226249
227250Fin. Happy programming friend!
228251
229252Cody Tolene
230253
231254<!-- LINKS -->
232255
233- [ img-info] :
234- https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/.github/images/ng-icons/info.svg
256+ [ img-info ] : .github/images/ng-icons/info.svg
235257[ url-demo ] : https://www.ProAngular.com/demos/pro-table
236- [ url-example-table-code] :
237- https://github.com/ProAngular/pro-table/blob/main/src/app/table-example/table-example.component.html
258+ [ url-example-table-code ] : src/app/table-example/table-example.component.html
238259[ url-new-issue ] : https://github.com/ProAngular/pro-table/issues
239260[ url-node-js ] : https://nodejs.org/
0 commit comments