Flutter Table Plus

A highly customizable Flutter table widget with rich features for displaying complex data.

Features

Synchronized Scrolling - Header and body scroll together seamlessly
Sorting - Multi-state column sorting (ascending → descending → none)
Selection - Single or multiple row selection with checkboxes
Editing - Inline cell editing with auto-save
Column Reordering - Drag-and-drop to reorder columns
Column Visibility - Show/hide columns dynamically
Merged Rows - Group multiple rows with custom content
Expandable Rows - Collapsible summary rows for grouped data
Hover Buttons - Action buttons that appear on row hover
Dynamic Heights - Support for TextOverflow.visible with proper height calculation
Smart Tooltips - Text or widget-based tooltips with intelligent positioning
Dim Rows - Style inactive rows differently based on data
Advanced Theming - Deep customization of every visual aspect
No Dependencies - Pure Flutter implementation

Installation

dependencies:
  flutter_table_plus: ^2.0.2

Quick Start

import 'package:flutter_table_plus/flutter_table_plus.dart';

FlutterTablePlus(
  columns: {
    'id': TablePlusColumn(key: 'id', label: 'ID', width: 80, order: 0),
    'name': TablePlusColumn(key: 'name', label: 'Name', width: 150, order: 1),
    'email': TablePlusColumn(key: 'email', label: 'Email', width: 200, order: 2),
  },
  data: [
    {'id': '1', 'name': 'John Doe', 'email': 'john@example.com'},
    {'id': '2', 'name': 'Jane Smith', 'email': 'jane@example.com'},
  ],
)

Core Features

Sorting

FlutterTablePlus(
  columns: {
    'name': TablePlusColumn(
      key: 'name',
      label: 'Name',
      sortable: true, // Enable sorting for this column
      order: 0,
    ),
  },
  sortColumnKey: _sortColumn,
  sortDirection: _sortDirection,
  onSort: (columnKey, direction) {
    // Handle sorting logic
  },
)

Selection

FlutterTablePlus(
  isSelectable: true,
  selectionMode: SelectionMode.multiple, // or SelectionMode.single
  selectedRows: _selectedRows,
  onRowSelectionChanged: (rowId, isSelected) {
    // Handle selection changes
  },
)

Cell Editing

FlutterTablePlus(
  isEditable: true,
  columns: {
    'name': TablePlusColumn(
      key: 'name',
      label: 'Name',
      editable: true, // Enable editing for this column
      order: 0,
    ),
  },
  onCellChanged: (rowId, columnKey, newValue) {
    // Handle cell value changes
  },
)

Column Reordering

FlutterTablePlus(
  onColumnReorder: (oldIndex, newIndex) {
    // Update column order
  },
)

Dynamic Row Heights

FlutterTablePlus(
  columns: columns,
  data: data,
  calculateRowHeight: TableRowHeightCalculator.createHeightCalculator(
    columns: columnsList,
    columnWidths: columnsList.map((col) => col.width).toList(),
    defaultTextStyle: TextStyle(fontSize: 14),
    minHeight: 48.0,
  ),
)

Custom Tooltips

Text-based:

TablePlusColumn(
  key: 'name',
  label: 'Name',
  tooltipFormatter: (rowData) => 'Employee: ${rowData['name']}\nDept: ${rowData['dept']}',
)

Widget-based:

TablePlusColumn(
  key: 'name',
  label: 'Name',
  tooltipBuilder: (context, rowData) {
    return Container(
      padding: EdgeInsets.all(12),
      child: Column(
        children: [
          Text(rowData['name'], style: TextStyle(fontWeight: FontWeight.bold)),
          Text(rowData['email']),
        ],
      ),
    );
  },
)

Merged Rows

FlutterTablePlus(
  data: data,
  mergedGroups: [
    MergedRowGroup(
      rowKeys: ['1', '2', '3'], // Row IDs to merge
      mergeCellConfigs: {
        'category': MergeCellConfig(content: 'Electronics'),
      },
    ),
  ],
)

Hover Buttons

FlutterTablePlus(
  hoverButtonBuilder: (context, rowData) {
    return IconButton(
      icon: Icon(Icons.edit),
      onPressed: () => _editRow(rowData),
    );
  },
  hoverButtonPosition: HoverButtonPosition.right,
)

Dim Rows

FlutterTablePlus(
  dimRowKey: 'isActive', // Field name in rowData
  invertDimRow: true, // Dim when isActive is false
  theme: TablePlusTheme(
    bodyTheme: TablePlusBodyTheme(
      dimRowColor: Colors.grey.withOpacity(0.3),
      dimRowTextStyle: TextStyle(color: Colors.grey),
    ),
  ),
)

Theming

FlutterTablePlus(
  theme: TablePlusTheme(
    headerTheme: TablePlusHeaderTheme(
      height: 56,
      textStyle: TextStyle(fontWeight: FontWeight.bold),
      decoration: BoxDecoration(color: Colors.blue.shade100),
    ),
    bodyTheme: TablePlusBodyTheme(
      rowHeight: 48,
      alternateRowColor: Colors.grey.shade50,
      selectedRowColor: Colors.blue.withOpacity(0.2),
      hoverColor: Colors.blue.withOpacity(0.05),
    ),
    tooltip: TablePlusTooltipTheme(
      verticalOffset: 16.0,
      decoration: BoxDecoration(
        color: Colors.black87,
        borderRadius: BorderRadius.circular(4),
      ),
    ),
  ),
)

Documentation

Detailed guides for advanced features:

License

MIT License - see LICENSE file for details.