Data Table Widget

The Data Table widget displays detailed row-by-row data in a spreadsheet-like format with sorting, searching, and pagination. Perfect for showing detailed information that users can explore and interact with.

When to Use

• Display detailed lists (products, orders, customers, campaigns)
• Show precise values alongside visualizations
• Provide export-ready data
• Allow users to search and sort data themselves
• Show many rows of data with multiple columns

Configuration Options

Content Settings

Title (Required)

Examples:“All Products”, “Recent Orders”, “Campaign Performance”, “Top Customers”

Data Table (Required)

What it is: The data source for the table

Available data tables:

• Orders: All orders with profit details
• Products: Product performance data
• Customers: Customer information and lifetime value
• Categories: Product category performance
• Traffic Sources: Traffic source analytics
• Sessions: Website visitor sessions
• Campaigns: Ad campaign performance (Facebook & Google)
• Expenses: Expense records
• Coupons: Coupon usage and performance
• Subscriptions: Subscription orders

Display Columns (Required)

What it is: Which columns to show in the table

How to configure:

1. Select from available columns (multi-select dropdown)
2. Reorder by dragging column names
3. Each data table has unique columns available

Example columns for Orders table:

• Order Number
• Date
• Customer Name
• Status
• Total (order amount)
• Cost (total costs)
• Profit
• Margin (%)
• Payment Method
• Shipping Method
• Traffic Source
• Campaign

Example columns for Products table:

• Product Name
• SKU
• Category
• Units Sold
• Revenue
• Cost
• Profit
• Margin (%)
• Stock Status
• Average Unit Price

Results Per Page

Options:5, 10, 25, 50, 100, 200 rows per page

Default:50 rows

Choose based on:

• Report purpose (overview vs detailed analysis)
• Expected data volume
• User preference

Max Records to Fetch

Options: No Limit, 100, 250, 500, 1000, 2500

Default:500

What it does: Limits total records fetched from database for performance

Recommendation:

• Small stores: No limit or 1000
• Medium stores: 500-1000
• Large stores: 250-500 (faster loading)

Advanced Settings

Enable Sorting

Default: On

When enabled: Users can click column headers to sort

When to disable: When you want to enforce specific sort order

Enable Search

Default: On

When enabled: Search box appears above table for filtering rows

Searches: All visible columns

Default Sort Column

What it is: Which column to sort by initially

Examples:

• Orders table: Sort by Date (descending) for recent first
• Products table: Sort by Profit (descending) for top performers
• Customers table: Sort by LTV (descending) for best customers

Default Sort Direction

Options:

• Ascending (asc): A-Z, 0-9, oldest-newest
• Descending (desc): Z-A, 9-0, newest-oldest

Recommendations:

• Date columns: Descending (newest first)
• Profit/Revenue: Descending (highest first)
• Name columns: Ascending (A-Z)

Data Filters

What it is: Additional filters applied only to this table widget

Examples:

• Show only orders with profit >$50
• Show only products in “Clothing” category
• Show only customers from “California”

Use for: Creating focused tables within broader reports

Design Settings

Responsive Width

Recommendation:12 columns (full width) – tables need horizontal space

Icon and Color Theme

Icon: Displays in table header

Color: Affects table header and accent colors

Max Height

Range:200-2000 pixels (default: 360px)

What it does: Sets maximum table container height – table scrolls vertically if content exceeds

Recommendations:

• Dashboard tables: 360-450px
• Detail tables: 500-700px
• Full data exports: No max height (toggle off)

No Max Height Toggle

When enabled: Table expands to show all rows (no scrolling)

Use for: Small datasets (

Caution: Can create very long reports if many rows

Table Features

Column Sorting

Click any column header to sort:

• First click: Sort ascending
• Second click: Sort descending
• Third click: Remove sort (back to default)

Sort indicator (‘ “) shows current sort direction

Search Functionality

Search box filters table in real-time:

• Type any text
• Table instantly filters to matching rows
• Searches across all visible columns
• Case-insensitive

Example: Type “shirt” to see all products/orders containing “shirt”

Pagination

Navigate through pages:

• Page numbers at bottom
• Previous/Next buttons
• Jump to specific page
• Shows: “Showing 1-50 of 347 results”

Column Reordering

Drag column headers to reorder columns (when in edit mode)

Row Selection

Click row to:

• View detailed information
• Navigate to order/product/customer page
• See full data breakdown

Example Configurations

Example 1: Recent Orders

	Title: Recent Orders Data Table: Orders Display Columns: - Order Number - Date - Customer Name - Total - Profit - Margin % - Status Default Sort: Date (descending) Results Per Page: 25 Enable Search: On Enable Sorting: On

Example 2: Top Products by Profit

	Title: Top 50 Products by Profit Data Table: Products Display Columns: - Product Name - SKU - Units Sold - Revenue - Cost - Profit - Margin % Default Sort: Profit (descending) Max Records: 50 Results Per Page: 50

Example 3: Customer Leaderboard

	Title: Top Customers by Lifetime Value Data Table: Customers Display Columns: - Customer Name - Email - Orders Count - Total Spent - Total Profit - Average Order Value - First Order Date Default Sort: Total Profit (descending) Results Per Page: 25

Example 4: Campaign Performance

	Title: All Campaigns Performance Data Table: Campaigns Display Columns: - Campaign Name - Platform (Facebook/Google) - Ad Spend - Revenue - Orders - ROAS - Profit - Status Default Sort: Profit (descending) Enable Search: On

Best Practices

Column Selection

• Include identifier: Always include name/number column first
• Include key metrics: Revenue, Profit, Margin for financial tables
• Limit columns:6-10 columns ideal for readability
• Order logically: ID → Details → Metrics → Status

Sorting Strategy

• Sort by most important column by default
• Usually: Profit, Revenue, Date, or LTV
• Use descending to show top performers first

Pagination

• Dashboard tables: 10-25 rows per page
• Analysis tables: 50 rows per page
• Export tables: 100-200 rows per page

Performance

• Limit max records for large datasets
• Use filters to reduce data volume
• Don’t show all 10,000 orders – filter to recent or apply criteria

Table + Chart Combinations

Chart Above, Table Below

Common pattern:

1. Metric cards at top (Revenue, Profit, Orders)
2. Bar/Line chart in middle (visual trend)
3. Data table at bottom (detailed rows)

Users get overview (cards), trends (chart), and details (table)

Chart + Filtered Table

Chart shows all data, table shows subset:

• Pie chart: Revenue by all categories
• Data table: Only top 10 categories (filtered)

Exporting Table Data

When report is exported:

• PDF: Table included with current filters/sorting
• CSV: All rows exported (respects max records limit)
• Excel: Table formatted with columns and data

Common Use Cases by Data Table Type

Orders Table

Use for:

• Recent order monitoring
• Profit analysis by order
• Order status tracking
• Identifying low-profit orders

Products Table

Use for:

• Product profitability ranking
• Inventory decisions (what to restock)
• Identifying losers to discontinue
• SKU-level analysis

Customers Table

Use for:

• VIP customer identification
• Customer segmentation
• Lifetime value analysis
• Repeat purchase tracking

Campaigns Table

Use for:

• Ad campaign comparison
• ROAS ranking
• Budget allocation decisions
• Platform comparison

Troubleshooting

Issue: Table loading very slowly

Solutions:

• Reduce max records to fetch (500 or less)
• Apply filters to limit data
• Reduce results per page
• Remove unnecessary columns

Issue: Columns cut off or not visible

Solutions:

• Ensure widget is full width (12 columns)
• Reduce number of columns displayed
• Table automatically becomes horizontally scrollable on mobile

Issue: Search not finding results

Check:

• Search is enabled in settings
• Text exists in visible columns (searches only shown columns)
• Check spelling and try partial matches

Issue: Cannot click rows

Note: Row clicking depends on data table type

• Orders: Opens WooCommerce order page
• Products: Opens product edit page
• Some tables: Opens detail modal

Related Widgets

• Simple Table Widget– Cleaner, simpler table format
• Bar Chart Widget– Visual comparison
• Metric List Widget– Summary metrics