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:
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:
<script language="javascript" type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.2/dist/js/tabulator.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/tabulator-extensions@0.0.2/formatters/formatters-numbers.js"></script>
<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/tabulator-extensions@0.0.2/formatters/formatters-inputs.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.8.2/dist/css/tabulator.min.css" type="text/css">
<body style="font-size:12px;font-family:Calibri;margin:0px;background:#FFFFFF;color:#000000"><div id="table_2005485509544" style="font-size:inherit;font-family:inherit;box-sizing:border-box;width:100%;background:None" class="cssdivnoborder csstabulator"></div></body>
<script>
var table_2005485509544_obj = new Tabulator("#table_2005485509544", {layout: "fitColumns", columns: [{field: "name", title: "name"},{field: "type", title: "type"},{field: "rating", title: "rating", formatter: "cssStyle", formatterParams: {"css": {"color": "blue"}}},{field: "change", title: "change", formatter: "numbers", formatterParams: {"format": "%v", "symbol": "", "precision": 6, "thousand": ",", "decimal": "."}}], selectable: false, index: "_row", pagination: "local", paginationSize: 25, resizableRows: false, movableColumns: true, data: [{"name": "C", "type": "code", "rating": 17.07, "change": 12.82}, {"name": "Java", "type": "code", "rating": 16.28, "change": 0.28}, {"name": "Python", "type": "script", "rating": 9.12, "change": 1.29}, {"name": "C++", "type": "code", "rating": 6.13, "change": -1.97}, {"name": "C#", "type": "code", "rating": 4.29, "change": 0.3}, {"name": "Visual Basic", "type": "script", "rating": 4.18, "change": -1.01}, {"name": "JavaScript", "type": "script", "rating": 2.68, "change": -0.01}, {"name": "PHP", "type": "script", "rating": 2.49, "change": 0}, {"name": "SQL", "type": "script", "rating": 2.09, "change": -0.47}, {"name": "R", "type": "script", "rating": 1.85, "change": 0.9}]})
</script>
From Python using Epyk:
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
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):
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.
Editors
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
:
Formatters
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
Mutators
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:
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:
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.