The table component is the workhorse of data display in Tadabase applications. It's the most commonly used component for browsing, managing, and interacting with large datasets. Understanding how to configure and optimize table components is essential for building professional, efficient applications that users love.

In this comprehensive lesson, you'll master the table component from basic configuration to advanced features. You'll learn column management, sorting and filtering, inline editing, action links, display rules, pagination, exporting, performance optimization, and best practices that make your tables both powerful and user-friendly.

A table component displays records from a database table in a grid format with rows and columns. Each row represents one record, and each column represents a field. It's similar to a spreadsheet but with powerful database features like sorting, filtering, searching, and inline editing.

Table components are ideal when:

• Browsing Multiple Records - Users need to see many records at once
• Scanning Data - Quick visual scanning of information
• Comparing Records - Side-by-side comparison is important
• Text-Heavy Data - Multiple text fields to display
• Sorting & Filtering - Users need to organize data their way
• Inline Editing - Quick edits without opening forms
• Bulk Operations - Actions on multiple records
• Data Export - Export to Excel or CSV needed

Choose tables over:

• List Component - When desktop view is primary (lists better for mobile)
• Card Component - When text data is more important than images
• Kanban - When workflow status isn't the primary organization

To add a table component:

1. Open Page Builder and navigate to your page
2. Click "+ Add Component" button
3. Select "Table" from Data Components
4. Choose which table to display data from
5. Configure initial settings
6. Click "Save"
7. Table appears on page with default columns

Initial configuration options:

• Data Source - Which table to display records from
• Component Name - Internal name for the component
• Display Name - Title shown above table (optional)
• Records Per Page - Number of rows to display (10, 25, 50, 100)
• Default Sort - Which column to sort by initially
• Sort Direction - Ascending or descending

To add columns to your table:

1. Edit table component
2. Go to "Columns" section
3. Click "+ Add Column"
4. Select field to display
5. Configure column settings
6. Save

Column types you can add:

• Regular Fields - Any field from the table
• Connected Fields - Fields from connected records
• Summary Fields - Aggregated data from child records
• Equation Fields - Calculated values
• System Fields - Record ID, Date Created, Date Modified

To remove columns:

1. Edit table component
2. In "Columns" section, find column to remove
3. Click "X" or delete icon
4. Confirm removal
5. Save component

Note: Removing columns from table doesn't delete the field from your database, just hides it from this table view.

To change column order:

• In Columns section, drag column handles
• Drop in desired position
• Order from left to right
• Save changes

Column order best practices:

• Put most important information first (left)
• Group related columns together
• Put action column last (right)
• Consider user's natural reading flow

Each column has configurable settings:

Display Settings

• Column Name - Header text for column
• Alignment - Left, center, or right alignment
• Width - Fixed width or auto
• Wrap Text - Allow text to wrap to multiple lines
• Truncate - Cut off long text with "..."

Formatting Options

• Date Format - For date fields (MM/DD/YYYY, DD/MM/YYYY, etc.)
• Number Format - Decimal places, thousands separator
• Currency Symbol - Dollar sign, euro, etc.
• Link Style - How links are displayed
• Image Size - Thumbnail size for image fields

Behavior Settings

• Sortable - Allow sorting by this column
• Filterable - Include in filter options
• Searchable - Include in search
• Editable - Allow inline editing
• Visible - Show or hide column

Controlling column widths:

Fixed Width

• Set specific pixel width (100px, 200px)
• Column stays that width
• Good for consistent-length data (IDs, codes)

Auto Width

• Column adjusts to content
• Flexible based on data
• Good for variable-length text

Percentage Width

• Column takes % of table width
• Responsive to screen size
• Good for proportional layouts

Resizable Columns

• Users can drag column borders to resize
• Enable in table settings
• Gives users control
• Resizing saved per user

Basic sorting features:

• Click Column Header - Sort by that column ascending
• Click Again - Sort descending
• Click Third Time - Remove sort (back to default)
• Visual Indicator - Arrow shows sort direction

Sort by multiple columns:

• Primary Sort - Click first column header
• Secondary Sort - Hold Shift + click second column
• Tertiary Sort - Hold Shift + click third column
• Sort Priority - Numbers show sort order (1, 2, 3)

Example: Sort customers by Status (ascending), then by Last Name (ascending), then by Date Created (descending)

Configure how table loads:

• Default Sort Field - Which column to sort by initially
• Sort Direction - Ascending or descending
• Secondary Sorts - Additional default sorts

Common default sorts:

• Date Created descending - Newest records first
• Name ascending - Alphabetical order
• Priority descending - High priority first
• Status + Date - Group by status, newest in each group

Sorting best practices:

• Always set a default sort (don't leave random order)
• Sort by most logical field for your use case
• Consider user's primary need (newest, alphabetical, priority)
• Enable sorting on all relevant columns
• Disable sorting on image/attachment columns

Tables support powerful filtering:

Filter Types

• Column Filters - Filter icon in column header
• Advanced Filters - Complex multi-field filtering
• Quick Filters - Pre-configured filter buttons
• Search - Full-text search across fields

Filter by individual columns:

1. Click filter icon in column header
2. Select filter criteria:
   • Text fields - Contains, equals, starts with, ends with
   • Number fields - Equals, greater than, less than, between
   • Date fields - Before, after, between, last X days
   • Select fields - Choose from options
   • Checkbox fields - Select one or more
3. Enter filter value
4. Click Apply
5. Table updates to show filtered results

Create complex multi-field filters:

• Multiple Conditions - Filter by many fields at once
• AND/OR Logic - Combine conditions
• Nested Groups - Complex filter logic
• Operators - Greater than, less than, between, contains, etc.

Example advanced filter:

• (Status = "Active" OR Status = "Pending")
• AND (Total > $1000)
• AND (Date Created > Last 30 days)

Save commonly used filters:

1. Configure filter conditions
2. Click "Save Filter"
3. Name the filter (e.g., "High Priority Active")
4. Filter appears in filter dropdown
5. Users can quickly apply saved filters

Saved filter benefits:

• One-click access to complex filters
• Consistency across users
• Faster than rebuilding filters
• Can be shared or per-user

Add filter buttons above table:

• Pre-configured Filters - "Show Active", "Show Completed"
• Button Display - Buttons or dropdown
• Single Click - Instant filtering
• Visual Indication - Shows which filter is active

Example quick filters:

• All | Active | Inactive | Archived
• All | This Week | This Month | This Year
• All | High Priority | Medium | Low

Full-text search across table:

• Search Box - Above or within table
• Multiple Fields - Searches across all searchable columns
• Real-Time - Updates as you type
• Clear Search - X button to clear

Search configuration:

• Enable/disable search
• Choose which fields to search
• Search placeholder text
• Minimum characters before search activates

Inline editing allows users to edit field values directly in the table without opening a separate form. Click a cell, change the value, and save—fast and efficient.

To enable inline editing:

1. Edit table component
2. Go to column settings
3. Check "Enable Inline Editing" for specific columns
4. Set permissions (who can edit)
5. Save component

How inline editing works:

• Click Cell - Cell becomes editable
• Edit Value - Change text, select option, etc.
• Save - Press Enter or click outside cell
• Cancel - Press Escape to cancel changes
• Validation - Required fields, format validation still apply
• Immediate Save - Changes save to database immediately

Which fields support inline editing:

• Text Fields - Text input appears
• Number/Currency - Number input appears
• Select Fields - Dropdown appears
• Checkbox Fields - Checkboxes appear
• Date Fields - Date picker appears
• Yes/No Fields - Toggle switch

Fields that don't support inline editing:

• File/Attachment fields
• Rich text fields (too complex)
• Connection fields (use forms instead)

Inline editing best practices:

• Enable for simple, frequently edited fields
• Don't enable for every column (cluttered)
• Good for: status, priority, quantities, dates
• Avoid for: critical fields requiring validation
• Consider permissions carefully
• Provide visual feedback on save

Action links are buttons or links in table rows that perform actions on specific records. They provide quick access to common operations like view, edit, delete, or custom actions.

Standard action links:

View/Details

• Opens record details page
• Shows full record information
• Usually an eye icon or "View" button

Edit

• Opens edit form
• Can open in popup or navigate to page
• Usually a pencil icon or "Edit" button

Delete

• Deletes the record
• Should show confirmation
• Usually trash icon or "Delete" button
• Consider permissions carefully

Custom Actions

• Send email
• Generate PDF
• Change status
• Duplicate record
• Run workflow
• Any custom operation

To add action links:

1. Edit table component
2. Go to "Action Links" section
3. Click "+ Add Action Link"
4. Configure action:
   • Action type (view, edit, delete, custom)
   • Display style (button, icon, text link)
   • Label or icon
   • Color scheme
   • Confirmation required
5. Set permissions (who can use action)
6. Save component

Where to place action links:

• Actions Column - Dedicated rightmost column for all actions
• Row Hover - Actions appear when hovering over row
• Inline - Actions embedded in specific columns
• Dropdown Menu - Actions in a "..." menu

Recommended: Actions column with icon buttons for most common operations.

Show actions based on conditions:

• Field Values - Only show "Approve" if Status = "Pending"
• Permissions - Only show "Delete" for admins
• Record Ownership - Only owner can edit
• Date-Based - Only show if date is in future

Display rules control conditional visibility of columns and rows based on field values, user roles, or other criteria. They make tables dynamic and contextual.

Show/hide entire columns:

• Based on User Role - Show "Salary" only to managers
• Based on Data - Show "Discount" column only if any discounts exist
• Based on Settings - Show/hide based on app configuration

Show/hide entire rows:

• Default Filters - Only show active records by default
• User-Based - Show only records user created
• Role-Based - Show different records to different roles
• Date-Based - Only show current or upcoming events

Conditional formatting for cells:

• Color Coding - Red for overdue, green for completed
• Icons - Warning icon for low stock
• Bold/Italic - Emphasis for important rows
• Background Color - Highlight high priority items

Example: Highlight rows where Status = "Urgent" with red background, Status = "Completed" with green background.

To create display rules:

1. Edit table component
2. Go to "Display Rules" section
3. Click "+ Add Rule"
4. Define condition (if Status equals "Urgent")
5. Define action (set background color to red)
6. Set rule priority if multiple rules apply
7. Save component

Control how records are paginated:

• Records Per Page - 10, 25, 50, 100, or custom
• Page Navigation - Previous/next buttons, page numbers
• Show Total - Display total record count
• Jump to Page - Enter page number to jump to

Recommendations:

• 10-25 records - Good for detailed information, lots of columns
• 50 records - Balanced for most use cases
• 100 records - When users need to see more at once
• Infinite Scroll - Load more as user scrolls (mobile-friendly)

Consider:

• More records = slower loading
• Fewer records = more clicking through pages
• Match user's typical browsing needs

Limit maximum records displayed:

• Performance - Prevent loading thousands of records
• Set Limit - Maximum 1000, 5000, etc.
• Encourage Filtering - Users must filter to see all data
• Show Warning - "Showing first 1000 of 5000 results - please filter"

Tables support data export:

• Export to Excel - .xlsx format
• Export to CSV - .csv format
• Export to PDF - .pdf format
• Print - Print-friendly view

Configure export settings:

• Visible Columns Only - Export only displayed columns
• All Columns - Include hidden columns
• Current Page - Export only current page
• All Pages - Export all filtered results
• Selected Rows - Export only checked rows

To enable export:

1. Edit table component
2. Go to "Export" settings
3. Enable export button
4. Choose export formats to offer
5. Set permissions (who can export)
6. Save component

Export best practices:

• Enable export for data users need offline
• Consider data sensitivity before enabling
• Set appropriate permissions
• Log exports for audit trail
• Limit export to filtered results to prevent bulk data export

Factors affecting table performance:

• Number of Records - More records = slower
• Number of Columns - More columns = slower
• Connected Fields - Require additional queries
• Summary Fields - Calculate on-the-fly
• Images - Large images slow rendering
• Complex Calculations - Equation fields add overhead

Improve table performance:

Limit Records

• Set default filters (only active records)
• Reduce records per page
• Set maximum record limit
• Encourage users to filter

Optimize Columns

• Show only necessary columns
• Limit connected field columns
• Avoid too many summary fields
• Hide rarely-used columns by default

Optimize Images

• Use thumbnail size for table display
• Don't show full-size images in tables
• Consider image lazy loading

Index Fields

• Index fields used for sorting
• Index fields used for filtering
• Improves query performance

Load data as needed:

• Initial Load - Load first page only
• On Scroll - Load more as user scrolls
• On Demand - Load details when row clicked
• Background Loading - Load additional pages in background

Group rows by field value:

• Group by Category - Show category headers
• Group by Date - Today, Yesterday, This Week, etc.
• Group by Status - Separate sections per status
• Collapsible Groups - Expand/collapse groups
• Group Totals - Show summary per group

Freeze columns so they stay visible while scrolling:

• Freeze First Column - Keep ID or name visible
• Freeze Multiple - Keep first 2-3 columns visible
• Freeze Actions - Keep action column visible
• Horizontal Scroll - Scroll other columns independently

Perform actions on multiple records:

• Checkbox Column - Select individual rows
• Select All - Select all on page or all filtered
• Bulk Delete - Delete selected records
• Bulk Update - Update field values for selected
• Bulk Export - Export selected records
• Custom Bulk Actions - Send emails, change status, etc.

Expandable row details:

• Expand Icon - Click to expand row
• Additional Info - Show details not in columns
• Child Records - Show related records in expanded area
• Actions - Additional actions in expanded area

Show totals at bottom of columns:

• Sum - Total of numeric columns
• Average - Average value
• Count - Total number of records
• Min/Max - Minimum or maximum value

Choose columns wisely:

• Show 5-10 columns maximum for readability
• Prioritize most important information
• Consider screen size and resolution
• Make additional columns available but hidden by default
• Let users customize visible columns

Table layout tips:

• Use consistent column widths
• Align numbers to the right
• Align text to the left
• Use color sparingly for emphasis
• Alternate row colors for readability
• Use adequate padding and spacing

Make tables user-friendly:

• Provide search for tables with many records
• Offer useful default filters
• Set logical default sort order
• Make action links obvious
• Show helpful empty states
• Provide clear column headers
• Show loading indicators

Tables on mobile devices:

• Consider using List or Card component instead
• If using table, keep columns minimal (2-4)
• Make table horizontally scrollable
• Use larger touch targets for actions
• Test on actual mobile devices

Standard data management:

• All records table with key columns
• Search and filter options
• Add button to create new
• Edit/Delete actions per row
• Example: Customer management, product catalog

Data for analysis:

• Many numeric columns
• Column totals and averages
• Export functionality
• Date range filters
• Example: Sales reports, financial data

Actionable items:

• Recent or pending items
• Status indicators
• Quick actions
• Limited columns (3-5)
• Example: Recent orders, pending tasks

Choose records:

• Checkboxes for selection
• Search and filter
• Bulk selection options
• Confirmation of selections
• Example: Select products for order, assign users to project

Solutions:

• Reduce records per page
• Remove unnecessary columns
• Limit connected field columns
• Add default filters to reduce records
• Optimize images (use thumbnails)
• Check database indexes

Solutions:

• Check column visibility settings
• Verify field permissions
• Check display rules
• Ensure field has data
• Clear browser cache

Solutions:

• Verify sorting is enabled for column
• Check field type (some fields can't sort)
• Check for display rules affecting sort
• Verify no JavaScript errors

Solutions:

• Verify filtering is enabled
• Check field data matches filter criteria
• Clear existing filters
• Check for conflicting filters
• Verify field permissions

Solutions:

• Check user has edit permissions
• Verify field is editable in settings
• Check for validation errors
• Ensure required fields are filled
• Check browser console for errors

In this comprehensive lesson, you've mastered the table component:

• Column Management - Adding, removing, ordering, configuring columns
• Sorting - Single and multi-column sorting
• Filtering - Column filters, advanced filters, saved filters
• Inline Editing - Quick editing directly in tables
• Action Links - Buttons for view, edit, delete, custom actions
• Display Rules - Conditional visibility and formatting
• Pagination - Managing large datasets
• Exporting - Excel, CSV, PDF export
• Performance - Optimization strategies
• Best Practices - Professional table design

Before moving on, ensure you can:

• Create and configure a table component
• Add, remove, and reorder columns
• Configure column settings and formatting
• Set up sorting and filtering
• Enable inline editing for appropriate fields
• Add action links with proper configuration
• Create display rules for conditional formatting
• Configure pagination appropriately
• Enable export functionality
• Optimize table performance
• Apply table design best practices

You've mastered the table component. Next, you'll learn about the form component in equal depth.

Hands-On Exercise (To Be Added)

Build a comprehensive customer management table:

• Create table with 8-10 well-chosen columns
• Configure inline editing for status and priority
• Add action links: View, Edit, Delete, Send Email
• Create saved filters: Active, Inactive, Recent
• Add quick filters above table
• Enable search functionality
• Configure display rules for visual indicators
• Set up column totals
• Enable export to Excel
• Test all functionality thoroughly

Knowledge Check (To Be Added)

Quiz will test understanding of:

• When to use table vs other components
• Column configuration best practices
• Sorting and filtering strategies
• Inline editing appropriate use cases
• Action link configuration
• Display rules and conditional formatting
• Performance optimization techniques
• Table design best practices