Flutter Table Plus #

A highly customizable, type-safe Flutter table widget with synchronized scrolling, sorting, selection, editing, and more.

✨ Features #

📦 Installation #

dependencies:
  flutter_table_plus: ^2.1.1

flutter pub get

🚀 Quick Start #

1. Define Your Data Model #

class User {
  final String id;
  final String name;
  final String email;
  final int age;

  const User({
    required this.id,
    required this.name,
    required this.email,
    required this.age,
  });
}

2. Create the Table #

import 'package:flutter_table_plus/flutter_table_plus.dart';

final columns = TableColumnsBuilder<User>()
  ..addColumn('name', TablePlusColumn(
    key: 'name',
    label: 'Name',
    order: 1,
    width: 150,
    valueAccessor: (user) => user.name,
    sortable: true,
  ))
  ..addColumn('email', TablePlusColumn(
    key: 'email',
    label: 'Email',
    order: 2,
    width: 200,
    valueAccessor: (user) => user.email,
  ))
  ..addColumn('age', TablePlusColumn(
    key: 'age',
    label: 'Age',
    order: 3,
    width: 80,
    valueAccessor: (user) => user.age,
    sortable: true,
  ));

final users = [
  User(id: '1', name: 'John Doe', email: 'john@example.com', age: 28),
  User(id: '2', name: 'Jane Smith', email: 'jane@example.com', age: 34),
];

FlutterTablePlus<User>(
  columns: columns.build(),
  data: users,
  rowId: (user) => user.id,  // Unique identifier for each row

  // Sorting
  sortColumnKey: _sortColumn,
  sortDirection: _sortDirection,
  onSort: (columnKey, direction) {
    setState(() {
      _sortColumn = columnKey;
      _sortDirection = direction;
      // Sort your data here
    });
  },

  // Selection
  isSelectable: true,
  selectionMode: SelectionMode.multiple,
  selectedRows: _selectedRows,
  onRowSelectionChanged: (rowId, isSelected) {
    setState(() {
      isSelected ? _selectedRows.add(rowId) : _selectedRows.remove(rowId);
    });
  },
)

💡 Core Philosophy #

Flutter Table Plus follows a UI-only, data-agnostic design:

• ✅ You own your data — The package never stores or mutates your data
• ✅ Callback-driven — All interactions flow through callbacks you control
• ✅ State management agnostic — Works with setState, Provider, Riverpod, Bloc, etc.
• ✅ Maximum flexibility — No assumptions about your data structure or business logic

// You handle sorting
onSort: (columnKey, direction) {
  // Sort your data however you want
  _myData.sort(...);
}

// You handle selection
onRowSelectionChanged: (rowId, isSelected) {
  // Update your selection state
  _selectedIds.add(rowId);
}

// You handle editing
onCellChanged: (row, columnKey, rowIndex, oldValue, newValue) {
  // Update your data model
  _myData[rowIndex] = row.copyWith(name: newValue);
}

📖 Documentation #

🔗 Links #

• API Reference (pub.dev)
• GitHub Repository
• Example App
• Changelog

📄 License #

MIT License — see LICENSE for details.