NgxSimpleDatatables

A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.

Features

• 📊 Virtual scrolling for smooth performance with large datasets
• ❄️ Freeze columns (left/right) for better data comparison
• 🔍 Sortable columns with custom sort functions
• 🎨 Customizable templates for headers and cells
• 📏 Resizable columns
• 🎨 Theming support with CSS custom properties
• ♿ Built with accessibility in mind

Installation

npm install ngx-simple-datatables --save

Basic Usage

1. Import the module in your app.module.ts:

import { NgxSimpleDatatablesModule } from "ngx-simple-datatables";

@NgModule({
  imports: [
    // ... other imports
    NgxSimpleDatatablesModule,
  ],
})
export class AppModule {}

2. Use the component in your template:

<ngx-simple-datatables
  [columns]="columns"
  [data]="data"
  [rowHeight]="26"
  [headerHeight]="26"
>
</ngx-simple-datatables>

3. Define your columns and data in your component:

import { Component } from "@angular/core";
import { ColumnConfig } from "ngx-simple-datatables";

interface UserData {
  id: number;
  name: string;
  email: string;
  status: string;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  columns: ColumnConfig[] = [
    { field: "id", header: "ID", width: "80px", freeze: "left" },
    { field: "name", header: "Name", width: "200px", sortable: true },
    { field: "email", header: "Email", width: "250px" },
    { field: "status", header: "Status", width: "120px" },
  ];

  data: UserData[] = [
    { id: 1, name: "John Doe", email: "[email protected]", status: "Active" },
    {
      id: 2,
      name: "Jane Smith",
      email: "[email protected]",
      status: "Inactive",
    },
    // ... more data
  ];
}

4. add styles in your styles.css:

:root {
  --ngx-simple-dt-bg: #efefef;
  --ngx-simple-dt-border: 1px solid #e0e0e0;
  --ngx-simple-dt-border-radius: 8px;
  --ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --ngx-simple-dt-transition: all 0.2s ease-in-out;

  --ngx-simple-dt-header-bg: #98ccff;
  --ngx-simple-dt-header-hover-bg: #e9ecef;
  --ngx-simple-dt-header-border: 1px solid #e0e0e0;
  --ngx-simple-dt-header-text: #495057;
  --ngx-simple-dt-header-height: 48px;
  --ngx-simple-dt-header-font-weight: 600;
  --ngx-simple-dt-header-padding: 0 16px;

  --ngx-simple-dt-cell-padding: 0 16px;
  --ngx-simple-dt-cell-border: 1px solid #e9ecef;
  --ngx-simple-dt-cell-hover-bg: #f1f3f5;
  --ngx-simple-dt-cell-active-bg: #e9ecef;
  --ngx-simple-dt-cell-font-size: 0.875rem;
  --ngx-simple-dt-cell-line-height: 1.5;
}

Advanced Features

Column Freezing

Freeze columns to the left or right for better data comparison:

columns: ColumnConfig[] = [
  { field: 'id', header: 'ID', width: '80px', freeze: 'left' },
  { field: 'name', header: 'Name', width: '200px' },
  { field: 'email', header: 'Email', width: '250px' },
  { field: 'actions', header: 'Actions', width: '150px', freeze: 'right' }
];

Custom Cell Templates

Use Angular templates to customize cell content:

<ngx-simple-datatables [columns]="columns" [data]="data">
  <ng-template #cellTemplate let-row="row" let-column="column">
    <ng-container [ngSwitch]="column.field">
      <ng-container *ngSwitchCase="'status'">
        <span
          [ngClass]="{
          'status-active': row[column.field] === 'Active',
          'status-inactive': row[column.field] !== 'Active'
        }"
        >
          {{ row[column.field] }}
        </span>
      </ng-container>
      <ng-container *ngSwitchDefault> {{ row[column.field] }} </ng-container>
    </ng-container>
  </ng-template>
</ngx-simple-datatables>

Custom Header Templates

Customize header appearance and behavior:

<ngx-simple-datatables [columns]="columns" [data]="data">
  <ng-template #headerTemplate let-column="column">
    <div class="custom-header">
      <i class="fas fa-info-circle" [title]="column.header"></i>
      <span>{{ column.header }}</span>
      <i class="fas fa-sort" *ngIf="column.sortable"></i>
    </div>
  </ng-template>
</ngx-simple-datatables>

Theming

Customize the table appearance using CSS custom properties:

/* styles.css */
:root {
  --ngx-simple-dt-bg: #efefef;
  --ngx-simple-dt-border: 1px solid #e0e0e0;
  --ngx-simple-dt-border-radius: 8px;
  --ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --ngx-simple-dt-transition: all 0.2s ease-in-out;

  --ngx-simple-dt-header-bg: #98ccff;
  --ngx-simple-dt-header-hover-bg: #e9ecef;
  --ngx-simple-dt-header-border: 1px solid #e0e0e0;
  --ngx-simple-dt-header-text: #495057;
  --ngx-simple-dt-header-height: 48px;
  --ngx-simple-dt-header-font-weight: 600;
  --ngx-simple-dt-header-padding: 0 16px;

  --ngx-simple-dt-cell-padding: 0 16px;
  --ngx-simple-dt-cell-border: 1px solid #e9ecef;
  --ngx-simple-dt-cell-hover-bg: #f1f3f5;
  --ngx-simple-dt-cell-active-bg: #e9ecef;
  --ngx-simple-dt-cell-font-size: 0.875rem;
  --ngx-simple-dt-cell-line-height: 1.5;

  --ngx-simple-dt-row-height: 48px;
  --ngx-simple-dt-row-hover-bg: #f8f9fa;
  --ngx-simple-dt-row-stripe-bg: #f8f9fa;
  --ngx-simple-dt-row-active-bg: #e9ecef;
  --ngx-simple-dt-cell-padding: 0 16px;
  --ngx-simple-dt-cell-border: 1px solid #e9ecef;
  --ngx-simple-dt-cell-font-size: 0.875rem;
  --ngx-simple-dt-cell-line-height: 1.5;

  --ngx-simple-dt-row-bg: #ffffff;
  --ngx-simple-dt-row-hover-bg: #f8f9fa;
  --ngx-simple-dt-row-stripe-bg: #f8f9fa;
  --ngx-simple-dt-row-active-bg: #e9ecef;
  --ngx-simple-dt-row-border: 1px solid #e9ecef;
}

API Reference

Inputs

| Input | Type | Description | | ---------------- | ---------------- | -------------------------------------------------------------- | | [columns] | ColumnConfig[] | Array of column configurations | | [data] | any[] | Array of data to display | | [rowHeight] | number | Height of each row in pixels | | [headerHeight] | number | Height of the header row in pixels | | [bufferSize] | number | Number of rows to render outside viewport for smooth scrolling |

Column Configuration

| Property | Type | Description | details | | ---------- | ---------------------------- | -------------------------------- | ------------ | | field | string | Property name in the data object | string | | header | string | Column header text | string | | width | string \| number | Column width (px or %) | | | freeze | 'left' \| 'right' | Freeze column position | | | sortable | boolean | Whether the column is sortable | true / false | | sortFn | (a: any, b: any) => number | Custom sort function | function |

Development

Run ng build ngx-simple-datatables to build the library. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-simple-datatables, go to the dist folder cd dist/ngx-simple-datatables and run npm publish.

After building your library with ng build ngx-simple-datatables, go to the dist folder cd dist/ngx-simple-datatables and run npm publish.

Running unit tests

Run ng test ngx-simple-datatables to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.