widgetti / widgetti/ipyvuetify
question (ipyvuetify): Specify different colors for a button in each row of the DataTable
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 355
- Forks
- 61
- PR merge metrics
- No merged PRs in 30d
Description
I am trying to link the ipyvuetify data table with a FigureWidget in Plotly. I wanted to display the colors of each line in the corresponding row in the table. I tried to use v_slots, but I couldn't customize the color for each row. I know the hex code every time I plot.
import ipyvuetify as v
import plotly.express as px
class Figure_Data(v.DataTable):
def __init__(self, *args, **kwargs):
self.colors = px.colors.qualitative.Plotly
# ['#636EFA', '#EF553B', '#00CC96', '#AB63FA', '#FFA15A', '#19D3F3', '#FF6692', '#B6E880', '#FF97FF', '#FECB52']
self.color_id = 0
item_key = 'id'
dense = True
style_ = 'width:30%'
hide_default_footer=True
show_select=True
super().__init__(item_key=item_key,
dense=dense,
style_=style_,
hide_default_footer=hide_default_footer,
show_select=show_select,
*args, **kwargs)
# a header
self.headers = [
{ 'text': 'Name', 'value': 'name', 'width':'75%'},
{ 'text': 'Unit', 'value': 'unit', 'width':'20%'},
{ 'text': 'Color', 'value': 'color', 'width':'5%', 'sortable':False},
]
# 2 initial items
self.items = [
{
'name' : 'Data 1',
'unit' : '-',
'color': '#636EFA', # <-- color code
'id' : 0,
},
{
'name' : 'Data 2',
'unit' : '-',
'color': '#EF553B',
'id' : 1,
},
]
self.v_slots=[{
'name': 'item.color',
'variable': 'color',
'children': v.Btn(color='color', #?
block=True,
ripple=False,
elevation=2,
style_='height:80%; overflow: hide')
}]
my_table = Figure_Data()
my_table
I know this is possible in Vue. (https://vuetifyjs.com/en/components/data-tables/#item)
Is there any way to get the value of the color row using v_slots in ipyvuetify?

Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the DataTable v_slots entry point and the provided Figure_Data example, then reproduce the row-color scenario with the Plotly FigureWidget integration. Check how the item.color slot passes row values to v.Btn. Done means each table-row button uses that row's color value, with a regression test or documented example showing the behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- jupyter, plotly, python
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100