Employee List
Overview
The EmployeeList
component displays a list of employees with optional grouping by teams. It provides a tabbed interface when multiple teams are present, making it easy to navigate between different team members.
Installation
The component is part of the Carpose application and requires no separate installation.
Usage
To use the EmployeeList component in a standard HTML page:
Configuration Attributes
The component reads configuration from data attributes on the provided element:
data-carpose-component
string
-
Identifies the component type, must be set to "employee-list"
data-api-key
string
-
API key for authentication with the Carpose backend services. Required for data fetching.
data-filter-team
string
null
Optional filter to show employees from a specific team only. Can be a team name or UUID.
data-filter-store
string
null
Optional filter to show employees from a specific store only. Can be a store name or UUID.
data-show-team-headline
boolean
false
When true, displays the team name as a headline above the employee list.
Features
Display employees with their details in a responsive grid layout
Group employees by team with a tabbed interface
Filter employees by team or store
Sort employees based on their order property
Organize teams based on their order property
Examples
Basic Example - All Employees
Filtered by Team
Filtered by Store
Filtered by Team and Store IDs
Behavior
Data Loading:
On initialization, the component fetches employee data from the API using the provided API key.
If filter attributes are set, the data is filtered accordingly.
Team Grouping:
Without filters, employees are grouped by their teams and displayed in tabs.
Teams are sorted based on their order property.
Within each team, employees are sorted based on their individual order property.
Filtering:
When
data-filter-team
is provided, only employees from that team are displayed.When
data-filter-store
is provided, only employees from that store are displayed.Filters can be applied using either names or UUIDs.
Team Headlines:
When
data-show-team-headline
is true, team names are displayed as headlines above the employee lists.When employees are filtered by team, the team name is displayed as a headline (if
data-show-team-headline
is true).
Last updated