Data Table
Reference data-table layout with profile links, circular status indicators,
sortable column headers, row-level action menus, and archive controls. Row hover
highlights the entire row. Status circles convey active/inactive state using
--color-success. Archive links use --color-error to signal
destructive intent. No choice field — a single, comprehensive table layout is used
throughout.
CSS variables
| Variable | Theme field | Used for |
|---|---|---|
--color-table | global_colors.table_color | Table outer border and all cell borders |
--color-primary | global_colors.primary_color | Profile links, action menu links, row action hover border, checkbox fill, general blue text utility |
--color-hover-surface | global_colors.hover_surface | Background on user profile link hover |
--color-page-bg | global_colors.page_color | Action menu background, full row hover background |
--color-light-grey | global_colors.light_grey_color | Action menu button border |
--color-error | global_colors.error_color | Archive link text, danger text utility class |
--color-success | global_colors.success_color | Active status circle background, green text utility class |
--color-heading | global_colors.heading_color | Sortable column header text, black text utility class |
--color-body | global_colors.body_color | Standard cell body text |
--color-border | global_colors.border_color | Silver/muted text utility class |
Data table
Full table layout with profile links, status indicators, sortable headers, action menus, and archive controls. Row hover applies --color-page-bg across the entire row. Status circles use --color-success; archive links use --color-error.
|
Name
|
Key contact | Status | Time added | Journey | Created date | |
|---|---|---|---|---|---|---|
| Deshawn Zermeno | James Bond |
●
User completed
|
1 day ago | Best offer |
Jan 17, 2017
4:00 PM
|
|
| Kermit Poulose | James Bond |
●
User completed
|
7 hours ago | Best offer |
Jan 17, 2017
4:00 PM
|
|
| Kermit Poulose | James Bond |
●
User completed
|
7 hours ago | Best offer |
Jan 17, 2017
4:00 PM
|
|
| Deshawn Zermeno | James Bond |
●
User completed
|
1 day ago | Best offer |
Jan 17, 2017
4:00 PM
|
|
| Kermit Poulose | James Bond |
●
User completed
|
1 day ago | Best offer |
Jan 17, 2017
4:00 PM
|
|
| Colleen Wonsley | James Bond |
●
User completed
|
7 hours ago | Best offer |
Jan 17, 2017
4:00 PM
|
|
| Deshawn Zermeno | James Bond |
●
User completed
|
7 hours ago | Best offer |
Jan 17, 2017
4:00 PM
|
|
| Kermit Poulose | James Bond |
●
User completed
|
7 hours ago | Best offer |
Jan 17, 2017
4:00 PM
|
| Name | Location | Subject | Communication |
Queued
|
Last sent | Start date | |
|---|---|---|---|---|---|---|---|
| Camila Blake | New York | Hi John Smith, your tasks are ove… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
Apr 7, 2025 | ||
| Kermit Poulose | New York | Hi John Smith, your tasks are ove… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
Mar 30, 2025 | ||
| Deshawn Zermeno | New York | Oops! You mised an onboarding task… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
2 years ago
Oct 16, 2023
|
Jan 25, 2025 | |
| Coleen Wonsley | New York | Oops! You mised an onboarding task… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
Jan 25, 2025 | ||
| John Smith | New York | Hi John Smith, your tasks are ove… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
Mar 30, 2025 | ||
| James Bond | New York | Hi John Smith, your tasks are ove… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
Mar 30, 2025 | ||
| Zyaire O'Connor | New York | Hi John Smith, your tasks are ove… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
Mar 30, 2025 | ||
| Oliver Rice | New York | Hi John Smith, your tasks are ove… | Overdue tasks Comm |
3 months ago
Mar 23, 2025
|
a year ago
Apr 21, 2024
|
Mar 30, 2025 |
|
Name
|
Mapping | Data type | Mandatory | Created | ||
|---|---|---|---|---|---|---|
| Start Date | Date | No | October 15, 2024 |
|
||
| Start Date | Start date | Date | No | October 15, 2024 |
|
|
| Start Date | Start date | Date | No | October 15, 2024 |
|
|
| Start Date | Start date | Date | No | October 15, 2024 |
|
|
| Start Date | Start date | Date | No | October 15, 2024 |
|
|
| Start Date | Start date | Date | Yes | October 15, 2024 |
|
|
| Start Date | Start date | Date | Yes | October 15, 2024 |
|
|
| Start Date | Start date | Date | No | October 15, 2024 |
|
| Task name | Type | Journey |
Status
|
|
|---|---|---|---|---|
| Some task lorem ipsum | Video | Canada & US Journey, Italy |
●
Published
|
|
| Some task lorem ipsum | Video | Canada & US Journey |
●
Published
|
|
| Some task lorem ipsum | Video | Canada & US Journey |
●
Published
|
|
| Some task lorem ipsum | Form | Canada & US Journey |
●
Published
|
|
| Some task lorem ipsum | Form | Canada & US Journey |
●
Published
|
|
| Some task lorem ipsum | HTML editor | Canada & US Journey |
●
Draft
|
|
| Some task lorem ipsum | HTML editor | Canada & US Journey |
●
Draft
|
|
| Some task lorem ipsum | Embedded URL | Canada & US Journey, Italy |
●
Draft
|
|
Snippet name
|
Created by | Created date | Actions | |
|---|---|---|---|---|
| Example name of snippet | James Bond | Jan 17, 2020 | ||
| Example name of snippet | James Bond | Jan 17, 2020 | ||
| Example name of snippet | James Bond | Jan 17, 2020 | ||
| Example name of snippet | James Bond | Jan 17, 2020 | ||
| Example name of snippet | James Bond | Jan 17, 2020 | ||
| Example name of snippet | James Bond | Jan 17, 2020 | ||
|
Example name of snippet
Archived on Jan 15, 2020 by John Smith
|
James Bond | Jan 17, 2020 | ||
|
Example name of snippet
Archived on Jan 15, 2020 by John Smith
|
James Bond | Jan 17, 2020 |