Use Data Tables

A table page looks like this:

@app.page('/', 'Table')
def table_page():
    return [
        Card(content = [
            DataTable("Example Table", columns=table_columns,
                data=TableResult(table_data))])
    ]
_images/simple_table_screenshot.png

We use DataTable class to construct a table with data:

class adminui.DataTable(title='', columns=[], data=[], row_actions=[], table_actions=[], filter_form=None, on_data=None, size='default', scroll_x=None, scroll_y=None, id=None)

Insert a data table to the page

Parameters:
  • title – the title of the table
  • columns

    a list-of-dictionaries as column definition. e.g.: [ {‘title’: ‘Rule Name’, ‘dataIndex’: ‘name’}, …other columns] [ {‘title’: ‘Rule Name’, ‘dataIndex’: ‘name’, ‘sorter’: True, ‘filterOptions’: [‘abc’, ‘def’]}, …other columns] for each column,

    title: the column title dataIndex: its key for the TableResult data dictionary (optional) sorter: (True/False) the column is sortable (optional) filterOptions: ([strings]) a list of options shown as filters (optional) linkTo: display the data as a link to another field of the dataIndex specified (optional) status: dataIndex of another column, shown as the status badge fo the data. The value of the other column must be one from success | processing | default | error | warning
  • data – a TableResult object for the initial data of the table
  • row_actions – a list of TableRowAction objects, which means actions shown on each row. Leave it blank if you don’t need any action
  • table_actions – a list of page elements shown on top of the table. Controls such as “New Item” buttons could be listed here.
  • on_data – a callback function that returns a TableResult object if the user turns a page. an argument will be passed as {‘current_page’:…, ‘page_size’:…, ‘sorter’: {sorted_column_data_index}_{ascend|decsend}} Leave it None if you’re sure there is only one page of data.
  • size – size of the table (default | middle | small)

Prepare data for a Table

DataTable needs a column definition and a data parameter. the data required in the columns field looks like this:

table_columns = [
    {'title': 'Rule Name', 'dataIndex': 'name'},
    {'title': 'Description', 'dataIndex': 'desc'},
    {'title': '# of Calls', 'dataIndex': 'callNo'},
    {'title': 'Status', 'dataIndex': 'status'},
    {'title': 'Updated At', 'dataIndex': 'updatedAt'}
]

each column is a dictionary, with title and dataIndex. dataIndex will be used as the key of the provided table rows data:

table_data = [
                "callNo": 76,
                "desc": "Description of Operation",
                "id": 0,
                "name": "Alpha",
                "status": 3,
                "updatedAt": "2019-12-13"
            },
            ... other rows
]

table_data need to be passed with a TableResult object:

DataTable("Example Table", columns=table_columns,
                data=TableResult(table_data))

TableResult will also be used in case of pagination.

Render a column as a badge

To render badges on columns, define the column as:

{'title': 'Rule Name', 'dataIndex': 'name', 'status': 'badgeStatus'},

Whereas badgeStatus in the example is the dataIndex of another column, whose value takes from success | processing | default | error | warning, which will be the appearance of the badge.

Use Filter Forms

_images/simple_table_filter_form.jpg

You may add a filter form, to let users search in your table. Each time the user submits the form or switch pages, values in the form will be passed along to the on_data callback.

To add filter form, set filter_form field in DataTable element:

DataTable("Example Table", columns=...,  data=..., on_data=on_page,
            filter_form=FilterForm([
                TextField('Rule Name'),
                TextField('Description'),
                SelectBox('Type', data=['One', 'Two', 'Three'], placeholder="Select One"),
                RadioGroup('Radio - Button', data=[['One', 1], ['Two', 2]], format='button'),
            ], submit_text='Filter', reset_text='Clear'),
            row_actions=[...],
            table_actions=[...])

Note that you can change the text on submit button and reset button, using submit_text and reset_text field.

Sortable and Filterable Columns

_images/simple_table_sorter.jpg

To make table column sortable, set sorter=True to the column definition:

table_columns = [
    {'title': '# of Calls', 'dataIndex': 'callNo', 'sorter': True},
    ...
]

Then, when the user click on the header of the column, on_data callback will receive an additional sorter argument like:

sorter: "callNo_descend"

Separated by underscore, the first part is the dataIndex field, the second part is descend or ascend according the current sorting status.

_images/simple_table_filter.jpg

To make a table column filterable, set filters on the column definition like:

{'title': 'Status', 'dataIndex': 'status', 'filters': [{'text': 2, 'value': 2}, {'text': 3, 'value': 3}]},

Then the column will be filterable. When the user filters some columns, on_data will receive arguments like:

filters: {status: "3,2"}

where the key will be the filtered column’s data index, and the value will be the filtered values, separated by commas.

Change the height of rows

pass size to DataTable will allow you to change the row height. You may choose from 'default' | 'middle' | 'small':

DataTable(..., size='small')

Scroll X for the table

setting the scroll_x and scroll_y attributes for DataTable, will let scroll bar show up when the table is too long. Useful for tables with many columns or rows:

DataTable(..., scroll_x=1000)

A complete example of table is listed here https://github.com/bigeyex/python-adminui/blob/master/python/example_table.py