flutterx_table 1.0.1

flutterx_table: ^1.0.1 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({Key? key}) : super(key: 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({Key? key}) : super(key: key);

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

class _TableExampleState extends State<TableExample> with StateObserver {
  static const letters = 'ABCDEFGHIKLMNOP'; // QRSTUVWXYZ
  static final columns = letters.split('').map((id) => TableColumn(id: id, child: Text(id))).toList(growable: false);
  final MutableLiveData<SortOptions?> _sortOptions = MutableLiveData();
  final List<int> _allItems = List.generate(200, (index) => index + 1);
  final LiveList<int> _items = LiveList();
  final LiveSet<int> _selection = LiveSet();
  final ScrollController _controllerX = ScrollController();
  final ScrollController _controllerY = ScrollController();
  final MutableLiveData<PageInfo> _pageInfo =
      MutableLiveData(initialValue: const PageInfo(page: 0, pageSize: 20, pageCount: 10));

  @override
  void registerObservers() => observe2<PageInfo, SortOptions?>(_pageInfo, _sortOptions, _computeItems);

  void _computeItems(PageInfo page, SortOptions? sort) => _items.setTo(_allItems
      .sorted((a, b) => sort?.order != SortOrder.desc ? a - b : b - a)
      .sublist(page.offset, min(page.offsetPlusLimit, _allItems.length)));

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: const Text('Table example')),
      body: Center(
          child: Padding(
              padding: const EdgeInsets.all(32),
              child: Column(mainAxisSize: MainAxisSize.min, children: [
                SizedBox(
                    height: 500,
                    child: Card(
                        child: ScrollableViewScrollbar.both(
                            controllerX: _controllerX,
                            controllerY: _controllerY,
                            child: ScrollableView(
                                controllerX: _controllerX,
                                controllerY: _controllerY,
                                child:
                                    // LiveDataBuilder<Set>(
                                    //     data: _selection,
                                    //     builder: (context, selection) => DataTable(
                                    //         sortColumnIndex: 2,
                                    //         columns: columns
                                    //             .map((e) => DataColumn(onSort: (index, ascending) {}, label: e.child!))
                                    //             .toList(growable: false),
                                    //         onSelectAll: (value) => value ?? false
                                    //             ? _selection.setTo(_items.map((item) => item))
                                    //             : _selection.clear(),
                                    //         rows: items.mapIndexed((index, item) {
                                    //           final color = Colors.primaries[index % Colors.primaries.length];
                                    //           return DataRow(
                                    //               selected: _selection.contains(item),
                                    //               onSelectChanged: (value) =>
                                    //                   value ?? false ? _selection.add(item) : _selection.remove(item),
                                    //               cells: List.generate(
                                    //                   columns.length,
                                    //                   (col) => DataCell(Padding(
                                    //                       padding: const EdgeInsets.all(8),
                                    //                       child: Text('${columns[col].id.toUpperCase()} $item',
                                    //                           style: TextStyle(color: color))))));
                                    //         }).toList(growable: false))) ??
                                    XRawTable<int>(
                                        border: const TableBorder(
                                            horizontalInside: BorderSide(color: Colors.black38, width: .1)),
                                        columns: columns,
                                        defaultColumnWidth: const FixedColumnWidth(kMinInteractiveDimension * 2),
                                        actions: TableActions<int, String>(
                                            actions: const [
                                              TableAction(actionId: 'DELETE', icon: Icon(Icons.delete)),
                                              TableAction(actionId: 'DUPLICATE', icon: Icon(Icons.copy)),
                                            ],
                                            onAction: (id, item) {
                                              switch (id) {
                                                case 'DELETE':
                                                  _items.remove(item);
                                                  break;
                                                case 'DUPLICATE':
                                                  _items.insert(item, item);
                                                  break;
                                              }
                                            }),
                                        sortOptions: _sortOptions,
                                        selection:
                                            TableSelection<int, int>(primaryKey: (item) => item, selection: _selection),
                                        items: _items,
                                        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)));
                                        }))))),
                Card(
                    margin: EdgeInsets.zero,
                    child: Padding(padding: const EdgeInsets.all(8), child: PagingIndicator(pageInfo: _pageInfo))),
              ]))));
}