Tabular Flutter Documentation

Welcome to the comprehensive documentation for medha_boards_table - a clean, architecture-focused table widget library for Flutter.

Quick Links

Getting Started

Start here if you're new to medha_boards_table:

Getting Started - Installation, dependencies, and your first table
Architecture - Core concepts, controller-state pattern, and design principles
Quick Start Examples - 5 common scenarios with complete working code

Configuration

Learn how to configure your tables:

Table Configuration - Complete TableConfig reference with all properties
Column Configuration - Complete ColumnConfig reference with all properties
JSON Format Reference - Complete visualResponse schema for JSON-based configuration

Core Features

Detailed guides for each major feature:

Sorting - 3-state sorting, type-aware comparison, and API reference
Filtering - Column filters, global search, and filtering API
Row Selection - Multi-select rows with gestures and callbacks
Tree Mode - Hierarchical data with expand/collapse functionality
Column Resizing - Interactive column width adjustment
Frozen Columns - Pin columns during horizontal scrolling
Conditional Formatting - Dynamic cell colors based on values
Column Groups - Two-level nested column headers
Number Formatting - Decimals, commas, and currency display
Progressive Loading - Auto-load rows on scroll
Drill-Down - Navigate to detail views from table cells

Advanced Topics

Deep dives into advanced functionality:

Theming & Dark Mode - Color schemes and theme integration
State Management - Accessing state, listening to changes, reactive updates
Controller API Reference - Complete reference for all controller methods

Guides & Best Practices

Practical guides for common scenarios:

Migration Guide - Migrate from other table libraries
Performance Tips - Optimize for large datasets
Cookbook - Solutions to common use cases and patterns

Examples

Browse working examples:

Examples Gallery - Showcase of all 18 example configurations

Feature Overview

Feature	Description	Configuration
Sorting	3-state column sorting with type-aware comparison	`headerSort: true`
Filtering	Search and filter data by column or globally	`headerFilter: 'input'`
Selection	Multi-select rows with long-press gesture	`selectableRows: true`
Tree Mode	Hierarchical data with expand/collapse	`dataTree: true`
Resizing	Drag column headers to adjust width	`resizable: true`
Frozen Columns	Pin first N columns during scroll	`fixedColumns: 2`
Conditional Formatting	Dynamic cell colors based on values	`conditionalFormatting: {...}`
Column Groups	Two-level nested headers	`columns: [{columns: [...]}]`
Number Formatting	Format numbers with decimals, commas, currency	`formatterParams: {...}`
Progressive Loading	Auto-load 50 rows at a time	Automatic
Drill-Down	Navigate to details on cell tap	`drillDown: true`
Dark Mode	Automatic theme switching	`isDarkMode: true`

Quick Example

📝 Complete Working Example

import 'package:flutter/material.dart';
import 'package:medha_boards_table/medha_boards_table.dart';

class MyTablePage extends StatefulWidget {
  @override
  State<MyTablePage> createState() => _MyTablePageState();
}

class _MyTablePageState extends State<MyTablePage> {
  late TableController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TableController(
      config: TableConfig(
        visualType: 'table',
        title: 'Sales Report',
        fixedColumns: 1,
        selectableRows: true,
        columns: [
          ColumnConfig(
            field: 'region',
            title: 'Region',
            width: 150,
            headerSort: true,
            headerFilter: 'input',
          ),
          ColumnConfig(
            field: 'sales',
            title: 'Sales',
            columnType: 'numericColumn',
            width: 120,
            hozAlign: 'right',
            formatterParams: FormatterParams(
              values: NumberFormatValues(
                commaSperated: true,
                decimalPoint: 2,
                currency: true,
              ),
            ),
          ),
        ],
      ),
      data: [
        {'region': 'North', 'sales': 3500.50},
        {'region': 'South', 'sales': 5200.75},
        {'region': 'East', 'sales': 4100.25},
        {'region': 'West', 'sales': 6300.00},
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tabular Flutter Demo')),
      body: TableWidget(
        controller: _controller,
        isDarkMode: Theme.of(context).brightness == Brightness.dark,
      ),
    );
  }
}

Architecture Highlights

Controller-State Pattern

TableController - Owns all business logic (sorting, filtering, selection, tree operations)
TableState - Immutable state with copyWith pattern for updates
Pure Render Widgets - UI components only display data and emit callbacks

Feature Managers

SortManager - Handles sorting logic
FilterManager - Manages filtering operations
TreeManager - Controls tree expansion/collapse
ConditionalFormatter - Calculates cell colors

Adapter Layer

HorizontalTableAdapter - Isolates horizontal_data_table dependency for frozen columns

Version Information

Current Version: 0.0.1
Flutter SDK: >=3.16.0
Dart SDK: >=3.2.0 <4.0.0

Support

Issues: GitHub Issues
Source Code: GitHub Repository
Example App: See example/lib/main.dart in the repository

License

MIT License - See LICENSE file for details

Ready to get started? → Installation & Getting Started