## 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 (< 25 rows), print-friendly reports

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