docs: list view #769
docs: list view #769
Conversation
This is what you're referring to right? @dsmmcken |
No, I mean ui.list_view pydoc string in the python source is incomplete. It's missing half its params. |
| @@ -0,0 +1,275 @@ | |||
| ## List View | |||
|
|
|||
| ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action. It offers greater flexibility in the contents it can render and can distinguish between row selection and actions performed on a row. This makes ListView an ideal component for use cases such as file managers. | |||
There was a problem hiding this comment.
@dsmmcken The mention of this being ideal for a "file manager" doesn't seem like a common use case in DH (if at all)? Any other ideas of something more applicable to DH use cases? I see this mentioned in the Spectrum ListView docs but not in the primary description. May be worth removing or changing.
| def ui_list_view_action_menu(): | ||
| value, set_value = ui.use_state(["key-2", "key-4", "key-5"]) | ||
|
|
||
| action_item_keys, set_action_item_idx = ui.use_state(["", ""]) |
There was a problem hiding this comment.
Any reason, the value + setter use different naming semantics? (keys vs idx)
There was a problem hiding this comment.
No not a particular reason I just grabbed some examples from the DESIGN.md doc. But agreed it doesn't make sense to change between the two. Will default to keys.
| overflow_mode: The behaviour of the text when it overflows the cell. | ||
| render_empty_state: Sets what the `list_view` should render when there is no content to display. | ||
| disabled_behavior: Whether disabled_keys applies to all interactions or just selection. | ||
| disabled_keys: The keys that should be disabled. These cannot be selected, focused, or interacted with |
There was a problem hiding this comment.
We might want to include an example of disabled_keys
There was a problem hiding this comment.
Agreed just added one to the markdown docs
There was a problem hiding this comment.
@ethanalvizo The docs that are here look good overall (left some minor tweak comments), but I think we are missing some examples of different data sources. Namely we should have both static items + table backed examples. Looking at the picker docs, I also see a "UI Recommendations" section. @dsmmcken am I remembering correctly that this is something you requested for docs for each component?
| @@ -0,0 +1,329 @@ | |||
| # List View | |||
|
|
|||
| ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action. It offers greater flexibility in the contents it can render and can distinguish between row selection and actions performed on a row. This makes ListView an ideal component for use cases such as file managers. | |||
There was a problem hiding this comment.
| ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action. It offers greater flexibility in the contents it can render and can distinguish between row selection and actions performed on a row. This makes ListView an ideal component for use cases such as file managers. | |
| List view displays a list of interactive items, and allows a user to navigate, select, or perform an action. It offers greater flexibility in the contents it can render and can distinguish between row selection and actions performed on a row. This makes list view an ideal component for turning table columns into interactive lists. |
|
|
||
| ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action. It offers greater flexibility in the contents it can render and can distinguish between row selection and actions performed on a row. This makes ListView an ideal component for use cases such as file managers. | ||
|
|
||
| ## Example |
There was a problem hiding this comment.
The first example and events example are exactly the same?
I would really strip down the first example to be a more basic example. The first example is supposed to be the minimum viable amount of code to make it work.
|
|
||
| ListView can also accept a handler that is called when the selection is changed. | ||
|
|
||
| ```python |
There was a problem hiding this comment.
Get rid of as much complexity in this example as possible leaving only the thing you are trying to show, on_selection_change
|
|
||
| To disable certain rows in the ListView component, use the `disabled_keys` prop. By setting this prop with an array of keys, you can prevent interaction with those rows, providing greater control and customization options for the ListView behavior. | ||
|
|
||
| ```python |
There was a problem hiding this comment.
Same comment as before, strip this example down to minimum required to show what is unique about it.
Closes #686
Note: Empty state example was intentionally omitted as this bug was found when rendering an empty list view component. Can add in the example once that is fixed