Giter Club home page Giter Club logo

dash-table-experiments's Introduction

dash-table-experiments

THIS PACKAGE IS NO LONGER SUPPORTED

If you are looking for a first class data table component for Dash head on over to https://github.com/plotly/dash-table and check out the documentation https://dash.plot.ly/datatable.

Usage

# Install 
$ pip install dash-table-experiments

Usage with Callbacks

Per this Dash community answer, to use callbacks with dash-table-experiments there are two key steps (for a full working example see usage-callback.py):

# 1. Declare the table in app.layout
dt.DataTable(
    rows=[{}], # initialise the rows
    row_selectable=True,
    filterable=True,
    sortable=True,
    selected_row_indices=[],
    id='datatable'
)

# 2. Update rows in a callback
@app.callback(Output('datatable', 'rows'), [Input('field-dropdown', 'value')])
def update_datatable(user_selection):
    """
    For user selections, return the relevant table
    """
    if user_selection == 'Summary':
        return DATA.to_dict('records')
    else:
        return SOMEOTHERDATA.to_dict('records')

Usage with Graphs

This example demonstrates the user's ability to select data points either in the table which updates the plot, or in the reverse, select points on the graph which updates the selection on the table. For a full working example see usage.py.

Usage Enabling Edits to a Table

Enable edits to a table which updates other objects e.g. a graph. For a full working example see usage-editable.py

dash-table-experiments's People

Contributors

alexcjohnson avatar bpostlethwaite avatar chriddyp avatar jbampton avatar renzods avatar ucg8j avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dash-table-experiments's Issues

Full page doesn't displaying with multiple urls app

I have fully working dash app, which I wanna convert to multiple urls app by this instruction https://plot.ly/dash/urls . When I run dash app with single layout, datatbale and graph are displayed, but when I move to multiple urls app, full page where datatable not showing. When I've removed datatable from layout, the rest of content are showing as well. Is it bug or an expected behaviour?

scrolling using keyboard through large dataset

I used first example from the Upload tutorial where CSV file cab be uploaded, parsed and displayed back using DataTable. Used a CSV with some 83000 records. DataTable comes back and displays the content. Then click inside the table (any cell really) and try continuously scroll using keyboard (down arrow or PgDown). DataTable scrolls for a few pages and then stops. Clicking inside table and try scroll again - same behaviour, a few pages ok then stops. Scrolling on small datasets works fine.
Using Python 2.7. Chrome latest version.
On IE and Firefox both small and large datasets scrolled fine using up and down arrows, but PgUp/PgDown has same issue as on Chrome - focus moves out of table to the overall page.
Also on IE, when scrolling using vertical slider of the table, it would stop rendering data when moving slider too fast, that works fine on Chrome.

Resetting Filter State

I'm using a function to create a table in a div:

def generate_annotations_table(sort_column=None, sort_direction=None, filters={}):
    """
    Generate the annotations table
    """
    print("Refreshing table...")
    df = get_all_annotation_data()
    return dt.DataTable(
        rows=df.to_dict('records'),
        columns=['Col1', 'Col2', 'Col3'],
        editable=False,
        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        sortColumn=sort_column,
        sortDirection=sort_direction,
        filters=filters,
        id='datatable-annotations'
    )

When have new data, it just refreshes the div. I managed to find the sortColumn and sortDirection properties to preserve any sorting, which was nice. The problem is that I can't seem to preserve filtering using the filters property. Also, if I reset the filters with filter={} in the DataTable, the active filters on the table reset but the text typed by the user still remains in the filter box(es) at the top of the table.

Layout without table?!

If my layout does not contain the table, how can I 'insert' it?! For example, the following code does not work (there are no errors, but the table is not shown):

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='body'),
])

@app.callback(Output('body', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
  return dt.DataTable()

Table width breaks layout when loading an local css file

Love your work!

I'm using a workaround to load a local stylesheet from here:
https://community.plot.ly/t/how-do-i-use-dash-to-add-local-css/4914/9

I find that:

  • datatable loads inside .container, sets its own width to page width
  • stylesheet loads, sets the .container width to 960px
  • datatable overflows .container (see screenshot)
  • resizing the window updates the datatable width, correcting the issue

Funnily enough - it doesn't seem to occur when using your codepen URL:
https://codepen.io/chriddyp/pen/bWLwgP.css

Wasn't sure of the best place to report this - figured that it was likely a datatable issue, but maybe it relates to / is solved by allow optional header and footer #171

For the moment, I'm just adding overflow-x: scroll to the container, but I'd thought you'd like to know...

Cheers, ptim

2018-02-04 17-45-46 - dash 1

Sorting / Filtering of Selected rows

It would be helpful to quickly identify which rows are currently selected in a data table.

For example if I select rows by clicking into a histogram, multiple rows will be selected, but it is actually very difficult to find and review all of them (inside a reasonably large data table).

A possible improvement would be to allow filtering of selected / non-selected rows or to at least allow sorting rows based on their selection status.

There was an incomprehensible mistake. It worked before the loading of the class Tab.

import base64
import datetime
import io

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt

import pandas as pd

BASE_NAMES = ('Date', 'Open', 'High', 'Low', 'Close', 'Vol', 'Z')
date_col = BASE_NAMES[0]

app = dash.Dash()

app.scripts.config.serve_locally = True

app.layout = html.Div([
html.H1('Программа анализа финансовых временных рядов',
style={
'textAlign': 'center',
'margin': '10px'
}
),
dcc.Upload(
id='upload-data',
children=html.Div([
'Load File ',
html.A(' File Open')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
# Allow multiple files to be uploaded
multiple=True
),
html.Div(id='output-data-upload'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])

def parse_contents(contents, filename, date):
content_type, content_string = contents.split(',')

decoded = base64.b64decode(content_string)

try:
    if 'csv' in filename:
        # Assume that the user uploaded a CSV file
        df = pd.read_csv(io.StringIO(decoded.decode('utf-16')))
        del df['Z']
        del df['Vol']
        df['HO'] = round((df['High']/df['Open']-1),3)
        df['OL'] = round((df['Open'] / df['Low']-1),3)
        df['HL'] = round((df['High'] / df['Low']-1),3)
    elif 'xls' in filename:
        # Assume that the user uploaded an excel file
        df = pd.read_excel(io.BytesIO(decoded))
except Exception as e:
    print(e)
    return html.Div([
        'There was an error processing this file.'
    ])

return html.Div([
    # html.H5(filename),
    # html.H6(datetime.datetime.fromtimestamp(date)),

    # Use the DataTable prototype component:
    # github.com/plotly/dash-table-experiments
    dt.DataTable(rows=df.to_dict('records')),

    html.Hr(),  # horizontal line

    # For debugging, display the raw contents provided by the web browser
    # html.Div('Raw Content'),
    # html.Pre(contents[0:200] + '...', style={
    #     'whiteSpace': 'pre-wrap',
    #     'wordBreak': 'break-all'
    # })
])

@app.callback(Output('output-data-upload', 'children'),
[Input('upload-data', 'contents'),
Input('upload-data', 'filename'),
Input('upload-data', 'last_modified')])
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
children = [parse_contents(c, n, d) for c, n, d in zip(list_of_contents, list_of_names, list_of_dates)]
return children

app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

if name == 'main':
app.run_server(debug=True)

dash.exceptions.NonExistantPropException:
Attempting to assign a callback with
the property "filename" but the component
"upload-data" doesn't have "filename" as a property.

Here is a list of the available properties in "upload-data":
['children', 'id', 'contents', 'accept', 'disabled', 'disable_click', 'max_size', 'min_size', 'multiple', 'className', 'className_active', 'className_reject', 'className_disabled', 'style', 'style_active', 'style_reject', 'style_disabled']

Ability to make single selections only

DataTable seems like a really good start and I've been able to make a useful dashboard with it already. I'm currently using the table to select a row of data that is then charted above the table. For this to work, ideally I'd only be able to select a single row at a time - clicking on a new row would select that row and deselect the previous rows.

Is that possible with the current implementation to have a new selection deselect previously selected rows?

Or, without selection support enabled, is there any callbacks available for clicked row or mouse hover row information?

bug in select with duplicate rows

Hello,

I have a simple table with [{"name":"name-1"}, ...]. When two or more rows (here names) are the same, selecting one of these rows leads to the selection of the first row among them. When "selecting all", only the first of each of the similar rows are selected.
Is it clear as description ?

increasing display length

Hi,

dash-table-experiments is great! But the default display rows of datatable is 9. I found a way to work out by setting iDisplayLength of DataTable, but is there a simple way to work out by dash-table-experiments and Python code only?

And min_height does not work well as I expected.
app.layout = html.Div([
html.H4('test1'),
dt.DataTable(
rows=df.to_dict('records'),
columns=df.columns,
row_selectable=True,
filterable=True,
min_height=2000,
sortable=True,
selected_row_indices=[],
id='datatable-gapminder'
),
html.Div(id='selected-indexes')
], className="container")

Thanks!

Feature Requests/Suggestions

I gave this a try and I really love it, but still needs a few features to handle most use cases. I am not sure if this is still being developed.

Suggestions

  • Ability to set how many rows shown and other style choices to make the table look better
  • Alternate color code for rows option with selectable colors
  • Visual indicator that the columns are sortable
  • Thousands separator for large numbers so it is still sortable by number

Really would love to see a nice usable table object in Dash for data sets.

Uncaught TypeError: this.updateProps is not a function

Hi all,

I'm starting to use this component, it's looking good so far. But I'm receiving this error:

Uncaught TypeError: this.updateProps is not a function
    at Object.value [as onClearFilters] (bundle.js:7)
    at Object.<anonymous> (bundle.js:58)
    at e.notifyAll (react-dom.min.js:12)
    at o.close (react-dom.min.js:14)
    at o.closeAll (react-dom.min.js:15)
    at o.perform (react-dom.min.js:15)
    at o.perform (react-dom.min.js:14)
    at Object.T [as flushBatchedUpdates] (react-dom.min.js:14)
    at r.closeAll (react-dom.min.js:15)
    at r.perform (react-dom.min.js:15)
    at Object.batchedUpdates (react-dom.min.js:14)
    at Object.i [as batchedUpdates] (react-dom.min.js:14)
    at dispatchEvent (react-dom.min.js:14)

Opening filters section shows ok, but after clicking to close it back, this error is thrown.

aaa

I'm using the approach to have multiple pages described here https://plot.ly/dash/urls . And this is how I'm defining the component:

    rows_df = pd.DataFrame({
        'x': ['A', 'B', 'C', 'D', 'E', 'F'],
        'y': [4, 3, 1, 2, 3, 6],
        'z': ['a', 'b', 'c', 'a', 'b', 'c']
    })

    layout = html.Div([
        html.H4('DataTable'),
        html.Label('Report type:', style={'font-weight': 'bold'}),
        dt.DataTable(
            rows=rows_df.to_dict('records'),
            editable=False,
            row_selectable=True,
            filterable=True,
            sortable=True,
            id='table'
        ),
        html.Div(id='selected-indexes')
    ], className="container")

Page jumps to selected cell on table on rerender

Description

When a DataTable is in a dash app with scroll, the page location jumps to the selected cell on the table whenever anything on the page updates. This makes using the experimental DataTable in a scrollable app very frustrating for a user.
This occurs on (at least)

  • Chrome on Linux
  • Firefox on Linux
  • Chrome on Windows 10

Desired behavior

The page should not jump to the table when other components are updated or the page is refreshed.

Example code

import dash

import dash_html_components as html
import dash_table_experiments as dt


app = dash.Dash(name='dash')


app.layout = html.Div(children=[
    html.Div('This is a tall div', style=dict(height=1000, width='100%')),
    dt.DataTable(
        rows=[
            {'a': 1, 'b': 2},
            {'a': 2, 'b': 3},
        ],
        columns=['a', 'b']),
    html.Div('This is another tall div', style=dict(height=1000, width='100%')),
])


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

Running this app and loading/refreshing the page in a browser with a height noticeably less than 1000px causes the page to jump to the first cell in column 'a'. We've noted in other more complex instances that clicking on another cell in the table and then updating any other component causes the page to jump to the selected cell (with the blue highlighting).

image

Misc.

Without having dug into the code (since we're just now getting into making our own custom Dash components), I would guess this may be an underlying React component issue(?).
Certainly willing to help dig into this issue if needed since we'd love to use this component, but hopefully there's an easy, obvious fix!

Callback on other components resets table state

I have a separate graph on the page with a callback that's fired based on a dropdown.

When a table is on the page and is sorted (i.e., the react component contains the sortColumn and sortDirection properties in State), any change to the graph resets the table state. Is there a way to preserve state here?

Subplot sort breaks if x axis is number

If the values used as the x axis in subplots are numbers, then the table sort is not reflected in the subplots.

Attached are two files which are the bare minimum to repro the issue.

The CSV file is a copy of https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv which I downloaded and replaced the country names with a series of numbers.

usage_issue.py is the same as the one from the dash-table-experiments repo except for one change only: lines 18-20 which load the aforementioned CSV from the plotly datasets are commented out and a line is added to load the modified CSV from the local disk.

To reproduce:

Place the two attached files into an empty directory.
Run usage_issue.py.
Observe that when the table is sorted the subplot graphs do not update.
modify usage_issue.py to use the CSV from githubusercontent
Run usage_issue.py.
Observe that when the table is sorted the subplot graphs DO update as expected.

Repro_Issue.zip

Table layout customization

Hi All,

I was wondering what is the best way to modify the DataTable layout (text direction, color, etc.). Have had some trouble doing this in the CSS code, and can't seem to implement custom styles in the python code.

Any help would be appreciated!

kind regards,

Stuart

Running the example in usage.py results in Error loading layout

The error is TypeError: keys must be a string

Complete trace:

File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1994, in __call__
return self.wsgi_app(environ, start_response)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1985, in wsgi_app
response = self.handle_exception(e)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1540, in handle_exception
reraise(exc_type, exc_value, tb)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\_compat.py", line 33, in reraise
raise value
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1982, in wsgi_app
response = self.full_dispatch_request()
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
rv = self.handle_user_exception(e)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1517, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\_compat.py", line 33, in reraise
raise value
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
rv = self.dispatch_request()
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\flask\app.py", line 1598, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\dash\dash.py", line 146, in class_decorator
**kwargs
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\dash\authentication.py", line 61, in create_requires_auth
return f(*args, **kwargs)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\dash\dash.py", line 204, in serve_layout
cls=plotly.utils.PlotlyJSONEncoder),
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\json\__init__.py", line 238, in dumps
**kw).encode(obj)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\plotly\utils.py", line 136, in encode
encoded_o = super(PlotlyJSONEncoder, self).encode(o)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\simplejson\encoder.py", line 291, in encode
chunks = self.iterencode(o, _one_shot=True)
File "C:\Users\WulffR\WinPython-64bit-3.6.1.0Qt5\python-3.6.1.amd64\Lib\site-packages\simplejson\encoder.py", line 373, in iterencode
return _iterencode(o, 0)
TypeError: keys must be a string

Any suggestions? Thank you very much :)

Feature Request: Radio Selector instead of Checkbox Selector

Hi Chris and Dash team,

Just wondering if there are plans to create a radio-selector table (ie, only one row may be selected at any time) vs the current checkbox-style selection (multiple rows at any time if selectable = True.

If not, I'm a little stumped in using callback logic to force the selected_row_indices property to 'pop' any selected rows and to only take on the last selected row value.

Appreciate any thoughts or help! Thanks.

Automatic width incorrectly includes parent's padding

I'm not sure exactly what the root cause of this issue is, but the table width is not calculated correctly when parent container has some padding. This becomes obvious when e.g. you've got two tables side-by-side in a Twitter Bootstrap grid systems. Each column there has padding by default, so if the table is placed as a direct child of a column, its width does not respect the padding. As a result it's not even possible to drag the мукешсфд slider on the left table because that are belongs to the right column, not left.

return html.Div([
    html.Div([
        html.Div([
            table_left,
        ], className='col-md-6'),
        html.Div([
            table_right,
        ], className='col-md-6'),
    ], className='row'),
], className='container-fluid')

I can force it to work correctly by wrapping all tables with dummy div elements (thus making them unaware of the padding that parent div has):

return html.Div([
    html.Div([
        html.Div([
            html.Div(table_left),
        ], className='col-md-6'),
        html.Div([
            html.Div(table_right),
        ], className='col-md-6'),
    ], className='row'),
], className='container-fluid')

Can not render the comma character: ","

Currently, any data including "," will omit that character and render the data table cell value without ",". For example 2016,2017 becomes 20162017.

When hovering the mouse over such data entries, the comma is actually still shown and filtering the column also requires specifying the comma for intended results.

dash_comma

Some Problem in Multi-Page Apps.

app.layout = html.Div([
    dcc.Location(id='url'),
    html.Div(id='page-content'),
])

index_page = html.Div([
    dcc.Link('a', href='/HLIndex'),
    html.Br(),
    dcc.Link('b', href='/VolFundFace'),
])

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    print pathname
    if pathname =='/':
        return index_page
    elif pathname == '/VolFundFace':
        return HL_View_VolFundFace.layout_
    elif pathname == '/HLIndex':
        return HL_View_HLIndex.layout
    else:
        return '404'
HL_View_VolFundFace.layout_ = html.Div([
    html.Div([
            html.Div([
                dcc.Dropdown(
                    id='xaxis-column',
                    options=[{'label': i, 'value': i} for i in available_indicators],
                    value=u'资金面'
                ),
            ],
            style={'width': '48%', 'display': 'inline-block'}),
            html.Div([
                dcc.Dropdown(
                    id='yaxis-column',
                    options=[{'label': i, 'value': i} for i in available_indicators],
                    value=u'波动率(20日)'
                ),
            ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
        ]),
    dcc.Graph(id='indicator-graphic'),
    dt.DataTable(
        rows=table_data,
        columns=table_columns,
        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='datatable-gapminder'
    ),
    html.Div(id='selected-indexes'),
    ], className="container")

I have a Multi-Page Apps routing like this, and in this way the HL_View_VolFundFace.layout_ cannot be shown well.

But if i do like this

elif pathname == '/VolFundFace':
        app.layout = HL_View_VolFundFace.layout_

it can shown well

Assigning new rows didn't reset selected indices if callback exist

Hello, there are two datables with and without callback in provided example.

  1. Checkbox "1" is set by default
  2. Check "select all" in both datatables
  3. Check/uncheck "0" checkbox to see difference
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_table_experiments as dte
import pandas as pd
import numpy as np

MAGIC_NUM = 5
dfs = []
for x in range(MAGIC_NUM):
    df = pd.DataFrame(np.random.randn(5, 2), columns=['df', 'value'])
    df['df'] = x
    dfs.append(df)
dfs = pd.concat(dfs)


app = dash.Dash()
app.scripts.config.serve_locally = True
app.layout = html.Div([
    dcc.Checklist(
        id='check-df',
        options=[{'label': x, 'value': x} for x in range(MAGIC_NUM)],
        values=[1]
    ),
    html.Div(
        id='dummy'
    ),
    html.Div([dte.DataTable(
        id='datatable_1',
        rows=dfs.to_dict('records'),
        columns=dfs.columns,
        row_selectable=True
    )], style={'width': '49%', 'display': 'inline-block'}),
    html.Div([dte.DataTable(
        id='datatable_2',
        rows=dfs.to_dict('records'),
        columns=dfs.columns,
        row_selectable=True
    )], style={'width': '49%', 'display': 'inline-block'}),
])


@app.callback(
    Output('datatable_1', 'rows'),
    [Input('check-df', 'values')])
def change_df(values):
    return dfs[dfs['df'].isin(values)].to_dict('records')


@app.callback(
    Output('datatable_2', 'rows'),
    [Input('check-df', 'values')])
def change_df(values):
    return dfs[dfs['df'].isin(values)].to_dict('records')


@app.callback(
    Output('dummy', 'children'),
    [Input('datatable_1', 'rows'),
     Input('datatable_1', 'selected_row_indices')])
def on_select(rows, selected_row_indices):
    return None


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

Ordering Columns

How do i specify the order of the columns to appear in the rendered output

The example from the dash-table-experiments project does not work. There is an exception.

dash.exceptions.NonExistantPropException:
Attempting to assign a callback with
the property "filename" but the component
"upload-data" doesn't have "filename" as a property.

Here is a list of the available properties in "upload-data":
['children', 'id', 'contents', 'accept', 'disabled', 'disable_click', 'max_size', 'min_size', 'multiple', 'className', 'className_active', 'className_reject', 'className_disabled', 'style', 'style_active', 'style_reject', 'style_disabled']

Bundle.js - no such file or directory

Hi,
i have cloned the repo and when i ran usage.py i go the below error and i didn't find bundle.js in dash_table_experiments/ so is it removed? or any otherway to fix this? if its an issue.

IOError: [Errno 2] No such file or directory: /dash-table-experiments/dash_table_experiments/bundle.js'

Thanks

Sorting on columns which include null values

If null values exist in a column and an attempt is made to sort (either ascending or descending), the result should (IMHO) order the non null values first and place the null rows at the bottom. Instead sorting a column with null values yields inconsistent (random?) resulting order. Not sure I'm capable of fixing this on my own... otherwise I would

Unable to run usage.py : No such file for bundle.js

Hi,

I am playing around this beautiful work of dash table and when I try to access the web produced by the example code: usage.py, I have the following error:

I had installed : dash, dash-renderer, dash-html-components, dash-core-components. What package is missing to have the result display? It seems to be a missing Javascript?

Thank you

 * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 294-429-851
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET /_dash-component-suites/dash_renderer/[email protected]?v=0.12.1 HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET /_dash-component-suites/dash_renderer/[email protected]?v=0.12.1 HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET /_dash-component-suites/dash_html_components/bundle.js?v=0.10.0 HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET /_dash-component-suites/dash_table_experiments/bundle.js?v=0.6.0 HTTP/1.1" 500 -
Traceback (most recent call last):
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1997, in __call__
    return self.wsgi_app(environ, start_response)
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1985, in wsgi_app
    response = self.handle_exception(e)
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1540, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/usr/local/lib/python3.5/dist-packages/flask/_compat.py", line 33, in reraise
    raise value
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/usr/local/lib/python3.5/dist-packages/flask/_compat.py", line 33, in reraise
    raise value
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "/usr/local/lib/python3.5/dist-packages/flask/app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "/usr/local/lib/python3.5/dist-packages/dash/dash.py", line 289, in serve_component_suites
    pkgutil.get_data(package_name, path_in_package_dist),
  File "/usr/lib/python3.5/pkgutil.py", line 629, in get_data
    return loader.get_data(resource_name)
  File "<frozen importlib._bootstrap_external>", line 818, in get_data
    
FileNotFoundError: [Errno 2] No such file or directory: '/home/dev-rahma/Workspace/dash-table-experiments/dash_table_experiments/bundle.js'
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET /_dash-component-suites/dash_core_components/plotly-1.35.2.min.js?v=0.22.0 HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET /_dash-component-suites/dash_core_components/bundle.js?v=0.22.0 HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:45] "GET /_dash-component-suites/dash_renderer/bundle.js?v=0.12.1 HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:46] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:46] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [05/Apr/2018 19:23:46] "POST /_dash-update-component HTTP/1.1" 200 -

Version.py not found error

I'm trying to run usage.py and am getting the message:

    exec(open('dash_table_experiments/version.py').read(), main_ns)
FileNotFoundError: [Errno 2] No such file or directory: 'dash_table_experiments/version.py'

I've made sure dash_table_experiments was updated just to verify that wasn't the issue. Any ideas? Thanks!

Issue parsing metadata

In order to transpile components to R, I need to parse metadata.json, but currently it's referencing an undefined BORDER variable --

"value": "{\n 'container': {\n 'font-size': '1rem'\n },\n 'cell': {\n 'white-space': 'nowrap',\n 'border-left': BORDER,\n 'border-bottom': BORDER,\n 'border-top': 'none',\n 'border-right': 'none',\n 'text-overflow': 'ellipsis',\n 'overflow-x': 'hidden',\n 'box-sizing': 'border-box'\n },\n 'cell-rightmost': {\n 'border-right': BORDER\n },\n 'header': {\n 'text-align': 'left',\n 'border-left': BORDER,\n 'border-bottom': BORDER,\n 'border-top': BORDER,\n 'font-weight': 600,\n 'display': 'inline-block',\n 'box-sizing': 'border-box'\n },\n 'header-rightmost': {\n 'border-right': BORDER\n }\n}",

If it isn't an easy fix, I suppose I could manually replace it with the value defined here, but it'd be great if we had some sort of test for undefined variables in metadata (and, if found, npm install would fail) --

const BORDER = 'thin lightgrey solid';

Boolean values not showing

Hello there,

Boolean values show up empty in a data table. You can reproduce with the following code:

df = pd.DataFrame({'boolean_column': [True, False, True]})

app.layout = html.Div(children=[
    dt.DataTable(
        rows=df.to_dict('records'),
        columns=df.columns,
        editable=False,
        filterable=True,
        sortable=True,
        id='datatable'
    ),
])

As a workaround I used rows=df.astype(str).to_dict('records')

Cannot dynamically create tables

Hello,

Tables are great, they work fine when used in a layout directly, something like this is OK:

app.layout = html.Div([
    html.Div(id='div1'),
    html.Div(id='div2'),
    html.Div(id='div3',children=[dt.DataTable(id='users table', rows=[{}], columns=['', 'col1', 'col2', 'col3', 'col4', 'col5'], filterable=True, sortable=True)])
])

But if you have a function create the table dynamically and assign it to the layout, tables do not even show up. This is needed for cases where you change the page content dynamically based on other inputs, for example If you decide whether to make a table or plot some figure based on a button, or if you want to have tables inside a tab body or so you'd have to do something like this:

app.layout = html.Div([
    html.Div(id='div1'),
    html.Div(id='div2'),
    html.Div(id='div3')
])

@app.callback(Output(div3', 'children'),
            [Input('dropdown1', 'value')])
def display_table(dropdown1_value):
    return dt.DataTable(id='users table', rows=[{}], columns=['', 'col1', 'col2', 'col3', 'col4', 'col5'], filterable=True, sortable=True)

This doesn't work, The table doesn't show up at all, and no error messages are printed.

CC conditional colouring

Not sure if this is within scope of this project but being able to write methods to conditionally colour rows would be fantastic

sort/selected rows reset while using PreventUpdate exception on callback

When using table and PreventUpdate exception on a callback, although the table data is not changed as expected by raising PreventUpdate , table sort/selected indexes seem to reset.

Checked the periodic http call for the interval component, seem to return expected 204/no content response, but still triggering table filter/sort/selections

related threads:
plotly/dash#190
#64

http response:
HTTP/1.0 204 NO CONTENT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Server: Werkzeug/0.14.1 Python/3.6.3
Date: Mon, 11 Jun 2018 08:52:27 GMT

http request:
{"output":{"id":"datatable-simple","property":"rows"},"inputs":[{"id":"my-interval","property":"n_intervals","value":538}]}

app
import datetime
import sys
import pandas as pd

app = dash.Dash()

DF_SIMPLE = pd.DataFrame({
'x': ['A', 'B', 'C', 'D', 'E', 'F'],
'y': [4, 3, 1, 2, 3, 6],
'z': ['a', 'b', 'c', 'a', 'b', 'c']
})

app.layout = html.Div([
html.H4('DataTable Sample',id="app_title"),
dt.DataTable(
rows=DF_SIMPLE.to_dict('records'),id='datatable-simple'
),
dcc.Interval(id='my-interval', interval=5000),
], className="container")

app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

@app.callback(
Output('datatable-simple', 'rows'),
[Input('my-interval', 'n_intervals')])
def update_table(n):
print("Checking...")
raise dash.exceptions.PreventUpdate("No data changed!")

Resetting filter rows

Amazing to see these experiments!

An issue is that the FILTER ROWS doesn't reset after search. The following steps are to reproduce the issue:

1- Build the table with multiple columns.
2- Use FILTER ROWS to filter the table by a value of one column.
3- Press the FILTER ROWS to show the filtered table without the search boxes.
4- The only way to restore the the unfiltered table is to refresh the page as the search boxes doesn't hold the filtering value.

Let me know if I am missing something. Thanks J

feature request: Hello World Example

Is it possible to include a hello world example? The current usage.py contains unnecessary complexity.

As a new user I find it hard to understand how to parse a pandas.DataFrame into a dt.DataTable component and I didnt't pay much attention to the 'records' setting in to_dict().
A hello world example would just launch an app with a dt.DataTable component from a simple pandas dataframe. Something like:

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import json
import pandas as pd
import numpy as np
import plotly

app = dash.Dash()

app.scripts.config.serve_locally = True

df_simple = pd.DataFrame({
    'x': ['A', 'B', 'C', 'D', 'E', 'F'],
    'y': [4, 3, 1, 2, 3, 6],
    'z': ['a', 'b', 'c', 'a', 'b', 'c']
})


app.layout = html.Div([
    html.H4('Hello World'),
    dt.DataTable(
        # The df.to_dict("records") will create a list of dictionaries that dash can handle. 
    	rows = df_simple.to_dict("records")
    	)
    ])

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

Resizing of Columns

There's a slight problem with the column widths:

image

When there's too many columns, it looks like there isn't sufficient width to get all the text showing correctly.

Making users aware that the table is sortable...

In terms of user experience we have received comments that users were unaware that the table was actually sortable although this was indeed the case.

This could perhaps be resolved by displaying the black triangle pointing down (or up if ASC) in the column header by default when the sortColumn and sortDirection property have been defined for the DataTable component... This is a minor issue but could perhaps easily be resolved?!

How to increase DataTables Height ? (To show more rows)

Love your work so far, keep it up!

Would someone be able to help me, increase the visible rows on the screen at one time, such as in the example usage.py.

I've tried adding another kwarg of min_height=1200 (to the DataTable object), however this has no effect of increasing the amount of rows visible (Height of the DataTable). Would you be so kind as to advise how to increase the height of a DataTable / to show more rows on the screen, with perhaps the necessary modifications to usage.py example to illustrate this ?

Thank you so much for your time,
Many thanks,

Sam

How to avoid a filter weirdness

Hi there, i have a dash table with a 'gender' column that contains values 'male', 'female', and 'other'.
When i filter that column by inputing the word 'male', then 'female' values still appear.
I think this is because the filter is searching for substrings, and 'male' is a substring of both 'male' and 'female'.
How can avoid this situation and simply get 'male' values when i type 'male' in the filter box?
For example, can i disable searching on substrings?

Scroll bar removal

I'm not sure if this has been done somewhere, or if it's related to "row_scroll_timeout", but it would be good if there a way to edit the height of the table or remove the vertical scroll bar in the table, i.e. have it span across x rows rather than a set amount or a set height

How to get the data of the selected rows?

For now, I use the selected_row_indices to get the corresponding rows of pandas dataframe, but after clicking the column head to sort data, using selected_row_indices can't get the corresponding rows of df. Is it possible to get the data of the selected rows, not just the indices?

Thanks.

AttributeError: module 'dash_table_experiments' has no attribute 'DataTable'

Setup:

Jupyter Lab Version 0.32.1 and
PyCharm 2018.1.4 (Community Edition)
Build #PC-181.5087.37, built on May 24, 2018
JRE: 1.8.0_152-release-1136-b39 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0
Python 3.6.5

Relevant Library Versions:

chardet==3.0.4
click==6.7
Cython==0.28.2
dash==0.21.0
dash-core-components==0.22.1
dash-html-components==0.10.0
dash-renderer==0.12.1
dash-table-experiments==0.6.0
decorator==4.3.0
nbformat==4.4.0
numpy==1.14.2
pandas==0.22.0
pandas-datareader==0.6.0
plotly==2.5.1
python-dateutil==2.7.2
pytz==2018.4
requests==2.18.4
urllib3==1.22
Werkzeug==0.14.1

When I run any code in Pycharm or Jupyter involving dt.DataTable() I get the following error:

AttributeError: module 'dash_table_experiments' has no attribute 'DataTable'

Steps I have taken:

  1. Tried the code on Jupyter Lab IDE to see if it was an IDE problem
  2. Uninstalled and reinstalled dash-table-experiments
  3. pip install [package_name] --upgrade for the following libraries:

dash 0.21.1
dash-core-components 0.23.0
dash-html-components 0.11.0
dash-renderer 0.13.0
dash-table-experiments 0.6.0
plotly 2.7.0

None of these 3 steps helped to resolve the problem.

Does anyone know how I can fix this so that I can begin to use this amazing package?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.