Datatables in webapp

Hi @MgDv
,

Just a few days ago I create one data-table with Dash using webapps. Here is the code I used, hopefully it will work as a template or example:

import plotly.express as px
import dataiku
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd

dataset = dataiku.Dataset("your_data_frame")
df = dataset.get_dataframe()

app.layout = html.Div(children=[
    html.H1(children='Main Title for your Table'),
     dash_table.DataTable(
        id='table',
        css=[{'selector': 'table', 'rule': 'table-layout: fixed'}],  # add selector capabilities and table layout
        columns=[{"name": i, "id": i} 
                 for i in df.columns],
        data=df.to_dict('records'),
        style_data=dict(
            textAlign='left',
            height='15px',
            overflow='hidden',
        ),
        style_header={
            'whiteSpace': 'normal',
            'height': 'auto',
        },
        style_cell_conditional=[
            {'if': {'column_id': 'column_0'},  # Fixed width for 'column_0'
                    'width': '10%'},
            {'if': {'column_id': 'column_1'}, # Fixed width for 'column_1'
                    'width': '10%'}],
        page_size=20,
        style_table={'overflowX': 'auto'},
        tooltip_data=[
            {
                column: {'value': str(value), 'type': 'markdown'}
                for column, value in row.items()
            } for row in df.to_dict('records')],
        tooltip_duration=None,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        column_selectable="single",
        export_format="csv" # add option to export the datatable in csv format 
    )
])

Hope this helps!

I.