flutter_table_plus 1.9.0

A highly customizable and efficient table widget for Flutter, featuring synchronized scrolling, theming, sorting, selection, and column reordering.

Flutter Table Plus

A highly customizable and efficient table widget for Flutter. It provides a rich set of features including synchronized scrolling, sorting, selection, and advanced theming, making it easy to display complex data sets.

---

Table of Contents

• Features
• Installation
• Quick Start
• Key Features with Examples
• Conditional Feature Control
• Performance & Compatibility
• Documentation

---

Features

• Synchronized Scrolling: Header and body scroll horizontally in perfect sync.
• Advanced Theming: Deeply customize headers, rows, and scrollbars. Use decoration for advanced header styling (gradients, borders) and fine-tune row interaction effects like hoverColor, splashColor, and highlightColor.
• Flexible Data Handling: Use the rowIdKey property to specify a custom unique identifier for your rows, removing the need for a mandatory 'id' key.
• Column Sorting: Supports multi-state sorting (ascending, descending, none) with a configurable sort cycle.
• Row Selection & Editing: Enable row selection and cell editing simultaneously. Supports double-tap and secondary-tap events on rows.
• Column Reordering: Easily reorder columns with drag-and-drop.
• Column Visibility: Dynamically show or hide individual columns.
• Smart Text Handling: Control text overflow (ellipsis, clip, etc.). Tooltips for both cells and headers can be configured to appear always, only when text overflows, or never, giving you precise control over user feedback.
• Custom Cell Widgets: Render any widget inside a cell using cellBuilder for maximum flexibility.
• Conditional Feature Control: Dynamically enable/disable features like sorting and column reordering based on user permissions or application state.

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_table_plus: ^1.9.0

Then, run flutter pub get in your terminal.

Quick Start

Get up and running with a basic table in just a few lines:

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

class QuickStartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 1. Define your columns
    final columns = [
      TablePlusColumn(key: 'id', label: 'ID', width: 80),
      TablePlusColumn(key: 'name', label: 'Name', width: 150),
      TablePlusColumn(key: 'email', label: 'Email', width: 200),
    ];

    // 2. Prepare your data (each map must have a unique ID)
    final data = [
      {'id': 1, 'name': 'John Doe', 'email': '[e-mail]'},
      {'id': 2, 'name': 'Jane Smith', 'email': '[e-mail]'},
      {'id': 3, 'name': 'Bob Johnson', 'email': '[e-mail]'},
    ];

    // 3. Create the table
    return Scaffold(
      appBar: AppBar(title: Text('My Table')),
      body: FlutterTablePlus(
        columns: columns,
        data: data,
        rowIdKey: 'id', // Specify the key for unique row IDs
      ),
    );
  }
}

That's it! You now have a fully functional table with synchronized scrolling and responsive column widths.

Key Features with Examples

🎯 Column Sorting

Enable sorting with just a few properties:

FlutterTablePlus(
  columns: [TablePlusColumn(key: 'name', label: 'Name', sortable: true)],
  data: data,
  sortColumnKey: _sortColumnKey,
  sortDirection: _sortDirection,
  onSort: (columnKey, direction) {
    setState(() {
      _sortColumnKey = columnKey;
      _sortDirection = direction;
      // Sort your data here
    });
  },
)

☑️ Row Selection

Enable row selection with checkboxes. Supports both single and multiple selection modes.

FlutterTablePlus(
  isSelectable: true,
  rowIdKey: 'user_uuid', // Use your custom ID key
  selectedRows: _selectedRows,
  onRowSelectionChanged: (rowId, isSelected) {
    setState(() {
      isSelected ? _selectedRows.add(rowId) : _selectedRows.remove(rowId);
    });
  },
)

🎨 Advanced Theming

Customize every aspect of the table appearance. Leave interaction colors null to use the default framework effects.

FlutterTablePlus(
  theme: TablePlusTheme(
    headerTheme: TablePlusHeaderTheme(
      height: 56,
      decoration: BoxDecoration(
        color: Colors.blue.shade100,
        border: Border(bottom: BorderSide(color: Colors.blue.shade300, width: 2)),
      ),
    ),
    bodyTheme: TablePlusBodyTheme(
      rowHeight: 48,
      alternateRowColor: Colors.grey.shade50,
    ),
    selectionTheme: TablePlusSelectionTheme(
      selectedRowColor: Colors.blue.withOpacity(0.2),
      rowHoverColor: Colors.blue.withOpacity(0.05), // Custom hover color
      rowSplashColor: null, // Use default splash effect
      selectedRowSplashColor: Colors.transparent, // Disable splash for selected rows
    ),
  ),
)

🔄 Column Reordering

Enable drag-and-drop column reordering:

FlutterTablePlus(
  onColumnReorder: (oldIndex, newIndex) {
    setState(() {
      // Reorder your columns list here
      final column = _columns.removeAt(oldIndex);
      _columns.insert(newIndex, column);
    });
  },
)

Conditional Feature Control

You can dynamically enable or disable features based on your application's needs:

FlutterTablePlus(
  // Enable features based on user permissions
  onSort: userCanSort ? _handleSort : null,
  onColumnReorder: userCanReorderColumns ? _handleColumnReorder : null,
  isSelectable: userCanSelectRows,
  isEditable: userCanEditCells,
);

Performance & Compatibility

• Efficient Rendering: Built on top of Flutter's high-performance rendering pipeline.
• Large Dataset Support: Handles tables with hundreds of rows efficiently using ListView.builder.
• Platform Compatibility: Runs on Android, iOS, Web, Windows, macOS, and Linux.
• Dependencies: No external package dependencies.

Documentation

For more advanced use cases and detailed guides, please refer to our documentation:

• State Management

  • Integrating with Riverpod (Code Generator)

• Feature Guides

  • Handling Empty State
  • Cell Editing
  • Sorting
  • Row Selection
  • Theming and Styling
  • Advanced Column Settings