flutterx_table 1.0.0-dev

Flutter high customizable Table full of features including selection, sorting, actions, etc...

example/lib/main.dart

// ignore_for_file: public_member_api_docs

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 LiveList<int> _items = LiveList(source: List.generate(16, (index) => index + 1));
  final LiveSet<int> _selection = LiveSet();
  final ScrollController _controllerX = ScrollController();
  final ScrollController _controllerY = ScrollController();

  @override
  void registerObservers() => _sortOptions.observe(
      this, (value) => _items.sort(value == null ? null : (a, b) => value.order == SortOrder.asc ? a - b : b - a));

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: const Text('Table example')),
      body: Center(
          child: Padding(
              padding: const EdgeInsets.all(32),
              child: Card(
                  child: ScrollableViewScrollbar.both(
                      controllerX: _controllerX,
                      controllerY: _controllerY,
                      child: IntrinsicWidth(
                          child: ScrollableView(
                              controllerX: _controllerX,
                              controllerY: _controllerY,
                              child: LiveDataBuilder<List<int>>(
                                  data: _items,
                                  builder: (context, items) =>
                                      // DataTable(
                                      //     columns: columns.map((e) => DataColumn(label: e.child!)).toList(growable: false),
                                      //     rows: items.mapIndexed((index, item) {
                                      //       final color = Colors.primaries[index % Colors.primaries.length];
                                      //       return DataRow(
                                      //           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 * 1.5),
                                          actions: TableActions<int, String>(
                                              actions: const [
                                                TableAction(actionId: 'DELETE', child: Icon(Icons.delete)),
                                                TableAction(actionId: 'DUPLICATE', child: 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)));
                                          })))))))));
}