HyperTable

pub package License: MIT

HyperTable is a Flutter data grid focused on large datasets, interactive table workflows, and production-grade customization.

It combines virtual scrolling, frozen columns, sorting, filtering, pagination, inline editing, tree data, export utilities, and customizable theming in a single package with no external runtime dependencies.

Screenshots

Desktop Basic Desktop Editing Desktop Tree Grid Mobile Basic Mobile Horizontal Sync Mobile Editing

Installation

dependencies:
  hyper_table: ^0.1.0

flutter pub get

Core Capabilities

  • Virtualized rendering for large row counts
  • Frozen columns on left and right
  • Column sorting (single and multi-sort)
  • Column filtering and global search
  • Selection modes (none/single/multiple)
  • Inline cell editing with validation
  • Tree grid support
  • Column resizing and visibility control
  • Client-side and server-side pagination
  • Summary row aggregations
  • CSV export and clipboard copy
  • Theming and style callbacks

Quick Start

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

class EmployeeGridPage extends StatefulWidget {
  const EmployeeGridPage({super.key});

  @override
  State<EmployeeGridPage> createState() => _EmployeeGridPageState();
}

class _EmployeeGridPageState extends State<EmployeeGridPage> {
  late final HyperTableController _controller;

  @override
  void initState() {
    super.initState();

    _controller = HyperTableController(
      columns: const [
        HyperColumn(
          name: 'id',
          title: 'ID',
          width: 80,
          freeze: FreezePosition.left,
          sortable: true,
          filterable: true,
        ),
        HyperColumn(
          name: 'name',
          title: 'Name',
          width: 180,
          editable: true,
          editorType: EditorType.text,
        ),
        HyperColumn(
          name: 'department',
          title: 'Department',
          width: 150,
          editable: true,
          editorType: EditorType.dropdown,
          dropdownOptions: ['Engineering', 'Design', 'Product', 'Sales'],
        ),
        HyperColumn(
          name: 'salary',
          title: 'Salary',
          width: 140,
          type: ColumnType.currency,
          editable: true,
          editorType: EditorType.number,
          summary: SummaryType.sum,
        ),
        HyperColumn(
          name: 'active',
          title: 'Active',
          width: 100,
          type: ColumnType.boolean,
        ),
      ],
      dataSource: LocalDataSource([
        {'id': 1, 'name': 'Alice', 'department': 'Engineering', 'salary': 92000, 'active': true},
        {'id': 2, 'name': 'Bob', 'department': 'Design', 'salary': 78000, 'active': true},
        {'id': 3, 'name': 'Charlie', 'department': 'Product', 'salary': 103000, 'active': false},
      ]),
      config: HyperTableConfig(
        selectionMode: SelectionMode.multiple,
        showCheckboxColumn: true,
        filterMode: FilterMode.row,
        multiSort: true,
        paginationMode: PaginationMode.clientSide,
        pageSize: 20,
        editingMode: EditingMode.tapToEdit,
        showSummaryRow: true,
        allowColumnResize: true,
        showSearchBar: true,
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Employees')),
      body: SafeArea(
        child: HyperTable(controller: _controller),
      ),
    );
  }
}

Data Sources

Local data source

Use LocalDataSource for in-memory list data.

final controller = HyperTableController(
  columns: columns,
  dataSource: LocalDataSource(data),
);

Async/server data source

Use AsyncDataSource when sorting/filtering/pagination should be handled on the backend.

final dataSource = AsyncDataSource(
  fetcher: (request) async {
    // request.page, request.pageSize, request.sorts, request.filters, request.searchQuery
    final response = await myApi.fetchGridData(request);

    return AsyncDataResult(
      rows: response.rows,
      totalCount: response.totalCount,
    );
  },
);

final controller = HyperTableController(
  columns: columns,
  dataSource: dataSource,
  config: const HyperTableConfig(
    paginationMode: PaginationMode.serverSide,
    pageSize: 50,
    filterMode: FilterMode.row,
  ),
);

Column Definition

HyperColumn supports table semantics and customization per column.

Common options:

  • name, title, type
  • width, minWidth, maxWidth, sizeMode
  • freeze (none, left, right)
  • sortable, filterable, resizable, reorderable, visible
  • editable, editorType, validator, dropdownOptions
  • summary, summaryCalculator
  • formatter, cellBuilder, headerBuilder, cellStyleCallback

Configuration

HyperTableConfig controls behavior, layout, and callbacks.

Key groups:

  • Dimensions: rowHeight, headerHeight, filterRowHeight, footerHeight
  • Selection: selectionMode, showCheckboxColumn
  • Filtering/Sorting: filterMode, multiSort
  • Pagination: paginationMode, pageSize, pageSizeOptions
  • Editing: editingMode
  • Feature flags: showHeader, showFooter, showSummaryRow, allowColumnResize, showSearchBar, showContextMenu
  • Callbacks: onRowTap, onRowDoubleTap, onSelectionChanged, onCellValueChanged, rowStyleCallback, contextMenuBuilder
  • Placeholders: emptyWidget, loadingWidget, errorWidget, noDataText

Controller Operations

Useful runtime methods on HyperTableController:

  • Sorting: sort, clearSort
  • Filtering/search: setFilter, removeFilter, clearFilters, search
  • Selection: selectRow, selectAll, deselectAll
  • Pagination: goToPage, nextPage, previousPage, firstPage, lastPage
  • Columns: resizeColumn, setColumnVisibility, reorderColumn
  • Editing/data updates: updateCellValue, setActiveCell, clearActiveCell, setData, refresh
  • Tree: toggleRowExpanded

Tree Grid

Tree data is supported via hierarchical rows (parentId, depth metadata in row model). Expand/collapse is controlled by the table and can also be triggered programmatically with toggleRowExpanded.

Styling and Theming

Use HyperTableTheme and HyperTableThemeData for full visual customization.

You can also apply conditional styles dynamically:

  • Row-level: rowStyleCallback
  • Cell-level: cellStyleCallback on HyperColumn

Export

Built-in export utilities:

  • CSV export via csv_exporter.dart
  • Clipboard copy via clipboard_helper.dart

Performance Notes

  • Prefer fixed row heights and reasonable column widths for predictable layout.
  • Use server-side mode for very large remote datasets.
  • Keep custom cell builders lightweight to preserve smooth scrolling.
  • Tune overscanRowCount in HyperTableConfig if needed.

Example App

The repository includes a full example app under example/ with:

  • basic table
  • editable grid
  • large dataset
  • server-side data loading
  • tree grid

Run it locally:

cd example
flutter run

Public API Entry

Import everything through:

import 'package:hyper_table/hyper_table.dart';

☕ Support

If this package saves you time, consider buying me a coffee!

Buy Me A Coffee

License

MIT License. See LICENSE.

Libraries

hyper_table