Simple Table example

[msrkala]

This Simple Table example is based on Quasar Components. Featured single component update.

It accepts JustPy components as row values, for example jp.QDiv.

#!/usr/bin/python3
# -*- coding: UTF-8 -*-

"""
simple_table.py
- provides general table component
"""
from __future__ import annotations
import justpy as jp
from typing import List, Set, Dict, Optional, Tuple, Final, Union


class SimpleTable(jp.QDiv):
    max_width: Final[str] = "max-width: 550px"
    color_header_text: Final[str] = "text-grey-7"
    selection_allowed_values: Final[Set[str]] = {'single', 'multiple', 'none'}

    class SortArrow(jp.Svg):
        color_enabled = "text-grey-7"

        def __init__(self, **kwargs):
            """
            sort_status: int property values:
             0 - disabled
             1 - asc
             2 - desc
            :param kwargs:
            """
            super().__init__(**kwargs)
            self._color_enabled = kwargs.get('color_enabled', self.color_enabled)
            self.aria_hidden = 'false'
            self.role = 'presentation'
            self.focusable = 'false'
            self.viewBox = '0 0 24 24'
            self.classes = f'q-icon inline-block notranslate sort-icon {self._color_enabled}'
            c2 = jp.Path(d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z', a=self)
            # values: 0 - disabled, 1 - asc, 2 - desc
            self._sort_status: int = 0
            self.show = True

        @property
        def sort_status(self):
            return self._sort_status

        def reset_sort(self):
            self._sort_status = 0

        def sort_toggle(self):
            if self.sort_status == 2:
                self._sort_status = 0
            else:
                self._sort_status += 1

        # def convert_object_to_dict(self):
        #     d = super().convert_object_to_dict()
        #     return d

    def __init__(self, wp: Union[jp.WebPage, jp.QuasarPage], data_def: Dict, selection: str = 'none',
                 **kwargs):
        """
        :param data_def:: {
            'header_def': [
                {'header_name': 'description', 'field': 'desc', 'style': 'width: 180px', 'sortable': True},
                {'header_name': 'last_change', 'field': 'last_change', 'style': 'width: 150px', 'sortable': True},
                {'header_name': 'project', 'field': 'project', 'style': 'width: 150px'},
                {'header_name': 'action', 'field': 'action', 'object': True, 'style': 'width: 150px'}
            ],
            'rows_def': [
                {'desc': 'some description', 'last_change': '2021-04-03 10:49:19', 'project': 'some project', 'action': QDiv(id: None, html_tag: div, vue_type: quasar_component, name: No name, number of components: 2)},
                {'desc': 'some description2', 'last_change': '2021-04-03 10:49:19', 'project': 'some project2', 'action': QDiv(id: None, html_tag: div, vue_type: quasar_component, name: No name, number of components: 2)}
                ]
                }

        :param selection: single|multiple|none
        """
        self.temp = False
        super().__init__(**kwargs, temp=self.temp)
        self.add_page(wp)
        wp.css += """.table-header-sortable .sort-icon {
                    visibility: hidden;
                }
                .table-header-sortable:hover {
                cursor: pointer;
                }
                .table-header-sortable:hover .sort-icon {
                    visibility: visible;
                    opacity: 0.5;
                }
                .table-header-sorted .sort-icon {
                visibility: visible;
                opacity: 1;
                }
                .table-header-sorted:hover .sort-icon {
                opacity: 1;
                }
                .table-header-sorted-desc .sort-icon {
                visibility: visible;
                opacity: 1;
                transform: rotate(180deg);
                }
                .table-header-sorted-desc:hover .sort-icon {
                opacity: 1;
                transform: rotate(180deg);
                }
        """
        self.allow_bulk_actions = kwargs.get('allow_bulk_actions', False)
        if selection not in SimpleTable.selection_allowed_values:
            raise ValueError('Cannot create instance of MyTable (selection = single|multiple|none)')
        self._selection = selection
        self.max_width = kwargs.get('max_width', SimpleTable.max_width)
        self._header_def = data_def.get('header_def')
        self._rows_def = data_def.get('rows_def')
        self._data_def = data_def
        self.header = None
        self.rows = dict()
        self._sort_changed = False
        self._sortable_columns: List = list()
        self._sort_params: Optional[Tuple] = None
        self.select_all_toggle = jp.QToggle(a=self,
                                            label='Select All',
                                            classes='text-subtitle3',
                                            input=self.select_all_clicked,
                                            show=False)
        if self.selection == 'multiple':
            self.select_all_toggle.show = True

        jp.Space(num=5, a=self)

        self.list = jp.QList(
            a=self,
            dense=True,
            bordered=True,
            padding=False,
            separator=True,
            classes='rounded-borders',
            style=self.max_width)

        self.__create_table()

    @property
    def selection(self):
        return self._selection

    @property
    def header_def(self):
        return self._header_def

    @property
    def rows_def(self):
        return self._rows_def

    def __sort_rows(self, cleanup: bool = False, sort_by: Optional[str] = None, desc: bool = False) -> None:
        if self.rows_def:
            if cleanup:
                # cleanup rows
                for row in self.rows:
                    self.list.remove_component(self.rows[row])

            if not sort_by:
                # use original order
                l = self.rows_def
            else:
                l = sorted(self.rows_def, key=lambda item: item[sort_by], reverse=desc)
            for i in l:
                # reuse QItem instances
                self.list.add(self.rows[self.rows_def.index(i)])

    def __create_table(self):
        # cleanup
        self.list.delete_components()

        # create header
        if self.header_def:
            self.header = jp.QItem(a=self.list,
                                   classes=f'q-ml-none text-bold {SimpleTable.color_header_text} bg-blue-grey-1',
                                   clickable=False,
                                   v_ripple=False,
                                   manual_focus=False,
                                   focused=False,
                                   active=False,
                                   )
            for column in self.header_def:
                column_div = jp.QDiv(a=self.header,
                                     classes="row",
                                     style="padding: 5px 0;",
                                     my_field=column['field'],
                                     )
                jp.QDiv(a=column_div,
                        text=column['header_name'],
                        )
                if "style" in column:
                    setattr(column_div, 'style', column_div.style + column['style'])
                if 'sortable' in column:
                    sort_arrow = SimpleTable.SortArrow(show=False, color_enabled=SimpleTable.color_header_text)
                    column_div.sort_arrow = sort_arrow
                    jp.QDiv(a=column_div, style="padding-left: 5px;", children=[sort_arrow])
                    column_div.on('click', self.header_clicked)
                    self._sortable_columns.append(column_div)
                    column_div.classes += " table-header-sortable"
                if not column == self.header_def[-1]:
                    jp.QSeparator(a=self.header, vertical=True, spaced=True, inset=True)

            # create rows
            if self.rows_def:
                for index, row in enumerate(self.rows_def):
                    self.rows[index] = jp.QItem(a=self.list,
                                                classes="q-ma-none ",
                                                clickable=False,
                                                v_ripple=False,
                                                manual_focus=False,
                                                focused=False,
                                                active=False,
                                                original_index=index
                                                )
                    if self.selection in ['multiple', 'single']:
                        self.rows[index].on('click', self.row_clicked)
                        self.rows[index].clickable = True
                    for column in self.header_def:
                        column_div = jp.QDiv(a=self.rows[index],
                                             my_field=column['field'],
                                             classes="justify-content: center;",
                                             style="display: flex; align-items: center;"
                                             )
                        if "style" in column:
                            setattr(column_div, 'style', column_div.style + column['style'])
                        if column.get('object', False):
                            jp.QItemSection(a=column_div,
                                            my_field=column['field'],
                                            children=[row[column['field']]])
                        else:
                            column_div.text = row[column['field']]
                        if not column == self.header_def[-1]:
                            jp.QSeparator(a=self.rows[index], vertical=True, spaced=True, inset=True)

    def _disable_sort_on_other_columns(self, c: jp.QDiv):
        for column in self._sortable_columns:
            if c != column:
                self._remove_classes(column)
                column.sort_arrow.reset_sort()

    @staticmethod
    def _remove_classes(c: jp.QDiv):
        c.classes = c.classes.replace(' table-header-sorted-desc', '').\
                replace(' table-header-sorted', '')

    async def header_clicked(self, msg):
        # reset sort on other columns
        self._remove_classes(msg.target)
        self._disable_sort_on_other_columns(msg.target)
        msg.target.sort_arrow.sort_toggle()
        if msg.target.sort_arrow.sort_status == 0:
            # reset sorting
            self._sort_params = None
        elif msg.target.sort_arrow.sort_status == 1:
            self._sort_params = msg.target.my_field, False
            msg.target.classes += ' table-header-sorted'
        else:
            # msg.target.sort_arrow.sort_status == 2
            self._sort_params = msg.target.my_field, True
            msg.target.classes += ' table-header-sorted-desc'
        self._sort_changed = True
        await self.my_update()
        return True

    def get_rows(self) -> List[jp.QItem]:
        if len(self.rows) == 0:
            return list()
        return [self.rows[i] for i in self.rows]

    async def row_clicked(self, msg):
        if self.selection == 'multiple':
            msg.target.focused = not msg.target.focused
            con = self.selected_state()
            if con == 0:
                self.select_all_toggle.value = False
            elif con == 1:
                self.select_all_toggle.value = True
            elif con == 2:
                self.select_all_toggle.value = None
            await self.my_update()
        else:
            await self._deselect_all_rows()
            msg.target.focused = True
            await self.my_update()
        return True

    async def my_update(self):
        if not self.temp and len(self.pages) != 0:
            await self.update()
            return True
        else:
            print('Cannot update component only, use component.add_page(wp) after init.')
            return None

    async def _deselect_all_rows(self, update: bool = False) -> None:
        for row in self.get_rows():
            row.focused = False
        if update:
            await self.my_update()

    async def select_all_clicked(self, msg):
        for row in self.get_rows():
            row.focused = msg.value
        await self.my_update()

    def selected_state(self) -> int:
        selected = list()
        deselected = list()
        for row in self.get_rows():
            if row.focused:
                selected.append(row)
            else:
                deselected.append(row)
            if len(selected) > 0 and len(deselected) > 0:
                return 2
        if len(selected) > 0 and len(deselected) == 0:
            return 1
        elif len(deselected) > 0 and len(selected) == 0:
            return 0
        raise NotImplemented

    def __get_header_fields(self) -> Set:
        keys = list()
        for i in self.header_def:
            keys.append(i['field'])
        return set(keys)

    def __get_selected(self) -> List[jp.QItem]:
        ret = list()
        for row in self.get_rows():
            if row.focused:
                ret.append(row)
        return ret

    def get_selected_column_values(self, column: str) -> List:
        ret = list()
        if column not in self.__get_header_fields():
            return list()

        for row in self.__get_selected():
            ret.append(self.rows_def[row.original_index][column])
        return ret

    def convert_object_to_dict(self):
        if self._data_def and self.selection == 'multiple':
            self.select_all_toggle.show = True
        else:
            self.select_all_toggle.show = False

        if self._sort_changed:
            if self._sort_params:
                self.__sort_rows(cleanup=True, sort_by=self._sort_params[0], desc=self._sort_params[1])
                self._sort_changed = False
            else:
                self.__sort_rows(cleanup=True)
                self._sort_changed = False

        d = super().convert_object_to_dict()
        return d

Create instance example:

data2 = {
            'header_def': [
                {'header_name': 'description', 'field': 'desc', 'style': "width: 180px", 'sortable': True},
                {'header_name': 'last_change', 'field': 'last_change', 'style': "width: 150px", 'sortable': True},
                {'header_name': 'project', 'field': 'project', 'style': "width: 150px", 'sortable': True},
                {'header_name': 'action', 'field': 'action', 'object': True, 'style': "width: 150px"},
            ],
            'rows_def': [
                {'desc': 'some description',
                 'last_change': datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
                 'project': 'some project',
                 'action': jp.QDiv(children=[jp.QBtn(flat=True, color="primary", text="Open", click=self.open_clicked,
                                                     event_propagation=False),
                                             jp.QBtn(flat=True, color="red", text="Delete", click=self.delete_clicked,
                                                     event_propagation=False)
                                             ]
                                   )
                 },
                {'desc': 'some description2',
                 'last_change': datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
                 'project': 'some project2',
                 'action': jp.QDiv(children=[jp.QBtn(flat=True, color="primary", text="Open", click=self.open_clicked,
                                                     event_propagation=False),
                                             jp.QBtn(flat=True, color="red", text="Delete", click=self.delete_clicked,
                                                     event_propagation=False)
                                             ]
                                   )
                 }
            ]

        }
        self.table = SimpleTable(a=self, wp=kwargs.get('wp'), max_width="max-width: 1000px", data_def=data2,
                                 selection='multiple')

    async def open_clicked(self, msg):
        """Your code here."""
        return True

    async def delete_clicked(self, msg):
        """Your code here."""
        return True

[giodegas]

@msrkala I tried this simple app containing your table sampe, but there is no style:

https://gist.github.com/giodegas/c4372300c4f6f65cde6427c883c1503b

How could be enriched to look great?

Thank's.

[giodegas]

This is how it looks like now:

:-)

[msrkala]

Please, use:
wp = jp.QuasarPage()

instead of

wp = jp.WebPage()

It is a Quasar Table component.

[WolfgangFahl]

Is this for the #410?