Employees List Reference

The EmployeesList component provides an overview of all employees' time tracking data, allowing managers to monitor hours worked and breaks taken across their team.

EmployeesList showing team hours and attendance

Basic Implementation

iframe

React

React Native

Component Properties

Property	Type	Required	Description
`onEmployeeClick` / `onEmployeePress`	`(employeeId: string) => void`	No	Callback when an employee card is selected.

Theme Elements

Element Name	Type	Properties	Description
`allStafIcon`	`Icon`	`backgroundColor`, `color`	Styles the icon representing all staff.
`allStafTitle`	`Text`		Styles the "All Staff" title text.
`dateSelectorText`	`Text`		Styles the date range selector text.
`dateSelectorWrapper`	`Container`	`backgroundColor`, `borderRadius`, `padding`	Styles the container around the date selector.
`employeeAvatar`	`Image`	`borderColor`, `borderWidth`, `borderRadius`	Styles the employee avatar images.
`employeeName`	`Text`		Styles the employee name text.
`employeeSingle`	`Container`	`backgroundColor`, `borderWidth`, `borderRadius`	Styles individual employee list items.
`employeeColumnTitle`	`Text`		Styles the column headers in the employee list.
`employeeColumnValue`	`Text`		Styles the values in employee list columns.
`employeeListSummaryButton`	`Button`	`backgroundColor`, `color`	Styles buttons in the summary section.
`employeeListSummaryColumnTitle`	`Text`		Styles column titles in the summary.
`employeeListSummaryColumnValue`	`Text`		Styles values in the summary section.
`employeeListSummaryWrapper`	`Container`	`borderRadius`, `backgroundColor`	Styles the container for the summary section.
`employeeListWrapper`	`Container`	`gap`, `padding`	Styles the container for all employee entries.

For a comprehensive overview of UI customization options and to learn more about theming across all components, please see our UI Customization Introduction article.

Custom Strings

Custom strings allows you to override any of the texts on the component with your own texts.

Custom Strings are currently in beta.

String Key	Default Value	Description
`allStaffTitle`	"All Staff"	Header text for the employee list.
`employeeColumnHoursWorked`	"Hours Worked"	Header for hours worked column.
`employeeColumnUnpaidBreaks`	"Unpaid Breaks"	Header for unpaid breaks column.
`employeeColumnGrossPay`	"Gross Pay"	Header for gross pay column (if enabled).
`employeeListTotal`	"Total"	Text for totals row.
`employeeListEmailReport`	"Email Report"	Text for email report button.

💡

The EmployeesList component automatically inherits and applies date range settings from the global context.

Basic Implementation#

Component Properties#

Theme Elements#

Custom Strings#

Basic Implementation

Component Properties

Theme Elements

Custom Strings