mahop_data_table 0.0.0-alpha.6

Collection of Flutter Widgets to display a DataTable, TreeView, TreeListView, ListView and GridView with many options, editing, advanced drag and drop support and much more.

(Last Update of this info: 26th of June 2024)

MaHop DataTable and more - What is included?

• Collection of widgets to display a DataTable, ListView and GridView with Virtual Scrolling

• With a lot of functionality build in

  • virtual scrolling even with individual row heights
  • drag and drop reorder
  • drag and drop from and to other widgets
  • sorting and filtering
  • column reorder and resize
  • saving the layout (current column width, positions and visibility) to a JSON string
  • inline edit, multiline edit
  • selection with different selection modes
  • ...
  • and much more - see demo app and features section below

• Pro Version with extended functionality

  • TreeView,
  • TreeListView (hierachical DataTable)

Demos, Sample Code and Pro Version

• See https://flutterdemo.mahop.net
• and https://flutter.mahop.net

WARNING! Status of this project is ALPHA!

This package is in ALPHA state right now! APIs, Interfaces and names will still change in future versions! Existing features are NOT testet completely.

DON'T USE FOR PRODUCTION until Version 1.0!

Screenshot of the first sample in the demo app

Contribute

• Like the project on pub.dev
• Use the code and report bugs
• You can support development buying one or more glasses of orange juice. (or cups of coffee)
  • https://www.buymeacoffee.com/mahop
• Buy a Pro license on https://flutter.mahop.net (from 150,- EURO / year)

Next Steps

• Next will be GridView
• As soon as we hit beta 1 we will create a GitHub project and start the community
• And than we will test a lot to get to version 1

Features

• Perfect virtual scrolling using flutters TwoDimensionalScrollView

  • Display a million and more rows with high performance
  • Display rows with different RowHeights

• Advanced Drag and Drop

  • Reordering (built in)
  • Multi Drag and Drop (also for reordering)
  • Drag and Drop to and from other Widgets
    • from DataTable to and from another DataTable
    • from DataTable to and from a TreeView
    • from DataTable to a Flutter DropTarget
    • from GridView to and from a ListView
    • ... and so on ...
  • Auto scrolling during drag and drop

• Column resize and reorder on DataTable and TreeListView

  • Saving the current state as JSON string
  • Applying as saved state from JSON string

• JumpTo(item) with height performance

• Selection

  • Single selection
  • CheckBox selection (mutliple items)
  • Extended selection - for Desktop with Mouse click + shift and/or ctrl keys (multiple items)
    • Extended selection can be combined with CheckBox selection

• And more to come in the next versions...

Usage

  // ----------------------------------------------
  // - Sample build function - very simple usecase
  // ----------------------------------------------
  Widget buildMhItemsView(BuildContext context) {

    // --------------------------------------------
    // - Build some sample data
    // --------------------------------------------
    final List<ExampleItem> items = [];
    for (var i = 1; i <= 100; i++) {
      items.add(ExampleItem(text: "Example Item $i", index: i));
    }

    // --------------------------------------------
    // - Build the Column definitions you need
    // --------------------------------------------
    List<MhItemsViewColumnDef<ExampleItem>> columnDefs = [];
    columnDefs.add(MhItemsViewColumnDef<ExampleItem>(id: "index", header: "Index", columnWidth: 50, getDisplayValue: (item) => item.index));
    columnDefs.add(MhItemsViewColumnDef<ExampleItem>(id: "text", header: "Text", columnWidth: 250, getDisplayValue: (item) => item.text));
    columnDefs.add(MhItemsViewColumnDef<ExampleItem>(id: "calculated", header: "Calculated", columnWidth: 250, getDisplayValue: (item) => item.index * item.index));

    // --------------------------------------------
    // - apply needed settings
    // --------------------------------------------
    final settings = MhItemsViewSettings(rowHeight: 25, headerHeight: 30, displayHeader: true);

    return MhItemsView(itemsSource: items, columnDefs: columnDefs, settings: settings),
  };

Additional information

Go to https://flutter.mahop.net to learn more about the widget, see Demos and buy a Pro Version.