Data components are the building blocks of your application's user interface. They determine how users view, interact with, and manage your data. While fields define what data you store, components define how that data is displayed and manipulated. Choosing the right component for each use case is essential for creating intuitive, functional applications.

In this lesson, you'll learn about all major data components in Tadabase: Table, Form, Details, List, Card, Kanban, Calendar, Timeline, Map, Chart, and more. You'll understand when to use each component, their key features, and basic configuration. This overview prepares you for deep dives into specific components in subsequent lessons.

Components are UI elements that connect to your data tables and display or manipulate records. Think of them as different "views" or "interfaces" for your data.

Same data, different components:

• A table component shows orders in rows and columns
• A card component shows orders as visual cards
• A form component lets users create or edit orders
• A details component displays a single order's complete information
• A chart component visualizes order trends

Components fall into three main categories:

Data Display Components

• Show multiple records at once
• Examples: Table, List, Card, Kanban
• Users can browse, search, filter data

Data Entry Components

• Create or edit records
• Examples: Form, Details
• Users input or modify data

Specialized Components

• Specific use cases or visualizations
• Examples: Calendar, Timeline, Map, Chart
• Present data in unique ways

The table component displays records in a grid format with rows and columns, similar to a spreadsheet. It's the most common and versatile component for displaying multiple records.

Use table components when:

• Scanning Data - Users need to scan many records quickly
• Comparing Records - Side-by-side comparison important
• Text-Heavy Data - Lots of text fields to display
• Inline Editing - Quick edits to multiple records
• Sorting & Filtering - Users need to organize data their way
• Examples: Customer lists, order management, inventory, contacts

Table components offer:

• Column Configuration - Choose which fields to display
• Sorting - Sort by any column
• Filtering - Filter records by criteria
• Search - Full-text search across fields
• Pagination - Navigate through large datasets
• Inline Editing - Edit cells directly
• Bulk Actions - Act on multiple records at once
• Export - Export to CSV, Excel
• Action Links - Buttons for custom actions

Table component best practices:

• Show 5-10 columns (not too many)
• Put most important columns first
• Enable search for tables with many records
• Use filters to help users find data
• Set appropriate page size (25-50 records)
• Make columns resizable for flexibility

The form component allows users to create new records or edit existing ones. Forms display fields for data entry with labels, validation, and submission controls.

Use form components when:

• Creating Records - Adding new data to tables
• Editing Records - Modifying existing data
• Data Collection - Gathering information from users
• Structured Input - Need validation and field controls
• Examples: Contact forms, registration, product entry, order forms

Forms come in three types:

• Add Form - Create new records only
• Edit Form - Modify existing records only
• Combined Form - Both add and edit in one form

Form components provide:

• Field Selection - Choose which fields to include
• Field Layout - Arrange fields in columns
• Validation - Required fields, format validation
• Default Values - Pre-fill fields
• Conditional Fields - Show/hide based on values
• Multi-Step Forms - Break into sections or pages
• Submission Actions - What happens after save
• Custom Styling - Control appearance

Form component best practices:

• Only include necessary fields
• Group related fields together
• Use clear field labels
• Provide helpful placeholder text
• Show validation errors clearly
• Use multi-column layout for wide forms
• Consider multi-step for long forms

The details component displays all information for a single record in a read-only format. It's designed for viewing complete record details without editing capability.

Use details components when:

• Viewing Records - Display complete record information
• Read-Only Display - No editing needed
• Detailed Information - Show all fields and connected data
• Print-Friendly - Generate printable views
• Examples: Invoice view, profile page, order details, product specs

Details components offer:

• All Fields Visible - Display complete record
• Connected Data - Show related records
• Custom Layout - Organize information sections
• Child Components - Embed tables of related data
• Action Buttons - Edit, delete, print, export
• Conditional Display - Show/hide based on values

Details Component:

• Read-only display
• Shows formatted data
• Better for viewing
• Can include child components

Edit Form:

• Edit mode
• Shows form inputs
• Better for editing
• Focus on data entry

Often used together: Details page with "Edit" button that opens form.

The list component displays records as a vertical list with customizable templates for each item. It's perfect for mobile-friendly displays and when you need more layout flexibility than tables offer.

Use list components when:

• Mobile Display - Better than tables on small screens
• Custom Layouts - Need more than column-based display
• Rich Content - Include images, icons, formatted text
• Vertical Scanning - One item at a time
• Examples: News feeds, activity streams, mobile app lists, notifications

List components provide:

• Template Customization - Design item layout
• Images & Icons - Visual elements
• Multi-Line Content - Title, subtitle, description
• Action Buttons - Per-item actions
• Grouping - Group by field values
• Filtering & Search - Find specific items
• Infinite Scroll - Load more as user scrolls

The card component displays records as visual cards arranged in a grid. Each card can include images, text, and actions, making it ideal for visual, content-rich displays.

Use card components when:

• Visual Content - Records have images or rich media
• Product Catalogs - E-commerce listings
• Portfolio Display - Projects, properties, team members
• Visual Scanning - Images more important than text
• Examples: Product catalogs, property listings, team directory, portfolios

Card components offer:

• Grid Layout - Multiple cards per row
• Image Display - Prominent images
• Customizable Content - Title, subtitle, description, price, etc.
• Action Buttons - Per-card actions
• Hover Effects - Interactive visual feedback
• Responsive - Adapts to screen size
• Filtering & Sorting - Organize cards

The kanban component displays records as cards organized in columns representing different stages or statuses. Users can drag cards between columns to update their status, perfect for workflow management.

Use kanban components when:

• Workflow Management - Track items through stages
• Status Tracking - Visual status representation
• Drag-and-Drop - Update status by moving cards
• Visual Pipeline - See distribution across stages
• Examples: Task boards, sales pipelines, hiring processes, support tickets

Kanban components provide:

• Column Configuration - Based on status field
• Drag-and-Drop - Move cards between columns
• Card Customization - Configure card display
• Column Counts - See record count per column
• Column Actions - Add new to specific column
• Filtering - Filter cards across all columns

The calendar component displays records on a calendar view based on date or datetime fields. It's perfect for events, schedules, appointments, and any time-based data.

Use calendar components when:

• Date-Based Data - Records have dates or date ranges
• Scheduling - Appointments, meetings, events
• Timeline View - See what's happening when
• Date Planning - Plan and organize by dates
• Examples: Event calendars, appointment schedules, project timelines, availability

Calendar components offer:

• Multiple Views - Month, week, day, agenda
• Date/DateTime Fields - Choose which field to use
• Event Display - Show record details on calendar
• Click to View - Click event to see details
• Create Events - Click date to create record
• Drag Events - Drag to change dates
• Color Coding - Color by field value

The timeline component displays records chronologically along a timeline, showing the progression of events over time. It's ideal for activity feeds, project history, and chronological data.

Use timeline components when:

• Chronological Display - Show order of events
• Activity Feeds - Recent activities and updates
• History - Track changes over time
• Project Milestones - Key dates and events
• Examples: Activity logs, project history, status updates, news feeds

Timeline components provide:

• Chronological Order - Newest first or oldest first
• Date Grouping - Group by day, week, month
• Icons & Images - Visual markers
• Rich Content - Detailed event descriptions
• Filtering - Show specific types of events

The map component displays records with address or geolocation data as markers on an interactive map. It's perfect for any location-based data visualization.

Use map components when:

• Location Data - Records have addresses or coordinates
• Geographic Display - Visualize distribution geographically
• Route Planning - See locations relative to each other
• Territory Management - Sales territories, service areas
• Examples: Store locators, property maps, delivery routes, field service

Map components offer:

• Address Mapping - Plot addresses on map
• Custom Markers - Different marker styles/colors
• Info Windows - Click marker to see details
• Clustering - Group nearby markers
• Directions - Get directions to location
• Filtering - Show/hide markers by criteria

The chart component visualizes data as graphs and charts including bar charts, line charts, pie charts, and more. It's essential for data analysis and visual reporting.

Use chart components when:

• Data Visualization - Show trends, patterns, distributions
• Analytics - Sales reports, performance metrics
• Comparisons - Compare values across categories
• Dashboards - Executive summaries, KPIs
• Examples: Sales charts, revenue trends, performance dashboards, analytics

Common chart types:

• Bar Chart - Compare values across categories
• Line Chart - Show trends over time
• Pie Chart - Show proportions of a whole
• Donut Chart - Pie chart with center hole
• Area Chart - Line chart with filled area
• Gauge - Show progress toward goal

Use this decision guide:

Use Case	Best Component	Why
Browse many text records	Table	Efficient scanning, sorting
Create/edit records	Form	Data entry and validation
View single record	Details	Complete information display
Mobile-friendly list	List	Vertical layout, customizable
Visual product catalog	Card	Image-rich, grid layout
Workflow management	Kanban	Status columns, drag-drop
Events and scheduling	Calendar	Date-based view
Activity history	Timeline	Chronological display
Location-based data	Map	Geographic visualization
Data analysis	Chart	Visual trends and patterns

Components work best when combined effectively:

Common Page Patterns

Browse and Manage

• Table Component - List all records
• Add Button - Opens form in popup
• Action Links - Edit, delete, view details
• Example: Customer management page

Record Details Page

• Details Component - Show main record info
• Table Components - Show related child records
• Edit Button - Opens form
• Example: Customer detail with orders table

Dashboard Page

• Chart Components - Visual KPIs
• Card/List - Recent items
• Table - Actionable items
• Example: Sales dashboard

Workflow Page

• Kanban Component - Main workflow view
• Form - Add new items to workflow
• Filters - Filter workflow items
• Example: Task management board

Practice with components:

Exercise 1: Create Multi-Component Page

1. Create "Products" page with:
   • Card component showing products (grid view)
   • Add button opening form in popup
   • Filter by category
   • Search functionality
2. Test creating, viewing, editing products

Exercise 2: Build Dashboard

1. Create "Dashboard" page with:
   • Chart showing sales by month
   • Card grid showing top products
   • Table of recent orders
   • List of recent activities
2. Arrange for visual hierarchy

Exercise 3: Kanban Board

1. Create "Tasks" page with:
   • Kanban component with columns: To Do, In Progress, Done
   • Form to add new tasks
   • Drag tasks between columns
2. Test workflow management

You've learned about major data components:

• Table - Grid display for scanning and comparing
• Form - Data entry and editing
• Details - Single record display
• List - Vertical mobile-friendly display
• Card - Visual grid display
• Kanban - Workflow management
• Calendar - Date-based visualization
• Timeline - Chronological display
• Map - Location-based visualization
• Chart - Data analysis and trends

Before continuing, ensure you can:

• Identify appropriate component for any use case
• Understand differences between table, list, and card
• Know when to use form vs details component
• Recognize specialized component use cases
• Combine components effectively on pages
• Configure basic component settings

Now that you understand all components, you'll dive deep into the table component with advanced configurations.

Knowledge Check (To Be Added)

Quiz will test:

• Component selection for different use cases
• Table vs List vs Card differences
• When to use specialized components
• Component combination strategies