Definition

The Grid Widget is a dynamic and interactive component in Zenphi Dashboards that allows you to display data from a Table in a structured, tabular format—like a mini version of your full dataset. It lets you select specific columns to show and gives viewers the ability to view, add, update, or delete records directly within the dashboard (based on permissions you configure).

This widget is ideal for real-time data review, tracking, or light data entry. It’s especially powerful because it doesn’t just display static information—it allows for live interaction with your Table data. Additionally, you can attach custom actions to each row, such as triggering a Zenphi Flow or navigating to a Detail Page, enabling workflows to start from right inside the dashboard.

In short, the Grid Widget turns your dashboard into an interactive workspace, combining data visibility with operational controls—all while staying connected to your source Table.

✅ Example Use Cases

The Grid Widget is one of the most versatile dashboard components in Zenphi. It allows you to display, filter, and even modify records directly from a dashboard. Below are some practical use cases that demonstrate the value of using Grid Widgets in real business scenarios:

1. Employee Directory Viewer

Display a searchable list of employees with fields like name, role, email, and department. Team members can view contact info or open a detailed profile page for more context.

2. Task Management Table

Show all tasks assigned to the logged-in user with the ability to mark them as complete (via edit) or start an approval flow (via run flow action).

3. Customer Support Ticket Tracker

A live list of incoming tickets from a support form. Agents can view, sort by urgency, and click to open the full detail or trigger escalation workflows directly.

4. Approval Records Table

Managers see a list of approval requests they are responsible for. They can click to approve, reject, or view more details—all from one place.

5. Purchase Request Management

Show pending purchase requests submitted by employees. Finance or procurement teams can edit them for corrections, delete invalid ones, or start an approval flow from the grid.

6. Onboarding Progress List

HR can track new hires' onboarding progress, with columns like start date, assigned mentor, and checklist status—editable in real time via the grid.

7. Inventory Stock Monitor

Display items in stock with quantity, category, and restock threshold. Add/edit/delete items or trigger a reorder flow if stock falls below minimum levels.

8. Event Registration Viewer

Show all registrants of an internal or external event, allowing organizers to filter by department or date, edit registration info, or remove duplicate entries.

9. Daily Report Submissions

List daily reports submitted by team members, filtered to show only today’s entries or specific projects. Managers can edit for clarity or start follow-up actions.

10. Audit Log Table

Display a running list of form submissions, status updates, or record changes across your process. Ideal for compliance and traceability.

Configuration

The Grid Widget offers flexible and powerful configuration options to help you build the exact view and interactivity you need within a dashboard. Below is a breakdown of the main configuration components:

1. Data Source

At the core of the Grid Widget is the Zenphi Table it pulls data from.

• Select a Table: Choose any of your existing Zenphi Tables as the data source for the widget.
• Once selected, all configuration options—columns, filters, sort, and actions—will be based on the structure and data of that table.

✅

Tip: Ensure your Table has meaningful field names and consistent data formatting for a better dashboard experience.

2. Columns to Display

This is where you define what data fields (columns) from the Table should be visible in the widget.

• Select Columns: You can choose any number of columns to show—from just one to all available in the Table.
• Arrange Columns: Drag-and-drop support allows you to re-order columns as needed to fit your dashboard layout or priority.
• Customize Display: Column widths and formatting options are handled in the Appearance section but begin here with field selection.

🎯

Example: If you have a table of Employee Records, you might show:

• Name, Department, Status, Last Evaluation Date (while hiding internal fields like email or ID).

3. Editing Options

The Grid Widget is not just for display—it's interactive. With editing options enabled, users can directly manage records from the dashboard view.

There are three key edit options, each controlled by a checkbox:

• ➕ Add

  • When enabled, a “+” button appears at the top of the widget.
  • Clicking it opens a form to add a new record to the connected Table.
  • The form fields match the structure of your selected Table columns.

• ✏️ Edit

  • Adds an “Edit” option to the three-dot menu (⋮) for each row.
  • Clicking it opens a form pre-filled with the record's current data, allowing users to update any field.

• 🗑️ Delete

  • Adds a “Delete” option to the same menu.
  • Users can remove a record from the Table with a single click.

⚠️

Important: These controls only appear for users who have permission to modify data. Make sure your dashboard access settings align with your organization’s data governance policies.

Action Buttons

The Action Buttons feature enhances the interactivity of the Grid Widget by allowing users to perform contextual actions on each record, directly from the dashboard. These actions appear in the three-dot (⋮) menu next to each row, giving users quick access to either run a workflow or view record-specific details.

There are two types of action buttons you can configure:

1. Run Flow

If you have any Zenphi Flow that starts with a Table Action trigger, it will appear in the dropdown list when configuring this action type. Once added, the flow becomes available in the widget’s three-dot menu for each row.

When a user clicks the button, the selected flow runs using the data from that specific row—allowing for dynamic, row-level automation without leaving the dashboard.

Common Use Cases:

• Trigger an Approval Workflow: For a table of expense requests, clicking “Run Approval Flow” on a row submits that request for managerial approval.

• Generate a Document or Report: In a table of customer records, initiate a contract or quote document generation flow for the selected customer.

• Notify or Escalate a Case: For a support ticket list, trigger a flow that sends a notification or escalates a ticket to a higher priority queue.

2. Detail Page

If you have a Detail Page already configured in your Zenphi environment, it will also appear in the selection list. Once linked, this button becomes available in the row menu and opens a tailored view of the selected record.

This is perfect for presenting rich, customized details beyond what’s visible in the grid.

Common Use Cases:

• Employee Profile Viewer: From an employee directory table, view full employee profiles including documents, history, and evaluations.

• Request Summary View: For a list of travel or leave requests, allow users to click and view all submitted details in a cleaner, expanded format.

• Customer 360 View: In a customer list, open a full snapshot of each client—interactions, purchases, issues, and related insights—all in one place.

🔗 For full guidance on how to configure and use action buttons, visit:Action Button Section – Zenphi Dashboard Documentation

Appearance

The Appearance settings in the Grid Widget give you control over the visual presentation and layout of your data, ensuring it fits both your brand identity and your dashboard structure.

Widget Layout in Dashboard

Each widget, including the Grid Widget, is a flexible component floating within your dashboard canvas. You can adjust whether it blends seamlessly or stands out as a defined section:

• Show Widget Border?

  • ✅ Enabled: Displays a visible border around the widget, giving it structure and separation from other widgets—ideal for sectioning.
  • ❌ Disabled: Removes the border, allowing the widget to visually blend with others for a more minimalist, inline look.

Widget Title

• Title Field: This is the name or label of your widget, shown at the top of the widget.
• Show Widget Title?: Toggle this setting to either display or hide the title. This can help declutter the interface when space is tight or when the widget purpose is self-explanatory.

📏 Column Sizing

• Autosize Columns Width by Default?

  • ✅ Enabled: The system automatically sizes the width of each column based on content.
  • ❌ Disabled: You get access to a Column Width setting, where you can manually define the width of each column in pixels (px). This ensures consistent alignment and layout, especially when the data varies greatly between records.

Example: You might want a “Name” column to be set to 200px while keeping a “Status” field at 100px for space efficiency.

Action Button Styling

If you've configured multiple Run Flow buttons or Detail Page links in the action button section (three-dot menu), you can customize the appearance of each:

• Button Title: Assign a meaningful label for each button, such as “Send for Review,” “Escalate Case,” or “View Profile.”
• Button Color: Choose a distinct color for each button to make actions stand out or reflect priority (e.g., red for “Delete,” green for “Approve,” blue for “Details”).

This customization improves usability, making it easier for users to distinguish between different available actions at a glance.

Filter Conditions & Sorting

The Grid Widget provides powerful filtering and sorting capabilities, allowing you to control what data is shown and how it is displayed within the table. These settings help tailor the view to each user or business need.

Filter Conditions

The Filter Conditions section lets you display only the records that meet specific criteria. You can use simple or advanced logic using AND/OR groups to combine multiple conditions.

How It Works

Each condition consists of:

• Field: A column from the selected data source (table).

• Operator: Choose from:

  • equal to
  • not equal to
  • contains
  • not contains
  • starts with
  • ends with
  • has none of
  • is null
  • is not null

• Value: A static (hardcoded) value or a dynamic token from the Token Picker.

Token Picker: Make It Dynamic

You can use the Token Picker to apply user-based filtering. Available tokens include:

• Current user email
• Current user name
• Current user ID
• User attributes (like admin status)

This allows the widget to personalize data based on who is viewing the dashboard.

Examples

1. Show Only My Tasks

   • Field: AssignedTo
   • Operator: equal to
   • Value: {{Current User Email}}→ Shows only rows assigned to the currently logged-in user.

2. Show Approved Items Only

   • Field: Status
   • Operator: equal to
   • Value: Approved

3. Show Pending or Escalated Requests

   • Group: OR

     • Condition 1: Status → equal to → Pending
     • Condition 2: Status → equal to → Escalated

4. Show Records Created in Last 7 Days (with custom logic in table)

   • Use a calculated field in your table (e.g., IsRecent)
   • Field: IsRecent
   • Operator: equal to
   • Value: true

These filters help you build widgets that are relevant, efficient, and secure.

Sort

The Sort section controls how data appears in the list — allowing users to view records in a logical and prioritized order.

How It Works

• You can select one or multiple columns from your table to sort by.

• For each column, choose the sort direction:

  • A → Z (Ascending)
  • Z → A (Descending)

Examples

1. Sort by Name Alphabetically

   • Column: Name
   • Direction: A → Z

2. Sort by Priority and then by Date

   • Column 1: Priority (Z → A) — High to Low
   • Column 2: Created Date (A → Z) — Oldest to Newest

3. Sort by Status

   • Column: Status
   • Direction: A → Z

Sorting ensures your most relevant records (e.g., highest priority, newest requests) appear at the top.

Example Scenario: Task Management Table for Logged-in Users

Let’s walk through a real-world setup using the Grid Widget to display and manage tasks assigned to individual employees.

Objective

We want each employee to log into the dashboard and see only the tasks that are assigned to them. They should also be able to:

• View task details
• Edit task status (e.g., mark it as done)
• Trigger a related flow, such as sending a summary email or updating a project timeline

🔧 Step-by-Step Configuration

1. Data Source

Select the Tasks table where each row contains task data including:

• Task Title
• Assigned To (email)
• Due Date
• Status
• Priority

2. Columns to Display

Choose these columns to appear in the Grid:

• Task Title
• Due Date
• Status
• Priority

Reorder them if necessary to suit your preferred layout.

3. Editing Options

Enable:

• ✅ Edit – So users can update task status or deadlines directly
• ❌ Add/Delete – Disabled in this case, as tasks should only be added by project managers, not end users

4. Action Buttons

• Run Flow: Add a button called “Send Status Update” that triggers a Zenphi flow with a Table Action trigger. This flow could send a notification to a manager about the task's current state.
• Detail Page: Optionally link to a Task Details Page where users can see a more comprehensive view of the task (description, comments, attachments, etc.).

5. Filter Condition

Set a filter to show only the tasks relevant to the logged-in user:

• Condition:

  • Assigned To equals {{Current User Email}} (from the Token Picker)

This ensures each user only sees their own task list.

6. Sort

Sort the tasks by:

• Due Date ascending
• Priority descending (optional)

This highlights upcoming and high-priority tasks at the top.

7. Appearance

• Show widget title: ✅ “My Tasks”
• Border: ❌ (for clean integration with other widgets)
• Enable auto column width
• Use consistent colors for action buttons and statuses

✅ Outcome

When employees open the dashboard:

• They only see their tasks
• They can update task progress or due dates
• They can run task-specific flows directly
• And optionally open a task’s detail view

This setup enhances both visibility and accountability while reducing back-and-forth between systems.