[FirestoreDataTable] update?

[Patrick386]

When is there any further update on the FirestoreDataTable?

[rrousselGit]

What update are you expecting?

[rrousselGit]

As in you want to show a value that is not inside the document?

There is no support for that at the moment. You could use FirestoreQueryBuilder to make your own table

[Patrick386]

Yes, I would like to, but I can't.
Cell: When the value is displayed, it must be supported as a widget (display format support).
DataTable are used a lot, so they should be able to provide a variety of features.

[Patrick386]

I made some minor modifications to the FirebaseDatatable source.
This makes it easy to manipulate data and utilize cells.

FirebaseDatatableV2

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutterfire_ui/firestore.dart';


class FirebaseDatatableV2 extends StatefulWidget {
  const FirebaseDatatableV2({Key? key,
    required this.query,
    required this.columnLabels,
    required this.dataCells,
    this.header,
    this.onError,
    this.canDeleteItems = true,
    this.actions,
    this.sortColumnIndex,
    this.sortAscending = true,
    this.dataRowHeight = kMinInteractiveDimension,
    this.headingRowHeight = 56.0,
    this.horizontalMargin = 24.0,
    this.columnSpacing = 56.0,
    this.showCheckboxColumn = true,
    this.showFirstLastButtons = false,
    this.onPageChanged,
    this.rowsPerPage = 10,
    this.dragStartBehavior = DragStartBehavior.start,
    this.arrowHeadColor,
    this.checkboxHorizontalMargin,
  })  : ///assert(columnLabels is LinkedHashMap,'only LinkedHashMap are supported as header' ), // using an assert instead of a type because `<A, B>{}` types as `Map` but is an instance of `LinkedHashMap`
        super(key: key);
  /// The firestore query that will be displayed
  final Query<Object?> query;

  /// Whether documents can be removed from firestore using the table.
  final bool canDeleteItems;

  /// The columns and their labels based on the property name in Firestore
  //final Map<String, Widget> columnLabels;
  /// The configuration and labels for the columns in the table.
  final List<DataColumn> columnLabels;
  final List<DataCell> Function(Map<String, Object?> data)dataCells;




  /// When specified, will be called whenever an interaction with Firestore failed,
  /// when as when trying to delete an item without the proper rights.
  final void Function(Object error, StackTrace stackTrace)? onError;

  /// The table card's optional header.
  ///
  /// This is typically a [Text] widget, but can also be a [Row] of
  /// [TextButton]s. To show icon buttons at the top end side of the table with
  /// a header, set the [actions] property.
  ///
  /// If items in the table are selectable, then, when the selection is not
  /// empty, the header is replaced by a count of the selected items. The
  /// [actions] are still visible when items are selected.
  final Widget? header;

  /// Icon buttons to show at the top end side of the table. The [header] must
  /// not be null to show the actions.
  ///
  /// Typically, the exact actions included in this list will vary based on
  /// whether any rows are selected or not.
  ///
  /// These should be size 24.0 with default padding (8.0).
  final List<Widget>? actions;

  /// Invoked when the user switches to another page.
  ///
  /// The value is the index of the first row on the currently displayed page.
  final void Function(int page)? onPageChanged;

  /// The height of each row (excluding the row that contains column headings).
  ///
  /// This value is optional and defaults to kMinInteractiveDimension if not
  /// specified.
  final double dataRowHeight;

  /// The current primary sort key's column.
  ///
  /// See [DataTable.sortColumnIndex].
  final int? sortColumnIndex;

  /// Whether the column mentioned in [sortColumnIndex], if any, is sorted
  /// in ascending order.
  ///
  /// See [DataTable.sortAscending].
  final bool sortAscending;

  /// The height of the heading row.
  ///
  /// This value is optional and defaults to 56.0 if not specified.
  final double headingRowHeight;

  /// The horizontal margin between the edges of the table and the content
  /// in the first and last cells of each row.
  ///
  /// When a checkbox is displayed, it is also the margin between the checkbox
  /// the content in the first data column.
  ///
  /// This value defaults to 24.0 to adhere to the Material Design specifications.
  ///
  /// If [checkboxHorizontalMargin] is null, then [horizontalMargin] is also the
  /// margin between the edge of the table and the checkbox, as well as the
  /// margin between the checkbox and the content in the first data column.
  final double horizontalMargin;

  /// The horizontal margin between the contents of each data column.
  ///
  /// This value defaults to 56.0 to adhere to the Material Design specifications.
  final double columnSpacing;

  /// {@macro flutter.material.dataTable.showCheckboxColumn}
  final bool showCheckboxColumn;

  /// Flag to display the pagination buttons to go to the first and last pages.

  final bool showFirstLastButtons;

  /// The number of rows to show on each page.
  ///
  /// Defaults to 10
  final int rowsPerPage;

  /// {@macro flutter.widgets.scrollable.dragStartBehavior}
  final DragStartBehavior dragStartBehavior;

  /// Defines the color of the arrow heads in the footer.
  final Color? arrowHeadColor;

  /// Horizontal margin around the checkbox, if it is displayed.
  ///
  /// If null, then [horizontalMargin] is used as the margin between the edge
  /// of the table and the checkbox, as well as the margin between the checkbox
  /// and the content in the first data column. This value defaults to 24.0.

  final double? checkboxHorizontalMargin;
  @override
  _FirebaseDatatableV2State createState() => _FirebaseDatatableV2State();
}

class _FirebaseDatatableV2State extends State<FirebaseDatatableV2> {
  late Query<Map<String, Object?>> _query;

  late final source = _Source(
    //getHeaders: () => widget.columnLabels,
    getDataCells: (data)=> widget.dataCells(data),
    getOnError: () => widget.onError,
    selectionEnabled: selectionEnabled,
    rowsPerPage: widget.rowsPerPage,
    //onEditItem: onEditItem,
  );

  bool get selectionEnabled => widget.canDeleteItems;

  @override
  void initState() {
    super.initState();
    _query = _unwrapQuery(widget.query);
  }

  @override
  void didUpdateWidget(covariant FirebaseDatatableV2 oldWidget) {
    super.didUpdateWidget(oldWidget);
    source.selectionEnabled = selectionEnabled;
    if (widget.query != oldWidget.query) {
      _query = _unwrapQuery(widget.query);
    }
  }

  Query<Map<String, Object?>> _unwrapQuery(Query<Object?> query) {
    return query.withConverter<Map<String, Object?>>(
      fromFirestore: (s, _) => s.data()!,
      toFirestore: (value, _) => value,
    );
  }

  @override
  Widget build(BuildContext context) {
    return FirestoreQueryBuilder<Map<String, Object?>>(
      query: _query,
      builder: ( context, snapshot, child) {
        source.setFromSnapshot(snapshot);

        return AnimatedBuilder(
          animation: source,
          builder: ( context,child) {
            final actions = [
              ...?widget.actions,
              if (widget.canDeleteItems && source._selectedRowIds.isNotEmpty)
                IconButton(
                  icon: const Icon(Icons.delete),
                  onPressed: source.onDeleteSelectedItems,
                ),
            ];
            return PaginatedDataTable(
              source: source,
              onSelectAll: selectionEnabled ? source.onSelectAll : null,
              onPageChanged: widget.onPageChanged,
              showCheckboxColumn: widget.showCheckboxColumn,
              arrowHeadColor: widget.arrowHeadColor,
              checkboxHorizontalMargin: widget.checkboxHorizontalMargin,
              columnSpacing: widget.columnSpacing,
              dataRowHeight: widget.dataRowHeight,
              dragStartBehavior: widget.dragStartBehavior,
              headingRowHeight: widget.headingRowHeight,
              horizontalMargin: widget.horizontalMargin,
              rowsPerPage: widget.rowsPerPage,
              showFirstLastButtons: widget.showFirstLastButtons,
              sortAscending: widget.sortAscending,
              sortColumnIndex: widget.sortColumnIndex,
              header:
              actions.isEmpty ? null : (widget.header ?? const SizedBox()),
              actions: actions.isEmpty ? null : actions,
              // Head label
              columns: widget.columnLabels,
            );
          },
        );
      },
    );
  }

  /*
  Future<void> onEditItem(
      QueryDocumentSnapshot<Map<String, Object?>> snapshot,
      Object? value,
      String propertyName,
      ) async {
    final result = await showDialog<_Edit?>(
      context: context,
      builder: (context) {
        //var formState = _initialFormStateOfValue(value);

        return StatefulBuilder(
          builder: (context, setState) {
            // void onTypeChanged(_PropertyType? newType) {
            //   setState(
            //         () {
            //       // Delaying dispose as otherwise the next build
            //       // will throw because it'll call "removeListener"
            //       Future.delayed(
            //         const Duration(milliseconds: 10),
            //         formState.dispose,
            //       );
            //       formState = _initialFormStateForType(newType);
            //     },
            //   );
            // }
            //
            // void onFormChange(_FormState newFormState) {
            //   setState(() => formState = newFormState);
            // }

            return Dialog(
              child: Padding(
                padding:
                const EdgeInsets.symmetric(vertical: 16, horizontal: 10),
                child: DropdownButtonHideUnderline(
                  child: Theme(
                    data: Theme.of(context).copyWith(
                      inputDecorationTheme: const InputDecorationTheme(
                        border: OutlineInputBorder(),
                        isDense: true,
                      ),
                    ),
                    // Make sure that the modal is as small as possible, yet
                    // allow the button bar to fill the width
                    child: IntrinsicWidth(
                      child: Column(
                        // Ensures that switching between type correctly
                        // applies "autoFocus" to the new inputs
                        //key: ObjectKey(formState.type),
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          // _PropertyTypeDropdown(
                          //   formState: formState,
                          //   onTypeChanged: onTypeChanged,
                          // ),
                          // const SizedBox(height: 8),
                          // _PropertyTypeForm(
                          //   formState: formState,
                          //   onFormStateChange: onFormChange,
                          // ),
                          // const SizedBox(height: 10),
                          // _EditModalButtonBar(
                          //   formState: formState,
                          //   reference: snapshot.reference,
                          // ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        );
      },
    );

    if (result == null) return;

    await snapshot.reference.update({propertyName: result.newValue});
  }
  */
}
/// A data holder class to differentiate setting a property to null from
/// not modifying the property at all.
class _Edit {
  _Edit(this.newValue);
  final Object? newValue;
}

class _Source extends DataTableSource {
  _Source( {
    required this.getDataCells,
    required this.getOnError,
    required bool selectionEnabled,
    required int rowsPerPage,
    //required this.onEditItem,
  })  : _selectionEnabled = selectionEnabled,
        _rowsPerpage = rowsPerPage;

  final List<DataCell> Function(Map<String, Object?> data) getDataCells;

  // final void Function(
  //     QueryDocumentSnapshot<Map<String, Object?>> snapshot,
  //     Object? value,
  //     String propertyName,
  //     ) onEditItem;

  int _rowsPerpage;
  int get rowsPerPage => _rowsPerpage;
  set rowsPerPage(int value) {
    if (value != _rowsPerpage) {
      _rowsPerpage = value;
      notifyListeners();
    }
  }

  bool _selectionEnabled;
  bool get selectionEnabled => _selectionEnabled;
  set selectionEnabled(bool value) {
    if (value != _selectionEnabled) {
      _selectionEnabled = value;
      notifyListeners();
    }
  }

  //final Map<String, Widget> Function() getHeaders;
  final void Function(Object error, StackTrace stackTrace)? Function()
  getOnError;

  var _selectedRowIds = <String>{};

  @override
  int get selectedRowCount => _selectedRowIds.length;

  @override
  bool get isRowCountApproximate =>
      _previousSnapshot!.isFetching || _previousSnapshot!.hasMore;

  @override
  int get rowCount {
    // Emitting an extra item during load or before reaching the end
    // allows the DataTable to show a spinner during load & let the user
    // navigate to next page
    if (_previousSnapshot!.isFetching || _previousSnapshot!.hasMore) {
      return _previousSnapshot!.docs.length + rowsPerPage;
    }

    return _previousSnapshot!.docs.length;
  }

  @override
  DataRow? getRow(int index) {
    if (index >= _previousSnapshot!.docs.length) {
      _previousSnapshot!.fetchMore();
    }
    if (index >= _previousSnapshot!.docs.length) return null;

    final doc = _previousSnapshot!.docs[index];
    final Map<String, Object?> data = doc.data();

    return DataRow(
      selected: _selectedRowIds.contains(doc.id),
      onSelectChanged: selectionEnabled
          ? (selected) {
        if (selected == null) return;

        if ((selected && _selectedRowIds.add(doc.id)) ||
            (!selected && _selectedRowIds.remove(doc.id))) {
          notifyListeners();
        }
      }
          : null,
      // cells: [
      //   for (final head in getHeaders().keys)
      //     DataCell(_ValueView(data[head]),
      //       onTap: () {
      //         onEditItem(
      //           doc,
      //           data[head],
      //           head,
      //         );
      //       },
      //     ),
      // ],
      cells: getDataCells(data)
    );
  }

  FirestoreQueryBuilderSnapshot<Map<String, Object?>>? _previousSnapshot;

  void setFromSnapshot(FirestoreQueryBuilderSnapshot<Map<String, Object?>> snapshot) {
    if (snapshot == _previousSnapshot) return;

    // Try to preserve the selection status when the snapshot got updated,
    // such as when more content got loaded.
    final wereAllItemsSelected =
        _previousSnapshot?.docs.length == _selectedRowIds.length &&
            _previousSnapshot!.docs.isNotEmpty;

    _previousSnapshot = snapshot;
    if (wereAllItemsSelected) onSelectAll(true);
    notifyListeners();
  }

  void onSelectAll(bool? selected) {
    if (selected == null) return;

    if (selected) {
      _selectedRowIds.addAll(_previousSnapshot!.docs.map((e) => e.id));
    } else {
      _selectedRowIds.clear();
    }
    notifyListeners();
  }

  void onDeleteSelectedItems() {
    for (final doc in _previousSnapshot!.docs) {
      if (_selectedRowIds.contains(doc.id)) {
        doc.reference.delete().then<void>(
              (value) => _selectedRowIds.remove(doc.id),
          onError: getOnError(),
        );
      }
    }
  }
}
/*
class _ValueView extends StatelessWidget {
  const _ValueView(this.value, {Key? key}) : super(key: key);

  final Object? value;

  @override
  Widget build(BuildContext context) {
    final localizations = FlutterFireUILocalizations.labelsOf(context);
    final value = this.value;
    if (value == null) {
      return Text('null', style: Theme.of(context).textTheme.caption);
    } else if (value is Timestamp) {
      return Text(value.toDate().toString());
    } else if (value is DocumentReference) {
      return Text('/${value.path}');
    } else if (value is GeoPoint) {
      final latitudeLabel = value.latitude < 0
          ? localizations.southInitialLabel
          : localizations.northInitialLabel;
      final longitudeLabel = value.longitude < 0
          ? localizations.westInitialLabel
          : localizations.eastInitialLabel;

      return Text(
        '[${value.latitude.abs()}° $latitudeLabel, '
            '${value.longitude.abs()}° $longitudeLabel]',
      );
    } else {
      return Text(value.toString());
    }
  }
}

 */

Screen Ui:

class FullDataProductTabScreen extends ConsumerStatefulWidget {
  const FullDataProductTabScreen({Key? key}) : super(key: key);

  @override
  _FullDataProductTabScreenState createState() =>
      _FullDataProductTabScreenState();
}

class _FullDataProductTabScreenState
    extends ConsumerState<FullDataProductTabScreen> {
  @override
  void initState() {
    super.initState();
  }

  late ProductNotifier ctr;

https://user-images.githubusercontent.com/49754877/149474175-f332ec51-b70a-4464-8e63-85b91d45b12f.mp4


  @override
  Widget build(BuildContext context) {
    final ProductFilterState _filter = ref.watch(productFilterNotifier);
    //ProductState sts = ref.watch(productNotifierProvider);
    ctr = ref.read(productNotifierProvider.notifier);

    //if (sts.isLoading) {
    //  return LoadingMessage();
    //}

    return FirebaseDatatableV2(
        query: productQuery(_filter),
        columnLabels: _getDataColumn(context),
        dataCells: (Map<String, Object?> data) => _dataCells(data));


  }

  _dataCells(dataMap) {
    ProductData data = ProductData.fromJson(dataMap);
    return <DataCell>[
      DataCell(Container(
        color: Colors.transparent,
        padding: const EdgeInsets.only(top: 4.0, bottom: 4.0, right: 16.0),
        child: InkWell(
          splashColor: Colors.blue.withAlpha(30),
          hoverColor: Colors.transparent,
          onTap: () {
            CloudStorageImageDialog(
                context: context,
                currentImage: data.futureImage,
                onSelectImage: (String imageUrl) =>
                    ctr.updateProduct(data.copyWith(futureImage: imageUrl)),
                onDelete: (bool? v) =>
                    ctr.updateProduct(data.copyWith(futureImage: '')));
          },
          child: Container(
            // decoration: const BoxDecoration(
            //   border: Border(top: BorderSide(color: Colors.grey,width: 0.5),bottom: BorderSide(color: Colors.grey,width: 0.5))
            // ),
            width: 70,
            height: 70,
            padding: EdgeInsets.only(top: 2.0, bottom: 2.0),
            child: LoadingImage(url: data.futureImage),
          ),
        ),
      )),
      DataCell(Text(
        data.name,
        style: TextStyles.title14,
      )),
      DataCell(Container(
        child: TextField(
          decoration: InputDecoration(
            labelText: data.style,
            border: OutlineInputBorder(),
          ),
          onChanged: (String value) {
            ctr.updateProduct(data.copyWith(style: value.toUpperCase()));
          },
        ),
      )),
      DataCell(
        PopupMenuButton(
            offset: const Offset(0, 30),

            padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
            color: Colors.black87,
            itemBuilder: (BuildContext context) => [
                  PopupMenuItem(
                    child: Text('First',style: TextStyles.title14.copyWith(color: Colors.white70),),
                    value: 1,
                  ),
                   PopupMenuItem(
                    child: Text('Second',style:TextStyles.title14.copyWith(color: Colors.white70) ),
                    value: 2,
                  )
                ]),

      ),
      DataCell(Switch(
        value: data.baseCalculation,
        onChanged: (bool v) {
          ctr.updateProduct(data.copyWith(baseCalculation: v));
        },
      )),
    ];
  }

  List<DataColumn> _getDataColumn(BuildContext context) {
    List<DataColumn> _dataColumn = [];
    _dataColumn = [
      DataColumn(label: Text('')), // Image
      DataColumn(label: Text('Product Name')),
      DataColumn(label: Text('Style')),
      DataColumn(label: Text('Category')),
      DataColumn(label: Text('')),
    ];
    return _dataColumn;
  }

}

[Patrick386]

dashboard.-.Chrome.2022-01-14.17-03-52.mp4

[Patrick386]

How can I notify the PaginatedDataTable when there is a change in the _dataCells(dataMap)?