flutter_table_plus

KO | EN

gitlite — search

#javascript #react #ai #typescript #golang #nodejs #java #awesome #cli #kubernetes #security #mcp #ios #open-source

flutter_table_plus

(★ 4)

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

flutter_table_plus Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Flutter Table Plus

[![pub version](https://img.shields.io/pub/v/flutter_table_plus.svg)](https://pub.dev/packages/flutter_table_plus)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/kihyun1998/flutter_table_plus/blob/main/LICENSE)
![Flutter platforms](https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20linux%20%7C%20macos%20%7C%20windows%20%7C%20web-blue)

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

---

## ✨ Features

| Feature | Description |
|---------|-------------|
| **Type-Safe Generics** | Works with any data model `<T>` — no more `Map<String, dynamic>` |
| **Synchronized Scrolling** | Header and body scroll together seamlessly |
| **Sorting** | Multi-state column sorting (ascending ↔ descending ↔ none) |
| **Selection** | Single or multiple row selection with checkboxes |
| **Inline Editing** | Click-to-edit cells with auto-save |
| **Column Reordering** | Drag-and-drop columns, drop on empty space to move to last |
| **Column Resizing** | Drag header edges to resize columns with min/max constraints and width persistence |
| **Auto-Fit Columns** | Double-tap resize handle to auto-fit, with custom override callback |
| **Stretch Last Column** | Last column fills remaining space when all columns are fixed |
| **Drag Selection** | Mouse drag to select row ranges with auto-scroll and a configurable rubber band rectangle (Finder/Explorer-style marquee) |
| **Merged Rows** | Group rows with custom merged content |
| **Hover Buttons** | Action buttons on row hover |
| **Dynamic Row Heights** | Support for variable height rows |
| **Smart Tooltips** | Text, widget, and whole-row tooltips, anchored beside the widget or beside the cursor |
| **Dim Rows** | Style inactive rows differently |
| **Scale / Zoom** | Ctrl/Cmd+wheel zoom with platform-aware modifier key, scroll-safe physics, automatic position correction, and optional `blockModifierScroll` control |
| **Deep Theming** | 8 nested theme classes for complete customization |
| **Minimal Dependencies** | Only [`just_tooltip`](https://pub.dev/packages/just_tooltip) and [`flutter_checkbox`](https://pub.dev/packages/flutter_checkbox) |

---

## 📦 Installation

```yaml
dependencies:
  flutter_table_plus: ^2.16.1
```

```bash
flutter pub get
```

---

## 🚀 Quick Start

### 1. Define Your Data Model

```dart
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

```dart
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);
    });
  },
)
```

### 3. Persist Column Widths

Save and restore user-resized column widths across sessions:

```dart
FlutterTablePlus<User>(
  columns: columns.build(),
  data: users,
  rowId: (user) => user.id,
  resizable: true,

// Restore saved widths (reacts to changes — safe with Riverpod watch)
  initialResizedWidths: savedWidths, // e.g. {'name': 200, 'email': 150}

// Save widths when user resizes
  onColumnResized: (columnKey, newWidth) {
    savedWidths[columnKey] = newWidth;
    // Persist to DB / SharedPreferences / etc.
  },
)
```

---

## 💡 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

```dart
// 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

| Guide | Description |
|-------|-------------|
| [Features Guide](docs/FEATURES.md) | Sorting, Selection, Editing, Merged Rows, Hover Buttons, and more |
| [Theming Guide](docs/THEMING.md) | Complete theming reference with all 8 theme classes |
| [Migration Guide](docs/MIGRATION.md) | Migrating from v1.x (`Map`) to v2.x (`Generic<T>`) |

---

## 🔗 Links

- [API Reference (pub.dev)](https://pub.dev/documentation/flutter_table_plus/latest/)
- [GitHub Repository](https://github.com/kihyun1998/flutter_table_plus)
- [Example App](https://github.com/kihyun1998/flutter_table_plus/tree/main/example)
- [Changelog](https://github.com/kihyun1998/flutter_table_plus/blob/main/CHANGELOG.md)

---

## 📄 License

MIT License — see [LICENSE](LICENSE) for details.

flutter_table_plus

flutter_table_plus Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

flutter_table_plus

flutter_table_plus Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README