v1.18.0

lib/src/components/check_box.dart

@@ -86,7 +86,10 @@ class ArDriveCheckBoxState extends State<ArDriveCheckBox> {
           case CheckBoxState.disabled:
             break;
         }
-        widget.onChange?.call(checked);
+
+        if (widget.onChange != null && state != CheckBoxState.disabled) {
+          widget.onChange?.call(checked);
+        }
       },
       child: ArDriveClickArea(
         child: Row(

lib/src/components/data_table/data_table.dart

@@ -6,10 +6,19 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 class TableColumn {
-  TableColumn(this.title, this.size);
+  TableColumn(
+    this.title,
+    this.size, {
+    required this.index,
+    this.isVisible = true,
+    this.canHide = true,
+  });
 
   final String title;
   final int size;
+  final bool isVisible;
+  final int index;
+  final bool canHide;
 }
 
 class TableRowWidget {
@@ -37,6 +46,7 @@ class ArDriveDataTable<T extends IndexedItem> extends StatefulWidget {
   final bool forceDisableMultiSelect;
   final bool lockMultiSelect;
   final T? selectedRow;
+  final Function(TableColumn)? onChangeColumnVisibility;
 
   const ArDriveDataTable({
     super.key,
@@ -57,6 +67,7 @@ class ArDriveDataTable<T extends IndexedItem> extends StatefulWidget {
     this.forceDisableMultiSelect = false,
     this.lockMultiSelect = false,
     this.selectedRow,
+    this.onChangeColumnVisibility,
   });
 
   @override
@@ -77,6 +88,7 @@ class _ArDriveDataTableState<T extends IndexedItem>
   late List<T> _currentPage;
   final List<MultiSelectBox<T>> _multiSelectBoxes = [];
   T? _selectedItem;
+  List<TableColumn> _columns = [];
 
   final ScrollController _scrollController = ScrollController();
 
@@ -119,6 +131,8 @@ class _ArDriveDataTableState<T extends IndexedItem>
     RawKeyboard.instance.addListener(_handleKeyDownEvent);
     RawKeyboard.instance.addListener(_handleEscapeKey);
     RawKeyboard.instance.addListener(_handleSelectAllShortcut);
+
+    _columns = widget.columns;
   }
 
   void openMultiSelectBox() {
@@ -156,6 +170,19 @@ class _ArDriveDataTableState<T extends IndexedItem>
     });
   }
 
+  void _toggleColumnVisibility(int index) {
+    setState(() {
+      final column = TableColumn(
+        _columns[index].title,
+        _columns[index].size,
+        isVisible: !_columns[index].isVisible,
+        index: _columns[index].index,
+      );
+      _columns[index] = column;
+      widget.onChangeColumnVisibility?.call(column);
+    });
+  }
+
   int _recalculateCurrentPage() {
     // calculate the new total number of items after removing the items
     int removedItemCount = _cachedRows.length - widget.rows.length;
@@ -362,9 +389,9 @@ class _ArDriveDataTableState<T extends IndexedItem>
   @override
   Widget build(BuildContext context) {
     final columns = List.generate(
-      widget.columns.length,
+      _columns.length,
       (index) => _buildSingleColumn(
-        column: widget.columns[index],
+        column: _columns[index],
         index: index,
       ),
       growable: false,
@@ -380,7 +407,7 @@ class _ArDriveDataTableState<T extends IndexedItem>
         leftPadding = 20;
       }
       if (widget.trailing != null) {
-        rightPadding = 135;
+        rightPadding = 20;
       } else {
         rightPadding = 20;
       }
@@ -406,7 +433,37 @@ class _ArDriveDataTableState<T extends IndexedItem>
                   duration: const Duration(milliseconds: 300),
                   padding: getPadding(),
                   child: Row(
-                    children: columns,
+                    children: [
+                      ...columns,
+                      const SizedBox(
+                        width: 90,
+                      ),
+                      ArDriveSubmenu(
+                        alignmentOffset: const Offset(-150, 10),
+                        menuChildren: [
+                          for (int i = 0; i < _columns.length; i++)
+                            ArDriveSubmenuItem(
+                                widget: Padding(
+                              padding: EdgeInsets.only(
+                                  top: (i == 0) ? 16 : 8,
+                                  left: 16,
+                                  right: 16,
+                                  bottom: (i == _columns.length - 1) ? 16 : 8),
+                              child: ArDriveCheckBox(
+                                isDisabled: !_columns[i].canHide,
+                                title: _columns[i].title,
+                                checked: _columns[i].isVisible,
+                                titleStyle:
+                                    ArDriveTypography.body.buttonLargeBold(),
+                                onChange: (value) {
+                                  _toggleColumnVisibility(i);
+                                },
+                              ),
+                            ))
+                        ],
+                        child: ArDriveIcons.plus(),
+                      ),
+                    ],
                   ),
                 ),
               ),
@@ -431,7 +488,7 @@ class _ArDriveDataTableState<T extends IndexedItem>
                       child: Padding(
                         padding: const EdgeInsets.only(top: 5),
                         child: _buildRowSpacing(
-                          widget.columns,
+                          _columns,
                           widget.buildRow(_currentPage[index]).row,
                           _currentPage[index],
                           index,
@@ -450,6 +507,9 @@ class _ArDriveDataTableState<T extends IndexedItem>
   }
 
   Widget _buildSingleColumn({required TableColumn column, required int index}) {
+    if (!column.isVisible) {
+      return const SizedBox();
+    }
     return Flexible(
       flex: column.size,
       child: ArDriveClickArea(
@@ -818,12 +878,15 @@ class _ArDriveDataTableState<T extends IndexedItem>
                   ...List.generate(
                     columns.length,
                     (index) {
+                      if (!columns[index].isVisible) {
+                        return const SizedBox();
+                      }
                       return Flexible(
-                        flex: columns[index].size,
+                        flex: columns[columns[index].index].size,
                         child: ArDriveClickArea(
                           child: Align(
                             alignment: Alignment.centerLeft,
-                            child: buildRow[index],
+                            child: buildRow[columns[index].index],
                           ),
                         ),
                       );

lib/src/styles/icons/ar_drive_icons_icons.dart

@@ -151,6 +151,8 @@ class ArDriveIconsData {
       IconData(0xe841, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData download_2 =
       IconData(0xe842, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData license =
+      IconData(0xe843, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData pin_circle =
       IconData(0xe844, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData pin_no_circle =

lib/src/styles/icons/icons.dart

@@ -299,6 +299,12 @@ class ArDriveIcons {
         size: size,
         color: color,
       );
+  // license
+  static ArDriveIcon license({double? size, Color? color}) => ArDriveIcon(
+        icon: ArDriveIconsData.license,
+        size: size,
+        color: color,
+      );
   // move
   static ArDriveIcon move({double? size, Color? color}) => ArDriveIcon(
         icon: ArDriveIconsData.move,

pubspec.yaml

@@ -1,7 +1,7 @@
 name: ardrive_ui
 description: UI Design Library for the ArDrive Design System
 
-version: 1.17.1
+version: 1.18.0
 
 publish_to: "none"
 

storybook/lib/src/icons.dart

@@ -77,6 +77,7 @@ List<IconOption> _options = [
   IconOption(icon: ArDriveIcons.x(), name: 'x'),
   IconOption(icon: ArDriveIcons.newWindow(), name: 'newWindow'),
   IconOption(icon: ArDriveIcons.share(), name: 'share'),
+  IconOption(icon: ArDriveIcons.license(), name: 'license'),
   IconOption(icon: ArDriveIcons.move(), name: 'move'),
   IconOption(icon: ArDriveIcons.plus(), name: 'plus'),
   IconOption(icon: ArDriveIcons.tournament(), name: 'tournament'),

storybook/lib/src/table.dart

@@ -46,9 +46,9 @@ Widget _tableWithContent(BuildContext context) {
         : null,
     key: ValueKey('$space2 $space1'),
     columns: [
-      TableColumn('Name', space1),
-      TableColumn('Size', space2),
-      TableColumn('Last Updated', space3),
+      TableColumn('Name', space1, index: 0),
+      TableColumn('Size', space2, index: 1),
+      TableColumn('Last Updated', space3, index: 2, canHide: false),
     ],
     sort: (columnIndex) {
       if (columnIndex == 2) {

storybook/pubspec.lock

@@ -16,7 +16,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.15.0"
+    version: "1.17.1"
   args:
     dependency: transitive
     description: