Table elements are versatile data display components that showcase multiple records from your database in your Live App. Tables can include links enabling users to access record details, make edits, perform deletions, or trigger specific actions.
What You'll Learn
- How to create and configure Table elements
- Ways to customize data display and interaction options
- Best practices for managing columns and actions
- Advanced features like filtering and pagination
Visual Appearance
In the Live App, Tables display your data in an organized grid format with:
- Column headers representing field names
- Rows showing individual records
- Optional action links for record manipulation
- Filtering and search capabilities
- Pagination controls
Managing Table Elements
Adding Tables to Pages
- Navigate to the Pages section of the Builder
- Select an existing page or create a new one
- Click "Add Element" and select "Table"
- Choose your data source and configure initial settings
Basic Configuration
Source Settings
- Data: Define rules to determine which records to display
- Sort: Set the default sort order for records
- Limit: Specify maximum number of records to show
Tip: Use the limit feature to create "Top N" displays, like showing your top 10 customers
Display Options
- Keyword Search
- Export Functionality (CSV, JSON, TXT)
- Inline Editing
- Empty Column Hiding
Column Management
Adding Columns
- Database Fields: Direct fields from your primary table
- Connected Fields: Data from related tables
- Action Links: Interactive elements like edit, delete, or view details
Column Configuration
- Reorder columns via drag-and-drop
- Customize column width and alignment
- Set column summaries (Sum, Average, Min, Max)
- Configure display rules
Advanced Features
Filtering Options
- User Filters: Allow users to create custom filters
- Filter Menu: Present preset filtering options
- Internal Filters: Set permanent record restrictions
Pagination Controls
- Set records per page (10, 25, 50, 100)
- Enable user control over records displayed
Best Practices
Design Considerations
- Keep column count manageable for better readability
- Use consistent action link placement
- Include clear column headers and descriptions
- Consider mobile responsiveness when adding columns
Performance Tips
- Limit initial record load for faster page rendering
- Use filters to reduce data volume
Troubleshooting
Common Issues
- New datatable fields aren't automatically added to existing Tables
- Deleting a Table removes associated child pages
- Column summaries may not appear for certain field types
Solutions
- Manually add new fields to Tables as needed
- Back up page configurations before making major changes
- Verify field type compatibility for summaries
Related Resources
- [Database Structure Guide]
- [Action Links Documentation]
- [Page Layout Best Practices]
- [Filter Configuration Guide]
Note: All changes to Table elements are immediately reflected in your Live App preview, allowing for real-time testing and validation.
Warning: Deleting a Table element will remove all associated child pages unless they're connected to other elements.