datatable with totals after filter and selected

import dash
from dash import Dash, dash_table, dcc, html
from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px

df = px.data.tips()
df["id"] = df.index


app = Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i}for i in df.columns],
            data=df.to_dict("records"),
            editable=True,
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            row_selectable="multi",
            row_deletable=True,
            page_action="native",
            page_size=10,
        ),
        html.Div(id="table-container"),
    ]
)


@app.callback(
    Output("table", "style_data_conditional"),
    Input("table", "derived_viewport_selected_row_ids"),
)
def style_selected_rows(selRows):
    if selRows is None:
        return dash.no_update
    return [
        {
            "if": {"filter_query": "{{id}} ={}".format(i)},
            "backgroundColor": "yellow",
        }
        for i in selRows
    ]


@app.callback(
    Output("table-container", "children"),
    Input("table", "derived_virtual_data"),
    Input("table", "derived_virtual_selected_rows"),
)
def update_graphs(rows, derived_virtual_selected_rows):
    dff = df if rows is None else pd.DataFrame(rows)

    total_selected = ""
    if derived_virtual_selected_rows:
        total_selected = dff["total_bill"].iloc[derived_virtual_selected_rows].sum()
        total_selected = html.Span(
            f"Total bill selected ${total_selected :,.2f}",
            style={"backgroundColor": "yellow"},
        )

    total_bill = dff["total_bill"].sum()
    total_bill = html.Div(f"Total bill ${total_bill: ,.2f}")

    return html.Div([total_bill, total_selected])


if __name__ == "__main__":
    app.run_server(debug=True)