Table header to M3

lib/components/editor_pane/request_headers.dart

@@ -62,12 +62,29 @@ class EditRequestHeadersState extends ConsumerState<EditRequestHeaders> {
 
   @override
   Widget build(BuildContext context) {
+    final tableThemeData = DaviThemeData(
+      columnDividerThickness: 1,
+      columnDividerColor: colorGrey100,
+      row: RowThemeData(dividerColor: colorGrey100),
+      decoration: const BoxDecoration(
+        border: Border(),
+      ),
+      header: HeaderThemeData(
+        color: Theme.of(context).colorScheme.surface,
+        columnDividerColor: colorGrey100,
+        bottomBorderHeight: 1,
+        bottomBorderColor: colorGrey100,
+      ),
+      headerCell: const HeaderCellThemeData(
+        alignment: Alignment.center,
+        textStyle: null,
+      ),
+    );
+
     final activeId = ref.watch(activeItemIdStateProvider);
-    rows = ref
+    final collection = ref.watch(collectionStateNotifierProvider);
-            .read(collectionStateNotifierProvider.notifier)
+    final idIdx = collection.indexWhere((m) => m.id == activeId);
-            .getRequestModel(activeId!)
+    rows = collection[idIdx].requestHeaders ?? [const KVRow("", "")];
-            .requestHeaders ??
-        [];
     DaviModel<KVRow> model = DaviModel<KVRow>(
       rows: rows,
       columns: [
@@ -83,6 +100,23 @@ class EditRequestHeadersState extends ConsumerState<EditRequestHeaders> {
           cellBuilder: _buildValueField,
           sortable: false,
         ),
+        DaviColumn(
+          pinStatus: PinStatus.none,
+          width: 30,
+          cellBuilder: (BuildContext context, DaviRow<KVRow> row) {
+            return InkWell(
+              child: Icon(
+                Icons.remove_circle,
+                size: 16,
+                color: Colors.red.withOpacity(0.9),
+              ),
+              onTap: () {
+                rows.removeAt(row.index);
+                _onFieldChange(activeId!);
+              },
+            );
+          },
+        ),
       ],
     );
     return Stack(
@@ -108,7 +142,7 @@ class EditRequestHeadersState extends ConsumerState<EditRequestHeaders> {
             child: ElevatedButton.icon(
               onPressed: () {
                 rows.add(const KVRow("", ""));
-                model.addRow(const KVRow("", ""));
+                _onFieldChange(activeId!);
               },
               icon: const Icon(Icons.add),
               label: const Text(

lib/components/editor_pane/request_params.dart

@@ -63,6 +63,25 @@ class EditRequestURLParamsState extends ConsumerState<EditRequestURLParams> {
 
   @override
   Widget build(BuildContext context) {
+    final tableThemeData = DaviThemeData(
+      columnDividerThickness: 1,
+      columnDividerColor: colorGrey100,
+      row: RowThemeData(dividerColor: colorGrey100),
+      decoration: const BoxDecoration(
+        border: Border(),
+      ),
+      header: HeaderThemeData(
+        color: Theme.of(context).colorScheme.surface,
+        columnDividerColor: colorGrey100,
+        bottomBorderHeight: 1,
+        bottomBorderColor: colorGrey100,
+      ),
+      headerCell: const HeaderCellThemeData(
+        alignment: Alignment.center,
+        textStyle: null,
+      ),
+    );
+
     final activeId = ref.watch(activeItemIdStateProvider);
     final collection = ref.watch(collectionStateNotifierProvider);
     final idIdx = collection.indexWhere((m) => m.id == activeId);
@@ -87,11 +106,16 @@ class EditRequestURLParamsState extends ConsumerState<EditRequestURLParams> {
           width: 30,
           cellBuilder: (BuildContext context, DaviRow<KVRow> row) {
             return InkWell(
-                child: const Icon(Icons.remove_circle, size: 16),
+              child: Icon(
+                Icons.remove_circle,
+                size: 16,
+                color: Colors.red.withOpacity(0.9),
+              ),
               onTap: () {
                 rows.removeAt(row.index);
                 _onFieldChange(activeId!);
-                });
+              },
+            );
           },
         ),
       ],

lib/components/styles.dart

@@ -22,24 +22,6 @@ const tableContainerDecoration = BoxDecoration(
   color: colorBg,
   borderRadius: border12,
 );
-final tableThemeData = DaviThemeData(
-  columnDividerThickness: 1,
-  columnDividerColor: colorGrey100,
-  row: RowThemeData(dividerColor: colorGrey100),
-  decoration: const BoxDecoration(
-    border: Border(),
-  ),
-  header: HeaderThemeData(
-    color: colorGrey50,
-    columnDividerColor: colorGrey100,
-    bottomBorderHeight: 1,
-    bottomBorderColor: colorGrey100,
-  ),
-  headerCell: const HeaderCellThemeData(
-    alignment: Alignment.center,
-    textStyle: null,
-  ),
-);
 
 const p5 = EdgeInsets.all(5);
 const p10 = EdgeInsets.all(10);