Successfully loading dat and rendering table

ltx_flutter/lib/pages/table_page.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:spreadsheet_table/spreadsheet_table.dart';
+import 'package:pluto_grid/pluto_grid.dart';
 import 'package:ltx_flutter/appwrite/appwrite.dart';
 import 'package:ltx_flutter/appwrite/database_api.dart';
 import 'package:provider/provider.dart';
@@ -29,7 +30,7 @@ class _TablePageState extends State<TablePage> {
 
   loadEntries() async {
     try {
-      final value = await database.getEntries(limit: 5);
+      final value = await database.getEntries(limit: 25);
       setState(() {
         entries = value.documents;
       });
@@ -38,6 +39,116 @@ class _TablePageState extends State<TablePage> {
     }
   }
 
+  String formatDate({String format = "", String? dateISO}) {
+    final DateFormat dateFormatter = DateFormat(format);
+    final date = dateISO!.isEmpty ? DateTime.now() : DateTime.parse(dateISO);
+    return dateFormatter.format(date);
+  }
+
+  List<PlutoColumn> hourCols = List<int>.generate(24, (i) => i).map((e) {
+    var meridien = "AM";
+    var hour = 12;
+    if (e > 12) {
+      hour = e - 12;
+    } else if (e > 0) {
+      hour = e;
+    }
+    if (e > 11) {
+      meridien = "PM";
+    }
+    var hourTitle = "${hour.toString()} $meridien";
+    return PlutoColumn(
+      title: hourTitle,
+      field: "hours[$e]",
+      type: PlutoColumnType.number(),
+      width: 65,
+      enableContextMenu: false,
+      enableDropToResize: false,
+      textAlign: PlutoColumnTextAlign.center,
+      titleTextAlign: PlutoColumnTextAlign.center,
+    );
+  }).toList();
+
+  late List<PlutoColumn> columns = <PlutoColumn>[
+        PlutoColumn(
+          title: 'DATE',
+          field: 'date',
+          type: PlutoColumnType.text(),
+          readOnly: true,
+          width: 110,
+          frozen: PlutoColumnFrozen.start,
+          enableContextMenu: false,
+          enableDropToResize: false,
+          textAlign: PlutoColumnTextAlign.center,
+          titleTextAlign: PlutoColumnTextAlign.center,
+        ),
+        // PlutoColumn(
+        //   title: 'DAY',
+        //   field: 'day',
+        //   type: PlutoColumnType.text(),
+        //   readOnly: true,
+        //   width: 50,
+        //   frozen: PlutoColumnFrozen.start,
+        //   enableContextMenu: false,
+        //   enableDropToResize: false,
+        // ),
+      ] +
+      hourCols +
+      [
+        PlutoColumn(
+          title: 'Mood',
+          field: 'mood',
+          width: 60,
+          textAlign: PlutoColumnTextAlign.center,
+          type: PlutoColumnType.text(),
+          enableContextMenu: false,
+          enableDropToResize: false,
+        ),
+        PlutoColumn(
+          title: 'Comments',
+          field: 'comments',
+          type: PlutoColumnType.text(),
+          enableContextMenu: false,
+          enableDropToResize: false,
+        ),
+      ];
+
+  late List<PlutoRow> rows = entries!.map((e) {
+    var cells = {
+      'date': PlutoCell(
+        value: formatDate(
+          format: "MM/DD  E",
+          dateISO: e.data['date'],
+        ),
+      ),
+      // 'day': PlutoCell(
+      //   value: formatDate(
+      //     format: "E",
+      //     dateISO: e.data['date'],
+      //   ),
+      // ),
+      'mood': PlutoCell(value: e.data['mood']),
+      'comments': PlutoCell(value: e.data['comments']),
+    };
+    var hours = <String, PlutoCell>{};
+    for (int i = 0; i < 24; i++) {
+      hours.putIfAbsent(
+          "hours[$i]", () => PlutoCell(value: e.data['hours'][i]));
+    }
+    cells.addEntries(hours.entries);
+
+    return PlutoRow(
+      cells: cells,
+    );
+  }).toList();
+
+  /// columnGroups that can group columns can be omitted.
+  final List<PlutoColumnGroup> columnGroups = [];
+
+  /// [PlutoGridStateManager] has many methods and properties to dynamically manipulate the grid.
+  /// You can manipulate the grid dynamically at runtime by passing this through the [onLoaded] callback.
+  late final PlutoGridStateManager stateManager;
+
   @override
   Widget build(BuildContext context) {
     return Padding(
@@ -47,8 +158,32 @@ class _TablePageState extends State<TablePage> {
           Expanded(
               child: entries!.isEmpty
                   ? Center(child: const CircularProgressIndicator())
-                  : TableWidget(entries: entries)),
+                  : Scaffold(
-          Expanded(child: DiagnosticsWidget(entries: entries)),
+                      body: Container(
+                        padding: const EdgeInsets.all(0),
+                        child: PlutoGrid(
+                          columns: columns,
+                          rows: rows,
+                          columnGroups: columnGroups,
+                          onLoaded: (PlutoGridOnLoadedEvent event) {
+                            stateManager = event.stateManager;
+                          },
+                          onChanged: (PlutoGridOnChangedEvent event) {
+                            print(event);
+                          },
+                          configuration: const PlutoGridConfiguration.dark(
+                            style: PlutoGridStyleConfig.dark(
+                              cellTextStyle: TextStyle(fontFamily: "monospace"),
+                              rowHeight: 20,
+                              gridBorderColor: Colors.transparent,
+                              enableCellBorderHorizontal: false,
+                              enableCellBorderVertical: false,
+                            ),
+                          ),
+                        ),
+                      ),
+                    )),
+          // Expanded(child: DiagnosticsWidget(entries: entries)),
         ],
       ),
     );
@@ -85,10 +220,28 @@ class TableWidget extends StatelessWidget {
   final DateFormat dateFormatter = DateFormat('MM/dd');
   final DateFormat dayFormatter = DateFormat('E');
 
+  final List<PlutoColumn> columns = [];
+
+  final List<PlutoRow> rows = [];
+
+  @override
+  Widget build(BuildContext context) {
+    return Text("moot");
+  }
+}
+
+class SpreadsheetWidget extends StatelessWidget {
+  SpreadsheetWidget({super.key, this.entries});
+
+  final List<Document>? entries;
+
+  final DateFormat dateFormatter = DateFormat('MM/dd');
+  final DateFormat dayFormatter = DateFormat('E');
+
   @override
   Widget build(BuildContext context) {
     return SpreadsheetTable(
-      cellWidth: 42,
+      cellWidth: 80,
       rowsCount: entries!.length,
       colCount: 27,
       cellBuilder: (_, int row, int col) {
@@ -124,7 +277,7 @@ class TableWidget extends StatelessWidget {
           }
           cellText = "${hour.toString()} $meridien";
         } else if (index == 25) {
-          cellText = "Notes";
+          cellText = "Mood";
         } else if (index == 26) {
           cellText = "Comments";
         }

ltx_flutter/pubspec.yaml

@@ -16,6 +16,7 @@ dependencies:
   provider: ^6.0.5
   flutter_svg: ^2.0.6
   intl: ^0.18.1
+  pluto_grid: ^7.0.2
 
 dev_dependencies:
   flutter_test: