OptTableDatatable Module

class epyk.core.html.options.OptTableDatatable.AOColumns(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
class epyk.core.html.options.OptTableDatatable.Ajax(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property type

Related Pages:

https://datatables.net/manual/server-side

property url

Related Pages:

https://datatables.net/manual/server-side

class epyk.core.html.options.OptTableDatatable.Column(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property cellType

Change the cell type created for the column - either TD cells or TH cells.

Related Pages:

property className

Quite simply this option adds a class to each cell in a column, regardless of if the table source is from DOM, Javascript or Ajax. This can be useful for styling columns.

Related Pages:

Return type:

EnumStyleOptions

property contentPadding

Add padding to the text content used when calculating the optimal width for a table.

Related Pages:

property defaultContent

Set default, static, content for a column.

Related Pages:

property name

When working with DataTables’ API, it is very common to want to be able to address individual columns so you can work with them (you wish to sum the numeric content of a column for example). DataTables has two basic methods of addressing columns.

Related Pages:

property orderData

Define multiple column ordering as the default order for a column.

Related Pages:

property orderDataType

Live DOM sorting type assignment.

Related Pages:

property orderSequence

You can control the default ordering direction, and even alter the behaviour of the order handler (i.e. only allow ascending sorting etc) using this parameter.

Related Pages:

property orderable

Using this parameter, you can remove the end user’s ability to order upon a column. This might be useful for generated content columns, for example if you have ‘Edit’ or ‘Delete’ buttons in the table.

Related Pages:

property render

This property will modify the data that is used by DataTables for various operations as it is read from the data source. columns.render can be considered to be the read only companion to columns.data which is read / write (and therefore more complex).

Related Pages:

property searchable

Using this parameter, you can define if DataTables should include this column in the filterable data in the table. You may want to use this option to disable search on generated columns such as ‘Edit’ and ‘Delete’ buttons for example.

Related Pages:

property style

Change some CSS attributes to the internal HTML component.

Related Pages:

Prop values:

The CSS attributes.

property title

Set the column title.

Related Pages:

property visible

Enable or disable the display of this column.

Related Pages:

property width

Column width assignment.

Related Pages:

class epyk.core.html.options.OptTableDatatable.ColumnDef(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property orderData

Define multiple column ordering as the default order for a column.

Related Pages:

property searchable

Enable or disable search on the data in this column.

Related Pages:

property targets

The columnDefs option allows a column definition object to be defined and then assigned to one or more columns in a DataTable, regardless of the order of the column definitions array, or the order of the columns in the table.

Related Pages:

property visible

Enable or disable the display of this column.

Related Pages:

class epyk.core.html.options.OptTableDatatable.EnumStyleOptions(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
center(header_only: bool = False, body_only: bool = False)

Usage:

Related Pages:

Parameters:

  • header_only –

  • body_only –

justify(header_only: bool = False, body_only: bool = False)

Usage:

Related Pages:

Parameters:

  • header_only –

  • body_only –

left(header_only: bool = False, body_only: bool = False)

Usage:

Related Pages:

Parameters:

  • header_only –

  • body_only –

nowrap(header_only: bool = False, body_only: bool = False)

Usage:

Related Pages:

Parameters:

  • header_only –

  • body_only –

right(header_only: bool = False, body_only: bool = False)

Usage:

Related Pages:

Parameters:

  • header_only –

  • body_only –

class epyk.core.html.options.Enums(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
property item

Return the option object on which the key, value will be added.

property key

Returns the predefined enumeration key which will be added with this object.

class epyk.core.html.options.OptTableDatatable.Language(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property decimal

Decimal place character.

Related Pages:

property url

Related Pages:

https://datatables.net/manual/i18n

class epyk.core.html.options.Options(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property builder

Add a JavaScript Builder function to the options.

This will be used to automatically map the Python component to its corresponding JavaScript builder function used by the build method.

Usage:

but = page.ui.button()
but.options.builder = "Button"
Prop value:

The JavaScript builder function name.

property config_default

The default value for the configuration in case of template.

Default value is an empty string.

Usage:

component.options.config_default = {"value": "test"}
config_html()

Return the HTML options used by the python and passed to the HTML.

Those options will not be available in the JavaScript layer and they are only defined either to build the HTML from Python or to set some HTML properties.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

config_js(attrs: Optional[dict] = None)

Return the JavaScript options used by the builders functions.

Builder functions can be defined in the framework or external from the various packages.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

Parameters:

attrs – Optional. The extra or overridden options

custom_config(name: str, value: Any, js_type: bool = False)

Add a custom JavaScript configuration.

Usage:

chart = page.ui.charts.apex.scatter()
chart.options.chart.zoom.custom_config("test", False)
Parameters:

  • name – The key to be added to the attributes

  • value – String or JString. The value of the defined attributes

  • js_type – Optional. Specify if the parameter is a JavaScript fragment

details()

Retrieve the defined properties details.

This function will return a dictionary with all the component attributes (required and optional) ones. It will provide the full available description of those components.

Usage:

but = page.ui.button()
pprint.pprint(but.options.details(), indent=4)
from_json(vals: dict, schema: Optional[dict] = None)

Load the option schema for a component from a json string.

TODO: add more feature to handle functions and enumeration

Parameters:

  • vals – The input schema

  • schema – The full object schema

has_attribute(cls_obj, name: Optional[str] = None)

Add an extra sub layer to the data structure.

The key in the object representation will be the function name.

Parameters:

  • cls_obj – Class. The sub data class used in the structure definition

  • name – The sub attribute name

isJsContent(property_name: str)

Check if the content of a property is defined to always be a JavaScript fragment.

Thus the framework will not convert it to a Json content.

Usage:

div = page.ui.div()
print(div.options.isJsContent("inline"))
Parameters:

property_name – The property name

property managed

Boolean flag to set if the component needs to be added to the page.

If set to False the component has to be managed manually in the page.

Usage:

but = page.ui.button()
but.options.managed = False
Prop bool:

Flag to specify if this component is automatically managed by the page

optional()

Return all options not added to the HTML component by default.

Those are options which will impact either the Python or the JavaScript builders.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.optional(), indent=4)
property profile

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Flag to display / hide warning logs generated by the framework.

required()

Return all the mandatory / required options with the default values.

Those options are added by the framework to provide a default for the HTML components but they can be changed.

System options are also added to this category as they are always available in any HTML components.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.required(), indent=4)
set_attrs(vals: dict)

Set the object internal attributes.

Parameters:

vals – All the attributes to be added to the component

property style

Change some CSS attributes to the internal HTML component.

Related Pages:

Prop values:

The CSS attributes.

update_config(attrs: dict)

Update the option configuration.

Parameters:

attrs – The attributes to set

property verbose

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Boolean. Flag to display / hide warning logs generated by the framework.

class epyk.core.html.options.OptTableDatatable.Search(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property caseInsensitive

Flag to indicate if the filtering should be case insensitive or not.

Related Pages:

property regex

Regular expressions can be used to build fantastically complex filtering terms, but also it is perfectly valid for users to enter characters such as * into the filter, so a decision needs to be made if you wish to escape regular expression special characters or not.

This option controls that ability in DataTables.

Related Pages:

property search

The search option allows the way DataTables performs filtering to be set during the initialisation, and to set an initial global filter.

Related Pages:

property smart

DataTables’ built-in filtering is “smart” in that it breaks the user’s input into individual words and then matches those words in any position and in any order in the table (rather than simple doing a simple string compare).

Related Pages:

class epyk.core.html.options.OptTableDatatable.TableConfig(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property ajax

DataTables can obtain the data that it is to display in the table body from a number of sources, including from an Ajax data source, using this initialisation parameter. As with other dynamic data sources, arrays or objects can be used for the data source for each row, with columns.data employed to read from specific object properties.

Related Pages:

property aoColumns

AOColumns

Type:

rtype

property autoWidth

Enable or disable automatic column width calculation. This can be disabled as an optimisation (it takes a finite amount of time to calculate the widths) if the tables widths are passed in using

Related Pages:

property columnDefs

Very similar to columns, this parameter allows you to assign specific options to columns in the table, although in this case the column options defined can be applied to one or more columns. Additionally, not every column need be specified, unlike columns.

Related Pages:

Return type:

ColumnDef

property columns

The columns option in the initialisation parameter allows you to define details about the way individual columns behave. For a full list of column options that can be set, please see the related parameters below.

Related Pages:

Return type:

Column

property data

DataTables can obtain the data it is to display in the table’s body from a number of sources, including being passed in as an array of row data using this initialisation parameter. As with other dynamic data sources, arrays or objects can be used for the data source for each row, with columns.data employed to read from specific object properties.

Related Pages:

property deferLoading

When using server-side processing, the default mode of operation for DataTables is to simply throw away any data that currently exists in the table and make a request to the server to get the first page of data to display. This is fine for an empty table, but if you already have the first page of data displayed in the plain HTML, it is a waste of resources. As such, this option exists to allow you to instruct DataTables to not make that initial request, rather it will use the data already on the page (no sorting etc will be applied to it).

Related Pages:

property deferRender

By default, when DataTables loads data from an Ajax or Javascript data source (ajax and data respectively)

Related Pages:

property destroy

Initialise a new DataTable as usual, but if there is an existing DataTable which matches the selector, it will be destroyed and replaced with the new table. This can be useful if you want to change a property of the table which cannot be altered through the API.

Related Pages:

property displayStart

Define the starting point for data display when using DataTables with pagination.

Related Pages:

property dom

DataTables will add a number of elements around the table to both control the table and show additional information about it. The position of these elements on screen are controlled by a combination of their order in the document (DOM) and the CSS applied to the elements. This parameter is used to control their ordering and additional mark-up surrounding them in the DOM.

Related Pages:

property info

When this option is enabled, Datatables will show information about the table including information about filtered data if that action is being performed. This option allows that feature to be enabled or disabled.

Related Pages:

property language

Language configuration options for DataTables.

Related Pages:

Return type:

Language

property lengthChange

When pagination is enabled, this option will control the display of an option for the end user to change the number of records to be shown per page. The options shown in the list are controlled by the lengthMenu configuration option.

Related Pages:

property lengthMenu

This parameter allows you to readily specify the entries in the length drop down select list that DataTables shows when pagination is enabled. It can be either:

Related Pages:

order(column, direction)

If ordering is enabled (ordering), then DataTables will perform a first pass order during initialisation. Using this parameter you can define which column(s) the order is performed upon, and the ordering direction. The order must be an array of arrays, each inner array comprised of two elements:

Related Pages:

Parameters:

  • column – String. The column name

  • direction – String the direction (asc, desc)

property orderCellsTop

Allows control over whether DataTables should use the top (true) unique cell that is found for a single column, or the bottom (false - default) to attach the default order listener. This is useful when using complex headers.

Related Pages:

property orderClasses

DataTables highlight the columns which are used to order the content in the table’s body by adding a class to the cells in that column, which in turn has CSS applied to those classes to highlight those cells.

Related Pages:

property orderFixed

The option works in tandem with the order option which provides an initial ordering state for the table which can then be modified by the user clicking on column headings, while the ordering specified by this option will always be applied to the table, regardless of user interaction.

Related Pages:

property orderMulti

When ordering is enabled (ordering), by default DataTables allows users to sort multiple columns by shift clicking upon the header cell for each column. Although this can be quite useful for users, it can also increase the complexity of the order, potentiality increasing the processing time of ordering the data. Therefore, this option is provided to allow this shift-click multiple column ability.

Related Pages:

property ordering

Enable or disable ordering of columns - it is as simple as that! DataTables, by default, allows end users to click on the header cell for each column, ordering the table by the data in that column. The ability to order data can be disabled using this option.

Related Pages:

property pageLength

Number of rows to display on a single page when using pagination.

Related Pages:

property paging

DataTables can split the rows in tables into individual pages, which is an efficient method of showing a large number of records in a small space. The end user is provided with controls to request the display of different data as the navigate through the data. This feature is enabled by default, but if you wish to disable it, you may do so with this parameter.

Related Pages:

property pagingType

The pagination option of DataTables will display a pagination control below the table (by default, its position can be changed using dom and CSS) with buttons that the end user can use to navigate the pages of the table. Which buttons are shown in the pagination control are defined by the option given here.

Related Pages:

property processing

Enable or disable the display of a ‘processing’ indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries.

Related Pages:

property renderer

DataTables adds complex components to your HTML page, such as the pagination control. The business logic used to calculate what information should be displayed (what buttons in the case of the pagination buttons) is core to DataTables and generally doesn’t vary how the buttons are actually displayed based on the styling requirements of the page.

Related Pages:

property retrieve

Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables

Related Pages:

property rowId

It can often be useful to have a id attribute on each tr element in a DataTable for row selection and data source identification, particularly when using events.

Related Pages:

property rowsGroup

The Datatables feature plugin that groups rows (merge cells vertically) in according to specified columns. It’s inspired by [fnFakeRowspan] (https://datatables.net/plug-ins/api/fnFakeRowspan) DataTables plugin.

https://github.com/ashl1/datatables-rowsgroup

property scrollCollapse

When vertical (y) scrolling is enabled through the use of the scrollY option, DataTables will force the height of the table’s viewport to the given height at all times (useful for layout). However, this can look odd when filtering data down to a small data set, and the footer is left “floating” further down.

Related Pages:

property scrollX

Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled.

Related Pages:

property scrollY

Enable vertical scrolling. Vertical scrolling will constrain the DataTable to the given height, and enable scrolling for any data which overflows the current viewport. This can be used as an alternative to paging to display a lot of data in a small area (although paging and scrolling can both be enabled at the same time if desired).

Related Pages:

property search

The search option allows the way DataTables performs filtering to be set during the initialisation, and to set an initial global filter.

Related Pages:

Return type:

Search

property searchCols

Basically the same as the search option, but in this case for individual columns, rather than the global filter, this option defined the filtering to apply to the table during initialisation.

Related Pages:

property searchDelay

The built-in DataTables global search (by default at the top right of every DataTable) will instantly search the table on every keypress when in client-side processing mode and reduce the search call frequency automatically to 400mS when in server-side processing mode.

Related Pages:

property serverSide

By default DataTables operates in client-side processing mode, but can be switched to server-side processing mode using this option. Server-side processing is useful when working with large data sets (typically >50’000 records) as it means a database engine can be used to perform the sorting etc calculations - operations that modern database engines are highly optimised for, allowing use of DataTables with massive data sets (millions of rows).

Related Pages:

property stateDuration

Duration for which the saved state information is considered valid. After this period has elapsed the state will be returned to the default.

Related Pages:

property stateSave

Enable or disable state saving. When enabled aDataTables will store state information such as pagination position, display length, filtering and sorting. When the end user reloads the page the table’s state will be altered to match what they had previously set up.

Related Pages:

property stripeClasses

An array of CSS classes that should be applied to displayed rows, in sequence. This array may be of any length, and DataTables will apply each class sequentially, looping when required.

Related Pages:

property tabIndex

By default DataTables allows keyboard navigation of the table (sorting, paging, and filtering) by adding a tabindex attribute to the required elements.

Related Pages: