hyper_table 0.1.0

High-performance Flutter data grid with virtual scrolling, frozen columns, sorting, filtering, editing, tree data, and synchronized section scrolling.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'basic_example.dart';
import 'editable_grid_example.dart';
import 'large_dataset_example.dart';
import 'server_side_example.dart';
import 'tree_grid_example.dart';

void main() => runApp(const HyperTableExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HyperTable Examples',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue, useMaterial3: true),
      home: const ExampleHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HyperTable Examples'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            _ExampleCard(
              icon: Icons.table_chart,
              title: 'Basic Example',
              subtitle:
                  'Sorting, filtering, selection, pagination, search, export',
              color: Colors.blue,
              onTap: () => _navigate(context, const BasicExample()),
            ),
            _ExampleCard(
              icon: Icons.speed,
              title: '100K Rows Performance',
              subtitle: 'Virtual scrolling with 100,000 rows at 60fps',
              color: Colors.red,
              onTap: () => _navigate(context, const LargeDatasetExample()),
            ),
            _ExampleCard(
              icon: Icons.cloud,
              title: 'Server-Side Data',
              subtitle: 'Async data fetching with server-side sort/filter/page',
              color: Colors.green,
              onTap: () => _navigate(context, const ServerSideExample()),
            ),
            _ExampleCard(
              icon: Icons.edit,
              title: 'Editable Grid',
              subtitle: 'Inline editing with validation',
              color: Colors.orange,
              onTap: () => _navigate(context, const EditableGridExample()),
            ),
            _ExampleCard(
              icon: Icons.account_tree,
              title: 'Tree Grid',
              subtitle: 'Hierarchical data with expand/collapse',
              color: Colors.purple,
              onTap: () => _navigate(context, const TreeGridExample()),
            ),
          ],
        ),
      ),
    );
  }

  void _navigate(BuildContext context, Widget page) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => page));
  }
}

class _ExampleCard extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final Color color;
  final VoidCallback onTap;

  const _ExampleCard({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.color,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      child: ListTile(
        leading: CircleAvatar(
          backgroundColor: color.withValues(alpha: 0.1),
          child: Icon(icon, color: color),
        ),
        title: Text(title, style: const TextStyle(fontWeight: FontWeight.w600)),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.chevron_right),
        onTap: onTap,
      ),
    );
  }
}