bp-smart-forms

A modern, feature-rich Angular data grid component built on PrimeNG, with server-side-friendly sorting, filtering, pagination, and dynamic cell renderers.

Installation

npm install bp-smart-forms primeng @primeuix/themes

Peer Dependencies:

• @angular/core, @angular/common, and @angular/forms (^21.2.0+)
• primeng (^21.1.9+)

Setup

1. Configure PrimeNG Theme

In your app.config.ts, import and configure PrimeNG with a theme:

import { providePrimeNG } from 'primeng/config';
import { Aura } from '@primeuix/themes';

export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: Aura,
        options: {
          darkModeSelector: '.dark',
        }
      }
    })
  ]
};

2. Import PrimeIcons CSS

Add to your global styles.scss:

@import '@primeuix/icons/index.css';

Note: Tailwind CSS is not required by this library — it's only used in this repository's demo app.

Usage

Import the SmartGridModernizedComponent and use it as a standalone component:

import { SmartGridModernizedComponent, DynamicColDef } from 'bp-smart-forms';

@Component({
  selector: 'app-my-grid',
  standalone: true,
  imports: [SmartGridModernizedComponent],
  template: `
    <bp-smart-grid-modernized
      [(data)]="gridData"
      [(columns)]="gridColumns"
      [(loading)]="isLoading"
      [storageName]="'my-grid-state'"
      (onRowClick)="onRowSelected($event)"
    />
  `
})
export class MyGridComponent {
  gridData: any[] = [];
  isLoading = false;

  gridColumns: DynamicColDef[] = [
    { field: 'name', header: 'Name', sortable: true, filterable: true },
    { field: 'email', header: 'Email', sortable: true, filterable: true },
    { field: 'createdAt', header: 'Created', type: 'date', sortable: true }
  ];

  onRowSelected(row: any): void {
    console.log('Row clicked:', row);
  }
}

Component API

SmartGridModernizedComponent

Inputs

| Input | Type | Description | |-------|------|-------------| | data | T[] | Array of data items to display in the grid. | | columns | DynamicColDef[] | Required. Column definitions. See DynamicColDef interface below. | | loading | boolean | Show loading spinner when true. | | height | string | Grid height (default: '1000px'). | | title | string | Optional grid title. | | storageName | string | Required. Key for persisting grid state (sorting, filters, pagination) to localStorage. | | tableState | CustomTableState | Current table state (sorts, filters, pagination). | | totalRecords | number | Total record count for pagination. | | placeholder | string | Search input placeholder (default: 'Saisir...'). | | customComponents | { [key: string]: Type<ICellRendererAngularComp> } | Map of custom cell renderer components. | | itemRendererComponent | Type<ICellRendererAngularComp> | Default component for rendering custom cells. | | itemRendererComponentParams | any | Params to pass to the custom cell renderer. | | itemPropertyName | string | Property name to pass to the item renderer. | | lineItemComponent | Type<ICellRendererAngularComp> | Custom component for rendering row items. | | styleClass | string | Additional CSS class for styling the grid. |

Outputs

| Output | Type | Description | |--------|------|-------------| | onRowClick | EventEmitter<T \| T[] \| undefined> | Emitted when a row is clicked. |

Exported Types

DynamicColDef

Configuration for a single column:

interface DynamicColDef {
  field: string;                           // Data field name
  header: string;                          // Column header text
  sortable?: boolean;                      // Enable sorting
  sortField?: string;                      // Override field used for sorting
  filterable?: boolean;                    // Enable filtering
  type?: 'text' | 'date' | 'number' | 'boolean' | 'select' | 'custom' | 'array';
  filterMatchMode?: string | string[] | { [key: string]: string };
  specialFilter?: boolean;                 // Custom filter logic
  valueFormatter?: (data: any) => string; // Format cell value for display
  cellRenderer?: Type<ICellRendererAngularComp> | string; // Custom cell component
  cellRendererParams?: any;                // Params for cell renderer
  width?: string;                          // Column width (e.g., '150px', '20%')
  options?: any[];                         // Select filter options
  fetchOptions?: () => Observable<any[]>; // Async option loader
  optionLabel?: string;                    // Select option label field
  optionValue?: string;                    // Select option value field
}

Other Exported Types

• SmartGridModernizedComponent<T> — Main grid component
• CustomSortComponent — Sort indicator component
• ICellRendererAngularComp — Interface for custom cell renderers
• SortOrder — Type for sort direction (-1 | 0 | 1)
• SortCriterion — Sort definition (field + order)
• CustomTableState — Table state (pagination, sorting, filters)
• INITIAL_STATE — Default table state constant
• DATE_FILTER_MATCH_MODES — Predefined date filter options

License

MIT