flutter_table_plus 1.3.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.

---

Features

• Synchronized Scrolling: Header and body scroll horizontally in perfect sync.
• Advanced Theming: Customize headers, rows, scrollbars, and selection styles with TablePlusTheme.
• Column Sorting: Supports multi-state sorting (ascending, descending, none) with a configurable sort cycle.
• Row Selection & Editing: Enable row selection and cell editing simultaneously for flexible data interaction. Also supports double-tap and secondary-tap events on rows.
• Column Reordering: Easily reorder columns with drag-and-drop.
• Custom Cell Widgets: Render any widget inside a cell using cellBuilder for maximum flexibility.
• Safe Column Management: Use TableColumnsBuilder to define columns and manage their order without conflicts.

Installation

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

dependencies:
  flutter_table_plus: ^1.3.0

Then, run flutter pub get in your terminal.

Basic Usage

Here's a simple example of how to create a table.

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

class BasicTablePage extends StatelessWidget {
  const BasicTablePage({super.key});

  // 1. Define your columns using the builder
  final Map<String, TablePlusColumn> columns = const TableColumnsBuilder()
      .addColumn('id', TablePlusColumn(key: 'id', label: 'ID', order: 0, width: 80))
      .addColumn('name', TablePlusColumn(key: 'name', label: 'Name', order: 0, width: 150, editable: true, hintText: 'Enter name')) // Added editable and hintText
      .addColumn('department', TablePlusColumn(key: 'department', label: 'Department', order: 0, width: 200))
      .build();

  // 2. Prepare your data as a List of Maps
  final List<Map<String, dynamic>> data = const [
    {'id': 1, 'name': 'John Doe', 'department': 'Engineering'},
    {'id': 2, 'name': 'Jane Smith', 'department': 'Marketing'},
    {'id': 3, 'name': 'Peter Jones', 'department': 'Sales'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Basic Table Example')),
      body: FlutterTablePlus(
        columns: columns,
        data: data,
        isSelectable: true, // Enable selection for double-tap/secondary-tap
        onRowDoubleTap: (rowId) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Double-tapped row: $rowId'),
              duration: const Duration(seconds: 2),
            ),
          );
        },
        onRowSecondaryTap: (rowId) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Secondary-tapped row: $rowId'),
              duration: const Duration(seconds: 2),
            ),
          );
        },
        theme: const TablePlusTheme(
          headerTheme: TablePlusHeaderTheme(height: 48),
          bodyTheme: TablePlusBodyTheme(rowHeight: 48),
          editableTheme: TablePlusEditableTheme(hintStyle: TextStyle(fontStyle: FontStyle.italic, color: Colors.grey)), // Added hintStyle
        ),
      ),
    );
  }
}

Detailed 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