flutterx_table 1.2.6-dev

flutterx_table: ^1.2.6-dev copied to clipboard

example/lib/main.dart

import 'dart:math';

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutterx_live_data/flutterx_live_data.dart';
import 'package:flutterx_table/flutterx_table.dart';

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutterx Table Demo',
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: const TableExample());
}

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

  @override
  State<TableExample> createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> {
  static const letters = 'ABCDE'; // FGHIKLMNOPQRSTUVWXYZ
  static final columns = letters
      .split('')
      .map((id) => TableColumn(id: id, sortable: true, filterable: true, heading: Text(id)))
      .toList(growable: false);
  static final List<int> _allItems = List.generate(189, (index) => index + 1);
  final MutableLiveData<PageInfo> _pageInfo =
      MutableLiveData(value: PageInfo.of(pageSize: 10, itemsCount: _allItems.length));
  final MutableLiveData<FilterOptions?> _filterOptions = MutableLiveData();
  final MutableLiveData<SortOptions?> _sortOptions = MutableLiveData();
  final LiveSet<int> _selection = LiveSet();

  Future<PagedList<int>> _computeItems(PageInfo page, FilterOptions? filter, SortOptions? sort) async {
    await Future.delayed(const Duration(milliseconds: 10));
    final result = _allItems
        .where((item) => filter == null || '${filter.columnId}$item'.toLowerCase().contains(filter.query.toLowerCase()))
        .sorted((sort?.order ?? SortOrder.desc).comparator);
    page = page.copyWith(itemsCount: result.length);
    final end = min(page.endIndex, result.length);
    return PagedList(pageInfo: page, items: result.sublist(min(page.startIndex, end), end));
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: const Text('Table example'), scrolledUnderElevation: 0),
      body: Padding(padding: const EdgeInsets.all(32), child: _buildTable()));

  Widget _buildTable() => Card(
      clipBehavior: Clip.antiAlias,
      child: ContentTableBuilder<int>(
          pageInfo: _pageInfo,
          filterOptions: _filterOptions,
          sortOptions: _sortOptions,
          itemsBuilder: _computeItems,
          updateDelay: const Duration(milliseconds: 100),
          builder: (context, items, loading) => Flexible(
                child: Material(
                    child: AutoScrollView(
                        child: XRawTable<int>(
                            columns: columns,
                            items: items,
                            defaultColumnWidth: const FixedColumnWidth(kMinInteractiveDimension * 3),
                            border: const TableBorder(
                                horizontalInside: BorderSide(color: Colors.black38, width: .1),
                                verticalInside: BorderSide(color: Colors.black38, width: .1),
                                bottom: BorderSide(color: Colors.black54, width: .1)),
                            modules: [
                              TableSelectionModule(primaryKey: (item) => item, selection: _selection),
                              TableActionsModule(actions: [
                                TableAction<int>(icon: const Icon(Icons.delete), onAction: items.remove),
                                TableAction<int>(
                                    icon: const Icon(Icons.copy), onAction: (item) => items.insert(item, item)),
                              ]),
                              TableSortFilterModule(
                                  sortOptions: _sortOptions, sortClearable: false, filterOptions: _filterOptions),
                            ],
                            placeholder: (context) => const Center(child: Text('NO ELEMENT')),
                            rowBuilder: (context, index, item) {
                              final color = Colors.primaries[index % Colors.primaries.length];
                              return List.generate(
                                  columns.length,
                                  (col) =>
                                      Text('${columns[col].id.toUpperCase()} $item', style: TextStyle(color: color)));
                            }))),
              )));
}