Tables

components.tables

Data table components with sorting, filtering, and pagination support.

Table

Bases: Component

A comprehensive data table component with support for multiple views (Grid/List).

Source code in components/tables.py

class Table(Component):
    """A comprehensive data table component with support for multiple views (Grid/List)."""
    def __init__(
        self,
        columns: List[TableColumn],
        scripts: Optional[List[str]] = None,
        url: Optional[Callable | str] = None,
        title: str = "",
        subtitle: str = "",
        displays: Optional[dict[str, Component]] = None,
        filter_component: Optional[Component] = None,
        create_url: Optional[str | Callable] = None,
        select: Literal["single", "multi"] | None = None,
        value_key: str = "pk",
        display_key: str = "__str__",
        **kwargs,
    ):
        displays = displays if displays is not None else get_default_displays()

        super().__init__(**kwargs)
        self.columns = columns
        self.scripts = scripts or []
        self.title = title
        self.subtitle = subtitle
        self.displays = displays
        self.filter_component = filter_component
        self.create_url = create_url
        self.url = url
        self.select = select
        self.value_key = value_key
        self.display_key = display_key

        self.children = [
            TableHeader(
                title=title,
                subtitle=subtitle,
                filter_component=filter_component,
                url=create_url,
                displays=displays,
                uid=f"{self.uid}_header" if self.uid else "",
                table_uid=self.uid,
                select=select,
            ),
            TableDisplaysContent(
                displays=displays,
                columns=columns,
                key=self.key,
                uid=f"{self.uid}_display_content" if self.uid else "",
                url=self.url,
                table_uid=self.uid,
                select=select,
                value_key=value_key,
                display_key=display_key,
            ),
        ]

    def _render_selection_script(self, target_input: str, modal_id: str) -> str:
        """Render the selection helper script for single/multi select modes."""
        if not self.select:
            return ""

        helper_name = f"TableSelection_{self.uid}".replace("-", "_")
        target_input_escaped = html.escape(target_input)
        modal_id_escaped = html.escape(modal_id)

        return f"""
            <script>
            (function() {{
                try {{
                    var helper = window.{helper_name} = {{}};
                    var targetInput = '{target_input_escaped}';
                    var modalId = '{modal_id_escaped}';

                    helper.selectSingle = function(value, display) {{
                        try {{
                            var valueEl = document.getElementById(targetInput + '_value');
                            var displayEl = document.getElementById(targetInput + '_display');
                            if (valueEl) {{
                                valueEl.value = value;
                            }} else {{
                                console.error('{helper_name}.selectSingle: value element not found:', targetInput + '_value');
                            }}
                            if (displayEl) {{
                                displayEl.textContent = display;
                                displayEl.classList.remove('text-base-content/50');
                            }} else {{
                                console.error('{helper_name}.selectSingle: display element not found:', targetInput + '_display');
                            }}
                            helper.closeModal();
                        }} catch (e) {{
                            console.error('{helper_name}.selectSingle error:', e);
                        }}
                    }};

                    helper.addItem = function(value, display) {{
                        try {{
                            var container = document.getElementById(targetInput + '_items');
                            if (!container) {{
                                console.error('{helper_name}.addItem: container not found:', targetInput + '_items');
                                return;
                            }}
                            var itemId = targetInput + '_item_' + value;
                            if (document.getElementById(itemId)) {{
                                return;
                            }}

                            var item = document.createElement('div');
                            item.id = itemId;
                            item.className = 'flex items-center gap-2 bg-base-200 rounded-lg px-3 py-1';

                            var input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = targetInput + '_values';
                            input.value = value;

                            var span = document.createElement('span');
                            span.className = 'text-sm truncate max-w-[200px]';
                            span.textContent = display;

                            var closeBtn = document.createElement('button');
                            closeBtn.type = 'button';
                            closeBtn.className = 'btn btn-ghost btn-xs';
                            closeBtn.innerHTML = `{{% heroicon_mini "x-mark" class="w-3 h-3" %}}`;
                            closeBtn.onclick = function(e) {{
                                e.stopPropagation();
                                helper.removeItem(value);
                            }};

                            item.appendChild(input);
                            item.appendChild(span);
                            item.appendChild(closeBtn);
                            container.appendChild(item);
                        }} catch (e) {{
                            console.error('{helper_name}.addItem error:', e);
                        }}
                    }};

                    helper.removeItem = function(value) {{
                        try {{
                            var item = document.getElementById(targetInput + '_item_' + value);
                            if (item) {{
                                item.remove();
                            }}
                            var checkboxes = document.querySelectorAll('[data-selection-value="' + value + '"]');
                            checkboxes.forEach(function(cb) {{
                                cb.checked = false;
                            }});
                        }} catch (e) {{
                            console.error('{helper_name}.removeItem error:', e);
                        }}
                    }};

                    helper.isSelected = function(value) {{
                        try {{
                            return !!document.getElementById(targetInput + '_item_' + value);
                        }} catch (e) {{
                            console.error('{helper_name}.isSelected error:', e);
                            return false;
                        }}
                    }};

                    helper.toggleItem = function(value, display, checked) {{
                        try {{
                            if (checked) {{
                                helper.addItem(value, display);
                            }} else {{
                                helper.removeItem(value);
                            }}
                        }} catch (e) {{
                            console.error('{helper_name}.toggleItem error:', e);
                        }}
                    }};

                    helper.closeModal = function() {{
                        try {{
                            if (modalId) {{
                                var modal = document.getElementById(modalId);
                                if (modal) {{
                                    modal.remove();
                                }} else {{
                                    console.error('{helper_name}.closeModal: modal not found:', modalId);
                                }}
                            }}
                        }} catch (e) {{
                            console.error('{helper_name}.closeModal error:', e);
                        }}
                    }};
                }} catch (e) {{
                    console.error('{helper_name} initialization error:', e);
                }}
            }})();
            </script>
        """

    def render_html(self, **kwargs) -> str:
        target_input = kwargs.get("target_input", "")
        modal_id = kwargs.get("modal_id", "")

        scripts = "\n".join([f"<script>{script}</script>" for script in self.scripts])
        selection_script = self._render_selection_script(target_input, modal_id)
        header = self.children[0].render(**kwargs)
        displays = self.children[1].render(**kwargs)
        first_view = next(iter(self.displays.keys()), "List")
        return f"""
            {scripts}
            {selection_script}
            <div id="{self.uid}"
                class="w-full data-table-container {self.classes}"
                x-data="{{ view: '{first_view}' }}">
                    {header}
                    {displays}
            </div>
        """

TableColumn

Bases: Component

Used for sorting

Source code in components/tables.py

class TableColumn(Component):
    """
    Used for sorting
    """

    def __init__(self, label: Optional[str] = None, orderable: bool = False, **kwargs):
        super().__init__(**kwargs)
        self.children = (
            self.children
            if self.children is not None
            else [TextField(uid=f"{self.uid}_default_field" if self.uid else "")]
        )
        self.label = self.key.title() if label is None else label
        self.orderable = orderable

    def render_html(self, **kwargs) -> str:
        request = kwargs["request"]
        content = (
            f"""
            <a href="{update_url(request.path, sort=self.key)}"
                hx-get="{update_url(request.path, sort=self.key)}"
                hx-target="closest .data-table-container" hx-swap="morph" hx-push-url="false"
                class="hover:text-primary">
                {self.label}
            </a>
            """
            if self.orderable
            else f"""
                {self.label}
            """
        )
        return f"""<th id='{self.uid}' scope="col" class="whitespace-nowrap min-w-[100px]">{content}</th>"""