Add ui::table (#20447)

This PR adds the `ui::Table` component.

It has a rather simple API, but cells can contain either strings or
elements, allowing for some complex uses.

Example usage:

```rust
Table::new(vec!["Product", "Price", "Stock"])
    .width(px(600.))
    .striped()
    .row(vec!["Laptop", "$999", "In Stock"])
    .row(vec!["Phone", "$599", "Low Stock"])
    .row(vec!["Tablet", "$399", "Out of Stock"])
```

For more complex use cases, the table supports mixed content:

```rust
Table::new(vec!["Status", "Name", "Priority", "Deadline", "Action"])
    .width(px(840.))
    .row(vec![
        element_cell(Indicator::dot().color(Color::Success).into_any_element()),
        string_cell("Project A"),
        string_cell("High"),
        string_cell("2023-12-31"),
        element_cell(Button::new("view_a", "View").style(ButtonStyle::Filled).full_width().into_any_element()),
    ])
    // ... more rows
```

Preview:

![CleanShot 2024-11-08 at 20 53
04@2x](https://github.com/user-attachments/assets/b39122f0-a29b-423b-8e24-86ab4c42bac2)

This component is pretty basic, improvements are welcome!

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2024-11-08 21:10:15 -05:00 committed by GitHub
parent 1f974d074e
commit 31a6ee0229
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 306 additions and 24 deletions

View file

@ -1,11 +1,11 @@
#![allow(unused, dead_code)]
use gpui::{actions, AppContext, EventEmitter, FocusHandle, FocusableView, Hsla};
use gpui::{actions, hsla, AnyElement, AppContext, EventEmitter, FocusHandle, FocusableView, Hsla};
use strum::IntoEnumIterator;
use theme::all_theme_colors;
use ui::{
prelude::*, utils::calculate_contrast_ratio, AudioStatus, Availability, Avatar,
AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike, Checkbox, ElevationIndex,
Facepile, Indicator, TintColor, Tooltip,
element_cell, prelude::*, string_cell, utils::calculate_contrast_ratio, AudioStatus,
Availability, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike,
Checkbox, ElevationIndex, Facepile, Indicator, Table, TintColor, Tooltip,
};
use crate::{Item, Workspace};
@ -514,6 +514,7 @@ impl ThemePreview {
.child(Button::render_component_previews(cx))
.child(Indicator::render_component_previews(cx))
.child(Icon::render_component_previews(cx))
.child(Table::render_component_previews(cx))
.child(self.render_avatars(cx))
.child(self.render_buttons(layer, cx))
}