Skip to content

Commit 550cdb3

Browse files
CodyToleneCodyTolene
authored
v20.4.0 - Release
1 parent 451a8b8 commit 550cdb3

File tree

9 files changed

+210
-112
lines changed

9 files changed

+210
-112
lines changed

‎README.md‎

Lines changed: 88 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<h1 align="center">
66
<a href="https://www.ProAngular.com" target="_blank">Pro Angular</a>: Table Component
77
</h1>
8+
<a href="https://github.com/ProAngular/pro-table" target="_blank">
9+
View Github Repository
10+
</a>
811
<p align="center">
912
An abstraction of Angular Material’s table that speeds up development time and gives you quick access to features such as type safe columns, row selection, copy on click, expandable rows, intent based sorting, and more!
1013
</p>
@@ -225,29 +228,83 @@ the template when expanded.
225228

226229
### API <a name="api"></a>
227230

228-
Input Bindings
229-
230-
| Input | Type | Default Value | Required | Description |
231-
| ---------------------- | --------------- | ---------------------- | -------- | ------------------------------------------------------ |
232-
| `columns` | `TableColumn[]` | N/A | True | Table column definitions mapped to keys in the `data`. |
233-
| `data` | `any[]` | N/A | True | Table data array to display. |
234-
| `highlightOddRows` | `boolean` | `false` | False | Highlight odd rows. |
235-
| `maxSelectableRows` | `number` | No limit | False | Maximum number of selectable rows. |
236-
| `placeholderEmptyData` | `string` | `N/A` | False | Placeholder text when no data is available for a cell. |
237-
| `placeholderEmptyList` | `string` | `No items to display.` | False | Placeholder text when data array is empty. |
238-
| `placeholderLoading` | `string` | `Loading...` | False | Placeholder text when data is loading. |
239-
| `rowClickEnabled` | `boolean` | `false` | False | Enable row click event. |
240-
| `selectable` | `boolean` | `false` | False | Enable row selection. |
241-
| `stickyHeader` | `boolean` | `false` | False | Enable sticky table header. |
242-
| `trackByFn` | `function` | Default `trackBy` (id) | False | Custom trackBy function for rows. |
243-
244-
Event Handling
245-
246-
| Event | Description |
247-
| ----------------- | ----------------------------------------------------------- |
248-
| `rowClick` | Emits if a row is clicked when `rowClickEnabled` is true. |
249-
| `rowSelectChange` | Emits if a row selection changes when `selectable` is true. |
250-
| `sortChange` | Emits when sort changes. |
231+
#### Input Bindings (required):
232+
233+
| Input | Type | Default Value | Description |
234+
| --------- | ------------------------------- | ------------- | ------------------------------------------------------ |
235+
| `columns` | `ReadonlyArray<TableColumn<T>>` | N/A | Table column definitions mapped to keys in the `data`. |
236+
| `data` | `readonly T[]` | N/A | Table data array to display. |
237+
238+
#### Input Bindings (optional):
239+
240+
| Input | Type | Default Value | Description |
241+
| ---------------------- | ------------------------- | ---------------------- | ------------------------------------------------------ |
242+
| `highlightOddRows` | `boolean` | `false` | Highlight odd rows. |
243+
| `initialSort` | `TableSortChangeEvent<T>` | N/A | Initial sort configuration. |
244+
| `maxSelectableRows` | `number` | No limit | Maximum number of selectable rows. |
245+
| `placeholderEmptyData` | `string` | `N/A` | Placeholder text when no data is available for a cell. |
246+
| `placeholderEmptyList` | `string` | `No items to display.` | Placeholder text when data array is empty. |
247+
| `placeholderLoading` | `string` | `Loading...` | Placeholder text when data is loading. |
248+
| `rowClickEnabled` | `boolean` | `false` | Enable row click event. |
249+
| `selectable` | `boolean` | `false` | Enable row selection. |
250+
| `stickyHeader` | `boolean` | `false` | Enable sticky table header. |
251+
| `trackByFn` | `function` | Default `trackBy` (id) | Custom trackBy function for rows. |
252+
253+
#### Event Handling
254+
255+
| Event | Type | Description |
256+
| ----------------- | --------------------------------------- | ----------------------------------------------------------- |
257+
| `rowClick` | `EventEmitter<T>` | Emits if a row is clicked when `rowClickEnabled` is true. |
258+
| `rowSelectChange` | `EventEmitter<readonly T[]>` | Emits if a row selection changes when `selectable` is true. |
259+
| `sortChange` | `EventEmitter<TableSortChangeEvent<T>>` | Emits when sort changes. |
260+
261+
#### Table Types
262+
263+
```typescript
264+
// T = Your row data type (object)
265+
266+
interface TableColumn<T extends object> {
267+
/** Whether the column data is copyable on click */
268+
copyable?: boolean;
269+
/** Whether the column is sortable */
270+
isSortable?: boolean;
271+
/** The key of the column in the data source */
272+
key: NestedKeysOfString<T>;
273+
/** The label for the column */
274+
label: string;
275+
/** Minimum width of the column in pixels */
276+
minWidthPx?: number;
277+
/** The sort key for the column (if it differs from the `key`) */
278+
sortKey?: NestedKeysOfString<T> | string;
279+
}
280+
281+
type SortDirection = 'asc' | 'desc' | '';
282+
283+
interface TableSortChangeEvent<T> {
284+
/** The direction of the sort, or null if cleared */
285+
direction: SortDirection | null;
286+
/** The column key being sorted */
287+
key: NestedKeysOfString<T> | string | null;
288+
}
289+
290+
type TableTemplateReferenceObject<
291+
C = unknown, // Context type
292+
T = unknown, // Template type
293+
> = {
294+
/** The context object passed to the template */
295+
context: C;
296+
/** The template reference to render */
297+
templateRef: import('@angular/core').TemplateRef<T>;
298+
};
299+
300+
interface TableTemplateReferenceExpandableObject<
301+
C = unknown, // Context type
302+
T = unknown, // Template type
303+
> extends TableTemplateReferenceObject<C, T> {
304+
/** Whether the detail row is expanded */
305+
isExpanded: boolean;
306+
}
307+
```
251308

252309
<p align="right">[ <a href="#index">Index</a> ]</p>
253310

@@ -324,20 +381,21 @@ Thank you to the entire Angular team and community for such a great framework to
324381
build upon. If you have any questions, please let me know by opening an issue
325382
[here][url-new-issue].
326383

327-
| Type | Info |
328-
| :------------------------------------------------------------------------ | :------------------------------------------------------------- |
329-
| <img width="48" src=".github/images/ng-icons/email.svg" /> | webmaster@codytolene.com |
330-
| <img width="48" src=".github/images/simple-icons/github.svg" /> | https://github.com/sponsors/CodyTolene |
331-
| <img width="48" src=".github/images/simple-icons/buymeacoffee.svg" /> | https://www.buymeacoffee.com/codytolene |
332-
| <img width="48" src=".github/images/simple-icons/bitcoin-btc-logo.svg" /> | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |
384+
| Type | Info |
385+
| :----------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
386+
| <img width="48" src="https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/.github/images/ng-icons/email.svg" /> | webmaster@codytolene.com |
387+
| <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 |
388+
| <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 |
389+
| <img width="48" src="https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/.github/images/simple-icons/bitcoin-btc-logo.svg" /> | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |
333390

334391
Fin. Happy programming friend!
335392

336393
Cody Tolene
337394

338395
<!-- LINKS -->
339396

340-
[img-info]: .github/images/ng-icons/info.svg
397+
[img-info]:
398+
https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/.github/images/ng-icons/info.svg
341399
[url-demo]: https://www.ProAngular.com/demos/pro-table
342400
[url-example-table-code]: src/app/table-example/table-example.component.html
343401
[url-new-issue]: https://github.com/ProAngular/pro-table/issues

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@proangular/pro-table",
3-
"version": "20.3.3",
3+
"version": "20.4.0",
44
"description": "A rich, dynamic, and versatile table component based on Angular Material.",
55
"author": "Pro Angular <webmaster@proangular.com>",
66
"homepage": "https://www.proangular.com",

0 commit comments

Comments
 (0)