src="https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/public/images/pro-angular-logo.png"
/>

@proangular/pro-table

ProAngular
  |  

GitHub Repo
  |  

NPM Package
  |  

Demo Page

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!

ng add @proangular/pro-table

src="https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/.github/images/screenshots/screenshot.png"
/>

href="https://www.ProAngular.com/demos/pro-table"
target="_blank"
>Click here to preview it live!

Index

- 📄 Description
- 📦 Installation
- 📋 Prerequisites
- 📥 Install Pro Table Components
- 💻 Usage
- 📤 Importing
- 🔽 Expandable Rows
- 📚 API
- 🔄 Compatibility
- 🤝 Contributions
- ⚖️ Licensing
- 🏁 Wrapping Up

📄 Description

@proangular/pro-table is a type-safe, Angular abstraction over Angular
Material’s table. It’s designed for apps using **standalone components, signals,
and the new control-flow syntax** so you can wire up data grids quickly without
giving up control of your data model or rendering.

The component keeps Material’s performance, accessibility, and theming surface,
while adding strongly-typed columns, selection, copy-on-click, expandable detail
rows, and a clean sorting contract that emits intent instead of mutating
data.

$3

- Compile-time guarantees for columns & data
Columns are declared as TableColumn, where key is tied to your row
model T. That prevents typos and drift between your data and headers.

- Sorting as a pure UI signal
The table does not reorder your data. Instead it emits a
TableSortChangeEvent with a typed key and direction; you decide how to
sort (or not) in your host component. This keeps business logic out of the
view layer and plays well with signals/NgRx/etc.

- Expandable rows that are template-driven
Provide a TemplateRef per row and the table renders it in a dedicated detail
row using multiTemplateDataRows. Expansion is reference-based, so you can
attach any context object you like.

- Selection with guardrails
Built-in single/multi select with a master checkbox, an optional **max
selectable** limit, and an emitted list of selected rows without leaking table
internals to the host.

- Great DX for common table chores
One-line copy-to-clipboard per column (with tooltip and snack-bar
feedback), sticky headers, row click events, and cell placeholders for empty
values. These affordances reduce the “glue code” you normally write around
MatTable.

- Built for Angular 20-21+ patterns
Uses OnPush change detection, @if/@for/@let in templates, and small
reactive streams (BehaviorSubject/ReplaySubject + shareReplay) to keep
updates efficient. The example shows signals + effect() integrating
cleanly with the component’s inputs.

$3

- Strong typing for both column definitions and row data (TableColumn)
- Opt-in selection with max count and rowSelectChange events
- Click-to-copy per column with tooltip and snackbar feedback
- Sticky header option
- Expandable detail rows via TemplateRef + multiTemplateDataRows with
animations
- Sort intent via sortChange events no data mutation, you stay in control
- Works seamlessly with standalone components, signals, and Material’s
MatSort/MatTable

[ Index ]

📦 Installation

Using Node Package Manager ([NPM][url-node-js]) in a new terminal window run the
following commands to install the required dependencies.

$3

Angular Material

More information on theming Angular Material:
https://material.angular.io/guide/theming

``bash
ng add @angular/material
`

$3

`bash
ng add @proangular/pro-table@latest
`

or

`bash
npm install @proangular/pro-table --save
`

[ Index ]

💻 Usage

$3

Import the table component to use in your Angular application where used:

`diff
+ import { TableComponent } from '@proangular/pro-table';

// For modules
@NgModule({
...
imports: [
+ TableComponent,
...
],
})

// For standalone components
@Component({
...
imports: [
+ TableComponent,
...
],
})

// Markup usage
+
`

[ Index ]

$3

`html


{{ data | json }}

Map your data to include a template field typed as
TableTemplateReferenceExpandableObject if you want per-row detail. The table
uses multiTemplateDataRows and a detail row with expandedDetail to render
the template when expanded.

> ![Info][img-info] See example table code [here][url-example-table-code], or a
> live [demo][url-demo].

[ Index ]

$3

#### Input Bindings (required):

| Input | Type | Default Value | Description |
| --------- | ------------------------------- | ------------- | ------------------------------------------------------ |
| columns | ReadonlyArray> | N/A | Table column definitions mapped to keys in the data. |
| data | readonly T[] | N/A | Table data array to display. |

#### Input Bindings (optional):

| Input | Type | Default Value | Description |
| ---------------------- | ------------------------- | ---------------------- | ------------------------------------------------------ |
| highlightOddRows | boolean | false | Highlight odd rows. |
| initialSort | TableSortChangeEvent | N/A | Initial sort configuration. |
| maxSelectableRows | number | No limit | Maximum number of selectable rows. |
| placeholderEmptyData | string | N/A | Placeholder text when no data is available for a cell. |
| placeholderEmptyList | string | No items to display. | Placeholder text when data array is empty. |
| placeholderLoading | string | Loading... | Placeholder text when data is loading. |
| rowClickEnabled | boolean | false | Enable row click event. |
| selectable | boolean | false | Enable row selection. |
| stickyHeader | boolean | false | Enable sticky table header. |
| trackByFn | function | Default trackBy (id) | Custom trackBy function for rows. |

#### Event Handling

| Event | Type | Description |
| ----------------- | --------------------------------------- | ----------------------------------------------------------- |
| rowClick | EventEmitter | Emits if a row is clicked when rowClickEnabled is true. |
| rowSelectChange | EventEmitter | Emits if a row selection changes when selectable is true. |
| sortChange | EventEmitter> | Emits when sort changes. |

#### Table Types

`typescript
// T = Your row data type (object)

interface TableColumn {
/* Whether the column data is copyable on click /
copyable?: boolean;
/* Whether the column is sortable /
isSortable?: boolean;
/* The key of the column in the data source /
key: NestedKeysOfString;
/* The label for the column /
label: string;
/* Minimum width of the column in pixels /
minWidthPx?: number;
/* The sort key for the column (if it differs from the key) /
sortKey?: NestedKeysOfString | string;
}

type SortDirection = 'asc' | 'desc' | '';

interface TableSortChangeEvent {
/* The direction of the sort, or null if cleared /
direction: SortDirection | null;
/* The column key being sorted /
key: NestedKeysOfString | string | null;
}

type TableTemplateReferenceObject<
C = unknown, // Context type
T = unknown, // Template type
> = {
/* The context object passed to the template /
context: C;
/* The template reference to render /
templateRef: import('@angular/core').TemplateRef;
};

interface TableTemplateReferenceExpandableObject<
C = unknown, // Context type
T = unknown, // Template type
> extends TableTemplateReferenceObject {
/* Whether the detail row is expanded /
isExpanded: boolean;
}
`

[ Index ]

🔄 Compatibility

| Angular version | @proangular/pro-table | Install |
| --------------- | --------------------- | -------------------------------- |
| v21 | v21.x.x | ng add @proangular/pro-table@^21 |
| v20 | v20.x.x | ng add @proangular/pro-table@^20 |
| v19 | ------ | Untested |
| v18 | ------ | Untested |
| v17 | ------ | Untested |

[ Index ]

🤝 Contributions

Please submit all issues, and feature requests here:
[https://github.com/ProAngular/pro-table/issues][url-new-issue]

Contribution:

1. Clone the repo and create a new branch:

- git clone https://github.com/ProAngular/pro-table.git
- git checkout -b username/feature-or-bug-description

2. Bump up the version of package in package.json and package-lock.json,
commit all changes, push.

- git add -A
- git commit -m "My commit message"
- git push origin username/feature-or-bug-description

3. Submit code in published PR for review and approval. Add a good description
and link any possible user stories or bugs.

- Create a new pull request.

4. Allow CI actions to completely run and verify files.
5. Add/ping reviewers and await approval.

Thank you for any and all contributions!

[ Index ]

⚖️ Licensing

This project is licensed under the MIT License. See the
LICENSE file for the pertaining license text.

SPDX-License-Identifier: MIT`

[ Index ]

🏁 Wrapping Up

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

| Type | Info |
| :----------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
| | webmaster@codytolene.com |
| | https://github.com/sponsors/CodyTolene |
| | https://www.buymeacoffee.com/codytolene |
| | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |

Fin. Happy programming friend!

Cody Tolene

[img-info]:
https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/.github/images/ng-icons/info.svg
[url-demo]: https://www.ProAngular.com/demos/pro-table
[url-example-table-code]: src/app/table-example/table-example.component.html
[url-new-issue]: https://github.com/ProAngular/pro-table/issues
[url-node-js]: https://nodejs.org/