flutter_table_plus 1.6.1

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.
• Smart Text Handling: Control text overflow (ellipsis, clip, etc.) and get automatic tooltips for truncated text.
• 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.6.1

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

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