Update table to support to support toggle col selection. (#159)

- Add `border` method to enable/disable border, default: `true`.
- Update `stripe` default to false.
- Update theme to remove table head color, just use window bg like.

<img width="1263" alt="image"
src="https://github.com/user-attachments/assets/2e0994a9-7172-4812-a0e2-3b3ba4281112">

Closes #155

crates/story/src/table_story.rs

@@ -83,6 +83,7 @@ struct CustomerTableDelegate {
     col_resize: bool,
     col_order: bool,
     col_sort: bool,
+    col_selection: bool,
 }
 
 impl CustomerTableDelegate {
@@ -109,6 +110,7 @@ impl CustomerTableDelegate {
             col_resize: true,
             col_order: true,
             col_sort: true,
+            col_selection: true,
         }
     }
 }
@@ -161,6 +163,10 @@ impl TableDelegate for CustomerTableDelegate {
         return self.col_resize && col_ix > 1;
     }
 
+    fn can_select_col(&self, _: usize) -> bool {
+        return self.col_selection;
+    }
+
     fn render_td(
         &self,
         row_ix: usize,
@@ -363,12 +369,19 @@ impl TableStory {
     fn toggle_col_sort(&mut self, checked: &bool, cx: &mut ViewContext<Self>) {
         let table = self.table.clone();
         table.update(cx, |table, cx| {
-            println!("- toggle_col_sort: {}", checked);
             table.delegate_mut().col_sort = *checked;
             cx.notify();
         });
     }
 
+    fn toggle_col_selection(&mut self, checked: &bool, cx: &mut ViewContext<Self>) {
+        let table = self.table.clone();
+        table.update(cx, |table, cx| {
+            table.delegate_mut().col_selection = *checked;
+            cx.notify();
+        });
+    }
+
     fn on_table_event(
         &mut self,
         _: View<Table<CustomerTableDelegate>>,
@@ -419,6 +432,12 @@ impl Render for TableStory {
                             .label("Column Sort")
                             .selected(delegate.col_sort)
                             .on_click(cx.listener(Self::toggle_col_sort)),
+                    )
+                    .child(
+                        Checkbox::new("col-selection")
+                            .label("Column Selection")
+                            .selected(delegate.col_selection)
+                            .on_click(cx.listener(Self::toggle_col_selection)),
                     ),
             )
             .child(self.table.clone())

crates/ui/src/table.rs

@@ -113,6 +113,8 @@ pub struct Table<D: TableDelegate> {
 
     /// Set stripe style of the table.
     stripe: bool,
+    /// Set to use border style of the table.
+    border: bool,
 }
 
 #[allow(unused)]
@@ -130,6 +132,11 @@ pub trait TableDelegate: Sized + 'static {
         true
     }
 
+    /// Returns whether the column at the given index can be selected. Default: false
+    fn can_select_col(&self, col_ix: usize) -> bool {
+        false
+    }
+
     /// Returns the width of the column at the given index.
     /// Return None, use auto width.
     ///
@@ -210,7 +217,8 @@ where
             selected_col: None,
             resizing_col: None,
             bounds: Bounds::default(),
-            stripe: true,
+            stripe: false,
+            border: true,
         };
 
         this.prepare_col_groups(cx);
@@ -225,11 +233,18 @@ where
         &mut self.delegate
     }
 
+    /// Set to use stripe style of the table, default to false.
     pub fn stripe(mut self, stripe: bool) -> Self {
         self.stripe = stripe;
         self
     }
 
+    /// Set to use border style of the table, default to true.
+    pub fn border(mut self, border: bool) -> Self {
+        self.border = border;
+        self
+    }
+
     fn prepare_col_groups(&mut self, cx: &mut ViewContext<Self>) {
         self.col_groups = (0..self.delegate.cols_count())
             .map(|col_ix| ColGroup {
@@ -266,6 +281,10 @@ where
     }
 
     fn on_col_head_click(&mut self, col_ix: usize, cx: &mut ViewContext<Self>) {
+        if !self.delegate.can_select_col(col_ix) {
+            return;
+        }
+
         self.set_selected_col(col_ix, cx)
     }
 
@@ -342,7 +361,10 @@ where
 
     /// Show Column selection style, when the column is selected and the selection state is Column.
     fn col_wrap(&self, col_ix: usize, cx: &mut ViewContext<Self>) -> Div {
-        if self.selected_col == Some(col_ix) && self.selection_state == SelectionState::Column {
+        if self.delegate().can_select_col(col_ix)
+            && self.selected_col == Some(col_ix)
+            && self.selection_state == SelectionState::Column
+        {
             h_flex().bg(cx.theme().table_active)
         } else {
             h_flex()
@@ -796,9 +818,9 @@ where
         let view = cx.view().clone();
         div()
             .size_full()
-            .rounded_md()
+            .when(self.border, |this| {
-            .border_1()
+                this.rounded_md().border_1().border_color(cx.theme().border)
-            .border_color(cx.theme().border)
+            })
             .bg(cx.theme().table)
             .child(inner_table)
             .child(ScrollableMask::new(

crates/ui/src/theme.rs

@@ -202,7 +202,7 @@ impl Colors {
             list: hsl(0.0, 0.0, 100.),
             list_even: hsl(240.0, 5.0, 96.0),
             list_active: hsl(240.0, 7., 88.0).opacity(0.75),
-            list_head: hsl(240.0, 0., 94.),
+            list_head: hsl(0.0, 0.0, 100.),
             link: hsl(221.0, 83.0, 53.0),
             menu: hsl(0.0, 0.0, 97.0),
         }
@@ -244,7 +244,7 @@ impl Colors {
             list: hsl(0.0, 0.0, 6.0),
             list_even: hsl(240.0, 3.7, 8.0),
             list_active: hsl(240.0, 3.7, 15.0),
-            list_head: hsl(240.0, 3.7, 10.9),
+            list_head: hsl(0.0, 0.0, 6.0),
             link: hsl(221.0, 83.0, 53.0),
             menu: hsl(300.0, 2.0, 12.),
         }