CODEWITHSUNDEEP
pythonplotly-dash
pr07ecH70r
pr07ecH70r

Reputation: 91

How to convert a html components-based table to dash Datatable

I created a table with the dash html components (via a function). However, I am finding some limitations to this approach, namely - I can't figure out how to limit the displayed rows to only 25, and split the tables into pages. I've seen that the dash Databale offers much more flexibility. I am still new to dash and find the division separations a bit clumsy. How can I convert my code (my table) to Datatable?

Here is my table generating function:

def generate_table(dataframe, max_rows=10000):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ], style={
        'margin-right': 'auto',
        'margin-left': 'auto'
        }
    )

In the layout I simply putted my table into a separate Div. Nothing special here.

html.Div(id='modulewafer-table', style={'text-align' : 'center'}),

I know that the syntax of the dash Datatable utilizes rows='' and columns='' dictionaries. Or am I wrong. Can I use my existing function to assign the generated values to these attributes?

Upvotes: 0

Views: 1749

Answers (1)

piterbarg
piterbarg

Reputation: 8219

Following up on the comments, as the code does not fit into comments box, I am copying the minimal code to create dash Datatable from a dataframe, from here, with minor changes to reflect your names

import dash
import dash_table
import pandas as pd

# here you would put the dataframe that features in your question as an argument to your function generate_table
df = dataframe

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
)

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

Upvotes: 1

Related Questions