Tabulator extensions

A set of components for Tabulator in order to customise the display of columns and cells.

Those components are maintained by Epyk Team and they are designed to work with the Python Epyk-ui.
The goal of this project being to extend the rich Python ecosystem with selected JavaScript features and render modern and interactive pages.


If you are interested in this project please have a look at the below repositories:
- Epyk-ui
- Epyk-studio


Presentation
================================
This repository will provide some pre-defined Formatters, Editors and Mutators for Tabulator.
Those bespoke components need to be integrated to your project in a traditional way and they will enrich the scope of features
already available in Tabulator.

If you need more details regarding this concept please refer to the official Tabulator website.
The documentation is really good and the set of examples allow to understand quickly those concepts.


Quickstart
================================

From HTML / Javascript:

``html

`

From Python using Epyk:

`py
from epyk_studio.core.Page import Report
from epyk.tests import mocks

page = Report()
table = page.ui.table(mocks.languages)

table.get_column("rating").exts.formatters.style({"color": 'blue'})
table.get_column("change").exts.formatters.number(precision=6)
`

In a static web page:

#### Client side

`py
from epyk_studio.core.Page import Report
from epyk.core.data import events

page = Report()
table = page.ui.table()

page.ui.button("click").click([
page.js.post("/table").onSuccess([
table.js.columns(events.data['columns']), table.build(events.data["data"])
])
])
`

#### Server Side

In a dynamic web page (using Flask):

`py
import random

@app.route('/table', methods=["POST"])
def table():
import random

line_data = [{"x": i, "y": random.randint(1, 100), "y1": random.randint(1, 100), "y2": random.randint(1, 100)} for i in range(10)]
records = [{{"col_%s" % j: random.randint(1, 100} for j in range(10)} for i in range(50)]

return jsonify({
'columns': [{'formatter': 'cssStyle', 'formatterParams': {'css': {"color": 'red', 'background-color': 'blue'}},
'field': "col_%s" % j, 'title': "col_%s" % j} for j in range(10)],
'data': records, 'line_data': line_data, 'bar_data': line_data, 'multi_data': line_data
})
`


Compatibility
================================

Epyk is compatible with the most common Web Python Frameworks (Flask and Django).
By default, the server package embeds a Flask app as it is easier to install and ready to use.

Usage
======

This package contains the below features and they can be used like any
standard Tabulator object supplying the expected set of parameters.

Those features are grouped per file and type of object.

$3

#### Dates

datePlus: This will display a proper DatePicker object in a cell, using Jquery UI library.

Epyk is importing the dependancies on the fly on the Js side - please make sure the import is satisfyed.

#### Inputs

inputPlus:

inputExcel: This will properly consider the letter passed in the cell and it will convert them to multipliers.
This is a way to have shortcuts for K, M factors.


#### Selects

selectPlus:

selectConditiions:

selectMultiConditions:

$3

#### Drops

dragAndDrop:


#### Icons

icon:

iconMapPivot:


#### Inputs

cssStyle:

cssStylePivot:

password:

lookupPivot:

labelThresholds:

flagThresholdsPivot:

#### Numbers
Those Formmatters will use as underlying package the accounting.js module.

Namely the below formatter parameters can be supplied in order to benefit from the various features available in this library.
For more details about the Accounting library, please have a look at the official website.
- css: Dictionary. The CSS attributes for the cell (Optional)
- decimal: String. decimal point separator default "."
- thousand: String. thousands separator default ","
- precision: Integer. decimal places default 0
- symbol: default currency symbol is ''
- format: String. "%s%v" controls output: %s = symbol, %v = value/number (can be object: see below)

numbers:
formatterParams: {css: {{}}}

numbersFormat:
formatterParams: {css: {{}}, colors:[], threshold: value, color: }

numbersDifference:
formatterParams: {css: {{}}, colors:[], threshold: value, color: }

with:
css: Dictionary. The CSS attributes which will be applied to the cell object
color: String. The color of the cell content

or
css: Dictionary. The CSS attributes which will be applied to the cell object. (Optional)
threshold: String. Float. The pivot value to change the color of the cell content
colors: [colorelow, colorAbove]

numbersThreshold:
formatterParams: {css: {{}}, thresholds:[]}

numbersThresholdPivot:
formatterParams: {css: {{}}, thresholds:[], pivot: columnName}

numbersIntensity:
formatterParams: {css: {}, steps:[], colors: [], intensity: columnName}

numbersQuality:
formatterParams: {css: {}, steps:[], colors: [], intensity: columnName, colors2: [] , quantity: columnName}

This module is using as underlying d3.js

$3

From Tabulator's website:

Mutators (setters) and Accessors (getters) allow you to manipulate the table data as it enters and leaves your Tabulator, allowing you to convert values for use in your table and then change them again as they leave.

#### Inputs

formatNumbers

formatStrings

Tips
==================
If you want to surcharge an existing feature without having to reimplement the entiere component you can do the below:

For example the below will change the return cell object and add extra CSS styles:
`js
function(cell, formatterParams){
const cssAttrs = formatterParams.css;
var cell = cell.getTable().modules.format.getFormatter('number').call(cell.getTable().modules.format, cell, formatterParams);
let frag = document.createRange().createContextualFragment(cell).firstChild;
Object.keys(cssAttrs).forEach(function(key){frag.style[key] = cssAttrs[key]});
return frag; }
`

From Epyk in Python you can do the below:

`py
table.get_column('column_name').formatters.wrapper('number', formatterParams)
``

Next features
==================

More features will be implemented in this package to:
- make visible data overrides



Contributing
==================

All those projects are collaborative projects so please feel free to give your feedbacks but also to help improve it by fixing bugs and
bringing new ideas. This will benefit both the JavaScript ecosystem but also the Python community using Epyk to generate
websites.

Please create an issue in this project for any request.