Datatables in webapp

MgDv

Is it possible to create a Datatable in a webapp?

To have features like filtering and pagination.

fchataigner2

Hi,

DSS doesn't offer particular webapp components, so what's available to you is what Bokeh or Shiny or Dash has to offer you.

If the goal of the webapp is to be a datatable, then maybe you should simply take the DSS dataset you want in the table and publish it on a dashboard.

Ignacio_Toledo

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.

fcaro

Thanks a lot for this snippet !!