Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for passing function handles as columns formatters #11

Merged
merged 1 commit into from
Dec 17, 2020

Conversation

emilhe
Copy link
Contributor

@emilhe emilhe commented Nov 28, 2020

The purpose of this pull request is to demonstrate how function handles can be passed from Dash to JavaScript. The only required change to the source code (apart from importing dash-extensions) is the following lines,

for(let i=0; i < columns.length; i++){
    columns[i] = resolveProps(columns[i], ["formatter"])
} 

which converts data passed from Dash into the desired function handle. Now, if you define the function in a JavaScript asset (i.e. in a *.js file in the assets folder),

window.myNamespace = Object.assign({}, window.myNamespace, {
    tabulator: {
        printIcon: function (cell, formatterParams, onRendered) {
            return "<i class='fa fa-print'></i>";
        }
    }
});

it can be passed to the component with the following syntax,

from dash_extensions.javascript import Namespace
...
ns = Namespace("myNamespace", "tabulator")
...
columns = [{"formatter": ns("printIcon")}, ...]

which yields a table with the custom format as intended,

Screenshot from 2020-11-28 17-22-35

Here is the complete python code,

import dash_tabulator
import dash
import dash_html_components as html
from dash_extensions.javascript import Namespace

# The namespace here must match the name space of the JavaScript asset.
ns = Namespace("myNamespace", "tabulator")
# Setup some data
columns = [
    {"title": "Name", "field": "name", "width": 150, "headerFilter": True, "editor": "input"},
    {"title": "Print", "field": "print", "hozAlign": "center", "formatter": ns("printIcon")}
]
data = [
    {"id": 1, "name": "Oli Bob", "print": "stuff1"},
    {"id": 2, "name": "Mary May", "print": "stuff2"},
]
# Create example app.
external_stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
                        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dash_tabulator.DashTabulator(id='tabulator', columns=columns, data=data),
])

if __name__ == '__main__':
    app.run_server(debug=False, port=7777)

@pjaol
Copy link
Contributor

pjaol commented Dec 17, 2020

Looks good, missing the requirements.txt update, will update here
Thank you this is a fantastic contribution!

@pjaol pjaol merged commit 01a33a6 into preftech:master Dec 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants