WinPrimetailDatatable

A powerful, reusable Angular 19 DataTable component built with PrimeNG and Tailwind CSS.

Installation

npm install @emertola/win-primetail-datatable [email protected] [email protected] @primeng/[email protected]  [email protected]
npm install [email protected] [email protected] [email protected] --save-dev
// add --legacy-peer-deps if peer dependency error occurs

Usage

import { WinPrimeTailDataTable } from '@emertola/win-primetail-datatable';

interface TableColumn {
  field: string;
  header: string;
  sortable?: boolean;
  filterable?: boolean;
  sortField?: string;
  width?: string;
  render?: (row: any) => string;
}

@Component({
  selector: 'app-example',
  imports: [WinPrimeTailDataTable],
  template: `
    <win-primetail-datatable
	  [dataSource]="mockData"
	  [columns]="columns"
	  [showAction]="true"
	  [hasViewAction]="true"
      [hasEditAction]="true"
      [hasDeleteAction]="true"
	  [isPaginated]="true"
	  [entityName]="'Test Application'"></win-primetail-datatable>
  `
})
export class ExampleComponent {
  columns: TableColumn[] = [
	{ header: 'Name', field: 'name' },
	{ header: 'Mobile', field: 'mobile' },
	{ header: 'Email', field: 'email' }
  ];

  mockData = [{ id: 1, name: 'John Doe', mobile: '+6390187892', email: '[email protected]' }];
}

Import Styles

// styles.scss
@use "primeicons/primeicons.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

If you are using VSCode and get a warning about Unknown at rule on the @tailwind, go to the settings.json file and add the following:

"css.validate": false,
"scss.validate": false,
"less.validate": false,
"files.associations": {
  "*.css": "tailwindcss",
  "*.scss": "tailwindcss"
}

Add tailwind.config.js file to your angular root project containing the following:

export default {
    darkMode: ['selector', '[class="app-dark"]'],
    content: ['./src/**/*.{html,ts,scss,css}', './index.html'],
    plugins: [PrimeUI]
};

Update your app.config.ts:

// add the following to your app.config.ts
provideAnimationsAsync(),
providePrimeNG({
  theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } },
})

// Example
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { providePrimeNG } from 'primeng/config';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } },
    }),
  ],
};

Test your app by running ng serve or your custom command script.