Datatable to filtered datatable using selected rows

I currently have a multipage application which I will allow the user to select the rows that they want to keep in the datatable and then show only the selected rows on a datatable in another page once the submit button is clicked.

df_yake is the dataframe which contains all the rows before filtering. The current output basically copies and pastes the df_yake into dff and shows the entire datatable.

print(rows)
print(derived_virtual_selected_rows)

This gives me

None
[]
None
[]

I have followed some suggestions from other users here but to no avail. help? thanks!

my current callback looks like this

@app.callback(Output('output-data-from-tbl', 'children'),
             [Input('tbl-to-ner', 'n_clicks')],
             [State('output-data-upload', 'derived_virtual_data'),
              State('output-data-upload', 'derived_virtual_selected_rows')]
              )
def save_current_table(nextbtn, rows, derived_virtual_selected_rows):

    if derived_virtual_selected_rows is None:
        derived_virtual_selected_rows = []

    global df_yake
    dff = df_yake if rows is None else pd.DataFrame(rows)
    print(rows)
    print(derived_virtual_selected_rows)

    return html.Div(
        [
            dt.DataTable(
                data=dff.to_dict('rows'),
                columns=[{"name": str(i), "id": str(i), "deletable": False, "selectable": False} for i in
                         dff.columns],
                filter_action="native",
                sort_action="native",
                sort_mode="multi",
                column_selectable="single",
                selected_columns=[],
                selected_rows=[],
                hidden_columns=['CI'],
                page_action="native",
                page_current=0,
                page_size=10,
                style_cell={'textAlign': 'left',
                            'minWidth': '360px',
                            'width': '360px',
                            'maxWidth': '360px',
                            'whiteSpace': 'normal'
                            }
            ),

        ],
        style={'height': 300,
               'width': "100%",
               'margin-top': '20',
               'font-size': '12'},
        className='eight columns'
    )