Dash 4 1 1

1. Dash 4 1 1 0
2. Dash 4 1 10
3. Dash 4 1 11

Released:

Dash Plotly component providing Tabulator tables

Alameda Street, Vernon, CA 90058 TEL: 1 (323) 231-1460 FAX: 1 (323) 231-1465 © 2020 All Rights Reserved. 1 like 4 talking about this. Race Technology Dash 4 Pro demo. Fully customizable to show whatever parameters you want. Connected to Race Technology DL1 Data Logger and Link G4 ECU using.

Project description

• Dash Tabulator
• Advanced Usage

Dash tabulator is a Dash / Plotly component providing Tabulator capabilities.This is not a fully comprehensive implementation of Tabulator just the basics necessary to get the application working.Under the covers this uses react-tabulator

This is built on the shoulders of the Dash Plotly team, the Tabulator team, and the React Tabulator team.This readme is probably longer than the code, due to the work of those individuals!

Features

• Tabulator Column settings
  • Sorting / Filtering etc.
• Data loading through Dash Plotly callbacks
• Row Click Callbacks
• Data Changed Callbacks (contains the new data table, note warning on this)
• Cell Edit Callbacks, capture the cell that was just changed, requires setting 'editor':'input' etc. on column header
• Download button to export as csv / xlsx / pdf
  • XLSX & PDF require 3 party js scripts, see above link for details
• Javascript bindings
  • Contributed by Emil Haldrup Eriksen https://github.com/emilhe
  • See pull request https://github.com/preftech/dash-tabulator/pull/11

Installation

Installation can be done with pip in your dash project

Usage

Sample usage

Be aware registering a callback for dataChanged will send the entire table back each time a change occursMake sure you are conscious of the amount of data you are round tripping.

dataFiltering will return the filters before a match has occurred, usually a partial match

dataFiltered will return the header filter and the row data e.g.

Dash 4 1 1 0

Usage

Sample usage

Be aware registering a callback for dataChanged will send the entire table back each time a change occursMake sure you are conscious of the amount of data you are round tripping.

dataFiltering will return the filters before a match has occurred, usually a partial match

dataFiltered will return the header filter and the row data e.g.

Dash 4 1 1 0

Themes

React-Tabulator comes with several themes that can be used in Dash-TabulatorDash-Tabulator uses the default theme tabulator.min.cssThe theme can be set in the Dash-Tabulator constructore.g.

The following are the built in react-tabulator themes

• tabulator or default => react-tabulator/lib/css/tabulator.min.css
• tabulator_modern => react-tabulator/lib/css/tabulator_modern.min.css
• tabulator_midnight => react-tabulator/lib/css/tabulator_midnight.min.css
• tabulator_simple => react-tabulator/lib/css/tabulator_simple.min.css
• tabulator_site => react-tabulator/lib/css/tabulator_site.min.css
• bootstrap/tabulator_bootstrap => react-tabulator/lib/css/bootstrap/tabulator_bootstrap.min.css
• bootstrap/tabulator_bootstrap4 => react-tabulator/lib/css/bootstrap/tabulator_bootstrap4.min.css
• bulma/tabulator_bulma => react-tabulator/lib/css/bulma/tabulator_bulma.min.css
• materialize/tabulator_materialize => react-tabulator/lib/css/materialize/tabulator_materialize.min.css
• semantic-ui/tabulator_semantic-ui => react-tabulator/lib/css/semantic-ui/tabulator_semantic-ui.min.css

Multiple Row Selection

Tabulator supports multiple row selectionTo Enable the table option selectable must be set to the STRING true

Once selectable is set

multiRowsClicked will now contain an array of all the rows selectede.g.

Select all / deselect all can be accomplished with a header formatter called rowSelection.

For more options check out http://tabulator.info/docs/4.8/select

Javascript

Dash 4 1 10

Tabulator offers a significate amount of callbacks that allow for interactivity with tables to be capturedand modified http://tabulator.info/docs/4.8/callbacksTo enable this functionality we can use Dash-Extensions

Create an assets folder, add a javascript file with your custom functionsAn example is provided in assets/custom_tabulator.jsPlease follow the examples below

Javascript Cell Formatting Example

Contributed in https://github.com/preftech/dash-tabulator/pull/11Tabulator offers Javascript formatting of cells http://tabulator.info/docs/3.4?#formattingThis a browser side javascript method attached to a header colum.

• Create an assets directory
  • See https://dash.plotly.com/external-resources for customization options
• Add a javascript file with a window. method (below we call it myNamespace)
  • An example is provided in the assets/custom_tabulator.js file
  • Note the Namespace and the function printIcon
• Register that method in your python app
  • Using dash_extensions.javascript.Namespace
• Add the registered function to your colums formatter

Python code:

Javascript code: Dxo photolab 2 elite edition 2 1 2 25.

Javascript column resizing capture

Capturing a column resize, when a user drags a column widthFrom tabulators callbacks page http://tabulator.info/docs/4.8/callbacks#columnWe see there's a columnsResized callbackin our python code in the options dict we can specify a javascript method

assets/custom_tabulator.js

Dash 4 1 11

Within your python code, you can register this method as a tabulator option

A full list of callbacks available exists http://tabulator.info/docs/4.8/callbacks

Links

• Home Page https://github.com/preftech/dash-tabulator
• Tabulator from @olifolkerd http://tabulator.info/
• React-Tabulator from @ngduc https://github.com/ngduc/react-tabulator
• Dash / Plotly from @plotly https://plotly.com/dash/

Release historyRelease notifications | RSS feed

0.4.2

0.4.1

0.4.0

0.3.0

0.2.3

0.2.2

0.2.1

0.2.0

0.1.2

0.1.1

0.1.0

0.0.5

0.0.4

0.0.3

0.0.2

0.0.1

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Hashes for dash_tabulator-0.4.2.tar.gz