Assessment Grid Library

A standalone Angular component for displaying and managing hierarchical assessment data in a grid format.

Features

• Hierarchical/nested grid with parent-child relationships
• Expandable rows with chevron indicators
• Row selection with custom checkboxes
• Action buttons (add, edit, copy, delete)
• Form for adding new items
• Responsive design
• Styling using SCSS variables for easy customization

Installation

npm install assessment-grid-lib

Usage

1. Import the component in your module or standalone component

import { AssessmentGridComponent, Assessment } from 'assessment-grid-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    AssessmentGridComponent
  ],
  // ...
})
export class AppComponent {
  // ...
}

2. Add the component to your template

<lib-assessment-grid 
  [assessmentData]="assessments"
  (assessmentAdded)="onAssessmentAdded($event)"
  (assessmentEdited)="onAssessmentEdited($event)"
  (assessmentDeleted)="onAssessmentDeleted($event)"
  (assessmentCopied)="onAssessmentCopied($event)"
  (selectionChanged)="onSelectionChanged($event)">
</lib-assessment-grid>

3. Define your assessment data

import { Assessment } from 'assessment-grid-lib';

@Component({
  // ...
})
export class AppComponent {
  assessments: Assessment[] = [
    {
      id: 1,
      name: 'Portfolio A',
      type: 'Portfolio',
      description: 'Main portfolio',
      date: '20-06-2025',
      selected: false,
      isExpanded: false
    },
    {
      id: 2,
      name: 'Sub Item 1',
      type: 'Application',
      description: 'Nested application',
      date: '20-06-2025',
      selected: false,
      isNested: true,
      parentId: 1
    },
    {
      id: 3,
      name: 'Standalone Item',
      type: 'Standalone',
      description: 'A standalone item',
      date: '20-06-2025',
      selected: false
    }
  ];

  onAssessmentAdded(assessment: Assessment) {
    console.log('Assessment added:', assessment);
  }

  onAssessmentEdited(assessment: Assessment) {
    console.log('Assessment edited:', assessment);
  }

  onAssessmentDeleted(assessment: Assessment) {
    console.log('Assessment deleted:', assessment);
  }

  onAssessmentCopied(assessment: Assessment) {
    console.log('Assessment copied:', assessment);
  }

  onSelectionChanged(selectedItems: Assessment[]) {
    console.log('Selection changed:', selectedItems);
  }
}

Assessment Model

export interface Assessment {
  id: number;
  name: string;
  type: 'Portfolio' | 'Application' | 'Standalone';
  description: string;
  date: string;
  selected?: boolean;
  isExpanded?: boolean;
  isNested?: boolean;
  parentId?: number;
  disabled?: boolean;
}

Customization

You can customize the appearance by overriding CSS variables:

:root {
  --assessment-primary-color: #003134;
  --assessment-accent-color: #007173;
  --assessment-selected-color: #A6F5D6;
  --assessment-checkbox-color: #00E676;
}

License

MIT