flutterx_table 1.2.16-dev

flutterx_table: ^1.2.16-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, label: 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<String> _selection = LiveSet();
  late final LiveSelectableData<num> _singleSelection =
      LiveSelectableData(items: ImmutableLiveData(_allItems), keyOf: (item) => item.toString());
  final LiveList<TableColumn> _columns = LiveList(source: columns.toList());

  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),
          crossAxisAlignment: CrossAxisAlignment.stretch,
          builder: (context, items, loading) => Flexible(
                child: Material(
                    child: AutoScrollView(
                        child: LiveDataBuilder<List<TableColumn>>(
                            data: _columns,
                            builder: (context, columns) => 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<int>(
                                      keyOf: (item) => item.toString(),
                                      multipleSelection: _selection,
                                      singleSelection: _singleSelection.selectedId,
                                      onTapBehaviour: TableRowOnTapBehaviour.singleSelectToggle),
                                  TableActionsModule<int>(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<int>(
                                      sortOptions: _sortOptions, sortClearable: false, filterOptions: _filterOptions),
                                  ColumnSwapModule<int>(onSwap: (column, oldIndex, newIndex) {
                                    _columns.apply((data) {
                                      final item = data.removeAt(oldIndex);
                                      data.insert(newIndex > oldIndex ? newIndex - 1 : newIndex, item);
                                      return true;
                                    });
                                  }),
                                ],
                                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)));
                                })))),
              )));
}