Datatables in webapp

MgDv
MgDv Dataiku DSS Core Concepts, Registered Posts: 3 ✭✭✭✭

Is it possible to create a Datatable in a webapp?

To have features like filtering and pagination.

Answers

  • fchataigner2
    fchataigner2 Dataiker Posts: 355 Dataiker

    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
    Ignacio_Toledo Dataiku DSS Core Designer, Dataiku DSS Core Concepts, Neuron 2020, Neuron, Registered, Dataiku Frontrunner Awards 2021 Finalist, Neuron 2021, Neuron 2022, Frontrunner 2022 Finalist, Frontrunner 2022 Winner, Dataiku Frontrunner Awards 2021 Participant, Frontrunner 2022 Participant, Neuron 2023 Posts: 415 Neuron
    edited July 17

    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
    fcaro Registered Posts: 1 ✭✭✭

    Thanks a lot for this snippet !!

Setup Info
    Tags
      Help me…