Table Widget

Introduction

The Table Widget is a core component designed to present structured data in a clear, interactive, and customizable format. It transforms raw datasets into organized tables that can be sorted, filtered, styled, and extended with scripts—making it easier to explore data, compare records, and perform quick analysis.

---

Purpose

To visualize structured data in a flexible tabular layout with column-level formatting, conditional logic, and advanced features like filtering, pagination, and scripting.

Key Features

Data Display

Structured layout with responsive design; handles thousands of records efficiently.

Sorting

Single or multi-column sorting (ascending/descending)

Filtering

Column-level filters with multi-condition support.

Custom Columns

Create calculated fields, add HTML/JS for dynamic content (badges, icons, buttons).

Conditional Formatting

Apply row/cell styles (colors, icons, font rules) based on logic.

Pagination

Page navigation, configurable rows per page, jump-to-page support.

Column & Header Styling

Control alignment, width, font, colors, and borders.

Performance Options

Virtualization and heavy data processing for large datasets.

Steps to Create a Table Widget

1. From the left vertical menu, click the Table Widget icon.

   

2. A new screen will appear to configure the widget.

   

3. Select a dataset from the Datasets dropdown.

4. Columns from the dataset appear in Available Columns.

5. Drag and drop columns into the Columns section.

Configuring the Widget

Dataset & Client Script

1. Select Dataset: Choose a dataset (e.g., sales.ds or swiggy.ds).

2. Optional Filter Logic (Client Script): Apply SQL-like filters before rendering.

   Example:

   SELECT * FROM ? WHERE “Category” = ‘Non-Veg’

   This filters the dataset before it reaches the table.

   

   --- link to client script

Add Columns

• Drag columns (e.g., Restaurant Name, Cuisines, Average Price, Category) into the widget.

• You can add calculated or styled columns to enrich your dataset table.

Steps to Create a Custom Column

1. Click the ➕ icon next to Columns.

   

2. Enter a Column Name -> This is the label that will appear in your table (e.g., Food Item Category).

3. Set a Rule

   • Column -> The dataset field you want to check (e.g., Category).

   • Condition -> Logic applied to that column (e.g., Is Not Null, Equals, Greater Than, etc.).

   • Value -> The value to compare against (leave empty if not needed, e.g., for Is Not Null).

4. Add Rendering Code (JavaScript) to style the output dynamically.

5. Click Create Column -> The formatted column appears in your table.

Example: Veg/Non-Veg Indicator

• Column Name -> Food Item Category

• Column -> Category

• Condition -> Is Not Null

• Value -> (leave blank)

if ("{{Category}}" === "Veg") {
  return '<div style="display: inline-flex; align-items: center;">' +
         '<div style="width: 12px; height: 12px; border-radius: 50%; background-color: green; margin-right: 6px;"></div>' +
         '<span>{{Category}}</span></div>';
} else if ("{{Category}}" === "Non-Veg") {
  return '<div style="display: inline-flex; align-items: center;">' +
         '<div style="width: 12px; height: 12px; border-radius: 50%; background-color: red; margin-right: 6px;"></div>' +
         '<span>{{Category}}</span></div>';
} else {
  return '<div>{{Category}}</div>';
}

Output

Column Settings

Click the icon next to any column to open its settings:

Setting	Description
Column Name	Rename display name
Content Align	Align column data: Left, Center, Right
Width	Adjust column width in pixels

Header Settings

You can customize headers for each column individually by clicking the icon next to the column name inside the Table Widget -> Columns section.

Setting	Description
Header Align	Align the text in the header (Left, Center, or Right).
Text Color	Set the header font color using HEX code or color picker.
Background Color	Set the background color of the column header.
Font Size	Adjust the font size of the header text (e.g., 12px, 16px).
Font Weight	Choose from Normal, Bold, or other weight levels.
Font Style	Pick between Normal, Italic, etc., for header text style.

These settings allow for per-column header formatting — useful for highlighting key fields (e.g., metric columns in bold or different background colors).

Format Value

Format the display of data within the cells of this column. This is especially useful for numeric values.

Setting	Description	Example
Decimal Places	Specify the number of decimal points to display.	2 formats 150 as 150.00.
Before Symbol	Add a prefix symbol or text before the value.	$ formats 150 as $150.
After Symbol	Add a suffix symbol or text after the value.	kg formats 150 as 150 kg.
Thousands Separator	Enable to display a comma as a thousands separator.	Formats 1000000 as 1,000,000.
Percent	Format the value as a percentage (multiplies by 100 and adds %).	Formats 0.95 as 95%.

How to Use

1. Click on the icon next to the desired column in the Table Widget -> Columns section.
2. In the pop-up panel, expand the Header Settings section.
3. Apply your header text formatting, including alignment, color, background color, size, weight, and style.
4. Click outside the panel or press Enter to apply changes.

Example: To make the header of the Restaurant Name column appear distinct, set Font Weight: Bold, Text Color: #000000, and Background Color: #e0e0e0.

Table Settings

Expand the Table Settings panel to configure table-wide features:

Option	Description
Sorting	Enable/disable column sorting
Multisorting	Allow sorting by multiple columns
Filtering	Enable column filter dropdowns
Show Column Menu	Show additional column-level options
Hide Scrollbar	Hides the vertical scrollbar, useful with pagination.
Virtualization	Improve performance for large datasets
Pagination	Paginate rows for cleaner display
Records per Page	Set number of rows per page (e.g., 10, 25, 50). This option is applicable only when Pagination is enabled.
Text Wrap	Wrap cell content for long text
Wrap Mode	Options: Both, Header, Value
Grid Lines	Control gridline visibility: • None -> No gridlines • Default -> System default style • Horizontal -> Show only row separators • Vertical -> Show only column separators • Both -> Show both row & column separators
Conditional Formatting (Row)	Click the f(x) icon to define styling rules
Row Height	Set height (in px) of each row (default: 25)

---

Steps to Apply Conditional Formatting

1. Enable Conditional Formatting

   • Go to Table Settings -> click f(x) Conditional Formatting (Row).

   • Toggle Enable Conditional Formatting -> ON.

2. Add a Formatting Level

   • Click Add Level to create a new formatting rule.

3. Configure Formatting Options

   • Set Name, Background Color, Text Color, Font Size, Font Weight, and Font Style.

   • Each level can include multiple rules.

Example : Highlight Veg Restaurants

Field	Value
Name	Veg Restaurants
Background Color	#59d97d (green)
Text Color	#ffffff
Font Weight	Bold
Rule	Column: Veg/Non-Veg -> Condition: Equals -> Value: Veg

• Each level can include multiple rules.

• Click Save to apply changes.

---

Publishing

After customizing the widget:

• Click the Publish button (top-right).
• The table widget will appear on your dashboard canvas.

Header Settings

Field	Description
Hide Header	Completely hides the header row of the table.
Name	Optional label for the level (e.g., High Performance)
Background Color	Set cell background (e.g., #59d97d)
Text Color	Text color (e.g., #ffffff)
Font Size	Enter font size (e.g., 12)
Font Weight	Choose from Normal, Bold, etc.
Font Style	Choose from Normal, Italic, etc.
Header Column Border Color	Set the color of the border around the header cell.

---

Body Settings

These settings control the appearance of the table’s body, including row styling and pagination controls.

Setting	Description
Body Background Color	Sets the overall background color for the table body (e.g., #ffffff).
Body Font Size	Defines the font size for the data within the table cells (e.g., 12 px).
Row Border Color	Sets the color of horizontal lines between rows (e.g., #e5e5e5).
Column Border Color	Sets the color of vertical lines between columns (e.g., #e5e5e5).
Even Row Background Color	Background color for even-numbered rows for zebra striping (e.g., #f9f9f9).
Even Row Font Color	Text color for even-numbered rows (e.g., #333333).
Odd Row Background Color	Background color for odd-numbered rows (e.g., #ffffff).
Odd Row Font Color	Text color for odd-numbered rows (e.g., #333333).
Pagination Active Background Color	Background color for the currently active page number (e.g., #000000).
Pagination Active Font Color	Text color for the active page number (e.g., #ffffff).
Pagination Background Color	Background color for the pagination control area (e.g., transparent).
Pagination Font Color	Text color for inactive page numbers (e.g., #333333).

---

Use Cases

Use Case	Audience	Features Used	Benefit
Data Exploration	Analysts, Power Users	Sorting, Filtering, Pagination	Explore and analyze large datasets.
Operational Monitoring	Support, Operations	Conditional Formatting, Custom Columns	Quickly spot trends and issues.
Financial Reporting	Finance, Accounts	Column Formatting, Header Styling	Clean, professional tables.
CRM and Sales Management	Sales Teams	Filtering, Sorting, Action Buttons	Lightweight CRM in a table.
Product Catalog & Inventory	E-commerce, Logistics	Filtering, Text Wrap, Pagination	Manage stock or product listings easily.

---

Example: Real-time Order Monitoring

Goal

Let an operations manager track real-time orders and highlight:

• Pending orders (yellow background)
• High-value orders (green and bold)

Sample Data

OrderID	Customer	Status	Value
1001	John Smith	Shipped	150.00
1002	Jane Doe	Pending	2500.00
1003	Acme Corp	Shipped	75.50
1004	Peter Jones	Pending	800.00
1005	Global Inc	Delivered	5000.00

Steps

1. Add Table Widget and connect to Orders dataset.

2. Drag columns into the widget.

3. Enable Sorting, Filtering, and Pagination.

4. Apply Conditional Formatting:

   • Level 1: Status = Pending → Light Yellow (#FFF3CD)

   • Level 2: OrderValue > 1000 → Light Green (#D4EDDA), Bold

     

5. Customize header styles and publish.

The result is a real-time dashboard view with visual cues for priority processing.

---

Summary

The Table Widget is essential for displaying structured data with full control over styling, formatting, filtering, and behavior. Whether for analytics, operations, finance, or CRM, it’s your go-to tool for data visibility inside VIZ.