HyperTable #

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 #

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!

License #

MIT License. See LICENSE.