dave on Nostr: You need to update the version of the dash_table component. The correct code should ...

You need to update the version of the dash_table component. The correct code should be:

import dash
from dash import dcc, Output, Input, html, dash_table

# Initialize the app
app = dash.Dash()

# Create the layout of the page
app.layout = html.Div([
# Header
html.Div([
html.H1("My Table Report")
], style={'textAlign': 'center'}),

# Body
html.Div([
html.Div([
dcc.Tabs(id="tabs", children=[
dcc.Tab(label="Table Report", value="table"),
])
]),
html.Div(id="tab-content")
])
])

# Create callback for table tab
@app.callback(Output(component_id='tab-content', component_property='children'),
[Input(component_id='tabs', component_property='value')])
def render_content(tab):
if tab == 'table':
return html.Div([
# Insert Dash DataTable here
html.Div(
children=[
dash_table.DataTable(
id='table',
columns=[
{'name': 'Name', 'id': 'name'},
{'name': 'Type', 'id': 'type'},
{'name': 'Score', 'id': 'score'},
],
data=[
{'name': 'Student 1', 'type': 'A', 'score': 5},
{'name': 'Student 2', 'type': 'A', 'score': 5},
{'name': 'Student 3', 'type': 'B', 'score': 4},
{'name': 'Student 4', 'type': 'B', 'score': 3},
],
style_cell={'textAlign': 'center'},
row_selectable='single',
filter_action="native",
sort_action="native",
sort_mode='multi',
column_selectable="single",
row_deletable=True
)