WinPrimetailDatatable

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

Installation

``bash
npm install @emertola/win-primetail-datatable primeng@19.0.8 primeicons@7.0.0 @primeng/themes@19.0.5 tailwindcss-primeui@0.5.1
npm install postcss@8.4.49 autoprefixer@10.4.20 tailwindcss@3.4.17 --save-dev
// add --legacy-peer-deps if peer dependency error occurs
`

Usage

`bash
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:
[dataSource]="mockData"
[columns]="columns"
[showAction]="true"
[hasViewAction]="true"
[hasEditAction]="true"
[hasDeleteAction]="true"
[isPaginated]="true"
[entityName]="'Test Application'">

})
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: 'jdoe@mailinator.com' }];
}
`

Import Styles

`bash
// 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:
`bash
"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:
`bash
export default {
darkMode: ['selector', '[class="app-dark"]'],
content: ['./src/*/.{html,ts,scss,css}', './index.html'],
plugins: [PrimeUI]
};
`

Update your app.config.ts:
`bash
// 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.