Simple Table for Angular

Simple Table is a lightweight Angular data grid. Free and MIT licensed, with optional paid support from the people who build it. Use Angular components for cells, headers, and footers.

Live demos · Docs · Why it is MIT again

Framework Support

Simple Table is available for the most popular frameworks:

| Framework | Package | Version | | -------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | Vanilla JS | simple-table-core | | | React | @simple-table/react | | | Vue 3 | @simple-table/vue | | | Svelte | @simple-table/svelte | | | Solid | @simple-table/solid | | | Angular | @simple-table/angular | |

Quick Start

npm install @simple-table/angular

Peer dependencies: @angular/core >=17.0.0 <22.0.0, @angular/common >=17.0.0 <22.0.0

Follow our Quick Start Guide for step-by-step instructions and live examples.

Building with Angular

• Import SimpleTableImports on the page. That brings in <simple-table> plus stCell, stEmpty, stHeader, and the other template directives.
• Keep columns in TypeScript. Put custom cells, empty UI, and headers in the page template (stCell="status", stEmpty).
• Bind events the Angular way: (sortChange), (rowSelectionChange), (cellEdit). The older [onSortChange] inputs still work; if you bind both, both run.
• class on <simple-table> styles the Angular host. [className] styles the inner grid (.simple-table-root). They are not merged.
• provideSimpleTable() is optional. Angular already provides what the table needs.
• Access the imperative TableAPI via (tableReady) or @ViewChild.
• You can still pass Angular component classes as cellRenderer on a column. A matching stCell on the page wins.

<simple-table
  [rows]="employees"
  [columns]="columns"
  [getRowId]="getRowId"
  (sortChange)="onSort($event)"
>
  <ng-template stCell="status" let-row let-value="value">
    <span class="badge">{{ value }}</span>
  </ng-template>

  <ng-template stEmpty>
    No people yet.
    <button type="button" (click)="add()">Add</button>
  </ng-template>
</simple-table>

@Component({
  standalone: true,
  imports: [SimpleTableImports],
  templateUrl: "./people.component.html",
})
export class PeopleComponent { /* rows, columns, handlers */ }

Features

Column Features

• Column Sorting - Sort data by any column in ascending or descending order
• Column Filtering - Filter data with built-in text, number, and date filters
• Column Resizing - Drag column borders to resize on the fly
• Column Pinning - Pin important columns to the left or right
• Column Reordering - Drag and drop columns to rearrange
• Column Visibility - Show or hide columns dynamically
• Column Alignment - Align content left, center, or right
• Column Selection - Select entire columns for bulk operations
• Nested Headers - Create multi-level header hierarchies
• Collapsible Columns - Expand and collapse column groups

Row Features

• Row Selection - Select single or multiple rows with checkboxes
• Row Grouping - Group and organize rows by any column
• Nested Tables - Hierarchical data with independent columns per nesting level
• Aggregate Functions - Calculate Sum, Average, Count, and more
• Pivot Tables - Matrix pivots with row/column dimensions, aggregations, and totals
• Row Height - Customize row height for optimal display

Cell Features

• Cell Editing - Edit cells inline with custom editors
• Cell Highlighting - Highlight cells based on conditions
• Cell Renderer - Custom cell rendering for any data type
• Value Formatter - Format cell values for display without changing the underlying data
• Chart Columns - Inline bar and line/area charts in cells
• Cell Clicking - Handle cell click events with ease

Advanced Features

• Quick Filter - Global search across all columns with simple or smart modes
• Pagination - Server-side and client-side pagination support
• Infinite Scroll - Fetch and display data as you scroll, with row and column virtualization
• Live Updates - Real-time data updates and websocket integration
• CSV Export - One-click CSV download of grid data
• Animations - Smooth FLIP animations for sort, reorder, and visibility changes
• Header Renderer - Custom header rendering for advanced layouts
• Footer Renderer - Custom footer rendering for summaries and controls
• Programmatic Control - Control sorting, filtering, selection, and more via the TableAPI

Customization

• Themes - Apply built-in themes or create your own
• Custom Icons - Replace default icons with your own

Examples

See Simple Table in action across different industries:

CRM Leads

Infrastructure

HR Dashboard

Manufacturing

Resources

• Website: simple-table.com
• Documentation: Complete Documentation

Pricing

The library is free under the MIT license. Anyone can use it. Pay only if you want support.

FREE

$0

The full library, MIT licensed. Use it in any product.

PRO

$850/month

Support and bug fixes. The license stays MIT. You are paying for help, not for permission to use the library.

ENTERPRISE

Contact us

Custom help, depending on what you need.

View Detailed Pricing

Community & Support

Join our growing community to ask questions or share feedback:

• Discord: Join us on Discord
• GitHub: Report bugs or suggest features

License

MIT License

Simple Table is MIT licensed. Anyone can use, modify, and distribute it. See LICENSE.

Paid plans are for support, not a separate software license. Support terms are in EULA.txt.

View Detailed Pricing & Licensing