"""The settings page for the template.""" from typing import Any import reflex as rx from reflex.components.datadisplay.dataeditor import DataEditorTheme from ..styles import * from ..webui.state import State class DataTableState(State): """Datatable state.""" cols: list[Any] = [ {"title": "Title", "type": "str"}, { "title": "Name", "type": "str", "group": "Data", "width": 300, }, { "title": "Birth", "type": "str", "group": "Data", "width": 150, }, { "title": "Human", "type": "bool", "group": "Data", "width": 80, }, { "title": "House", "type": "str", "group": "Data", }, { "title": "Wand", "type": "str", "group": "Data", "width": 250, }, { "title": "Patronus", "type": "str", "group": "Data", }, { "title": "Blood status", "type": "str", "group": "Data", "width": 200, }, ] data = [ [ "1", "Harry James Potter", "31 July 1980", True, "Gryffindor", "11' Holly phoenix feather", "Stag", "Half-blood", ], [ "2", "Ronald Bilius Weasley", "1 March 1980", True, "Gryffindor", "12' Ash unicorn tail hair", "Jack Russell terrier", "Pure-blood", ], [ "3", "Hermione Jean Granger", "19 September, 1979", True, "Gryffindor", "10¾' vine wood dragon heartstring", "Otter", "Muggle-born", ], [ "4", "Albus Percival Wulfric Brian Dumbledore", "Late August 1881", True, "Gryffindor", "15' Elder Thestral tail hair core", "Phoenix", "Half-blood", ], [ "5", "Rubeus Hagrid", "6 December 1928", False, "Gryffindor", "16' Oak unknown core", "None", "Part-Human (Half-giant)", ], [ "6", "Fred Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood", ], [ "7", "George Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood", ], ] code_show = """rx.hstack( rx.divider(orientation="vertical", height="100vh", border="solid black 1px"), rx.vstack( rx.box( rx.data_editor( columns=DataTableState.cols, data=DataTableState.data, draw_focus_ring=True, row_height=50, smooth_scroll_x=True, smooth_scroll_y=True, column_select="single", # style theme=DataEditorTheme(**darkTheme), width="80vw", height="80vh", ), ), rx.spacer(), height="100vh", spacing="25", ), )""" state_show = """class DataTableState(State): cols: list[Any] = [ {"title": "Title", "type": "str"}, { "title": "Name", "type": "str", "group": "Data", "width": 300, }, { "title": "Birth", "type": "str", "group": "Data", "width": 150, }, { "title": "Human", "type": "bool", "group": "Data", "width": 80, }, { "title": "House", "type": "str", "group": "Data", }, { "title": "Wand", "type": "str", "group": "Data", "width": 250, }, { "title": "Patronus", "type": "str", "group": "Data", }, { "title": "Blood status", "type": "str", "group": "Data", "width": 200, }, ]""" data_show = """[ ["1", "Harry James Potter", "31 July 1980", True, "Gryffindor", "11' Holly phoenix feather", "Stag", "Half-blood"], ["2", "Ronald Bilius Weasley", "1 March 1980", True,"Gryffindor", "12' Ash unicorn tail hair", "Jack Russell terrier", "Pure-blood"], ["3", "Hermione Jean Granger", "19 September, 1979", True, "Gryffindor", "10¾' vine wood dragon heartstring", "Otter", "Muggle-born"], ["4", "Albus Percival Wulfric Brian Dumbledore", "Late August 1881", True, "Gryffindor", "15' Elder Thestral tail hair core", "Phoenix", "Half-blood"], ["5", "Rubeus Hagrid", "6 December 1928", False, "Gryffindor", "16' Oak unknown core", "None", "Part-Human (Half-giant)"], ["6", "Fred Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"], ["7", "George Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"], ]""" darkTheme = { "accent_color": "#8c96ff", "accent_light": "rgba(202, 206, 255, 0.253)", "text_dark": "#ffffff", "text_medium": "#b8b8b8", "text_light": "#a0a0a0", "text_bubble": "#ffffff", "bg_icon_header": "#b8b8b8", "fg_icon_header": "#000000", "text_header": "#a1a1a1", "text_header_selected": "#000000", "bg_cell": "#16161b", "bg_cell_medium": "#202027", "bg_header": "#212121", "bg_header_has_focus": "#474747", "bg_header_hovered": "#404040", "bg_bubble": "#212121", "bg_bubble_selected": "#000000", "bg_search_result": "#423c24", "border_color": "rgba(225,225,225,0.2)", "drilldown_border": "rgba(225,225,225,0.4)", "link_color": "#4F5DFF", "header_font_style": "bold 14px", "base_font_style": "13px", "font_family": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif", } darkTheme_show = """darkTheme={ "accent_color": "#8c96ff", "accent_light": "rgba(202, 206, 255, 0.253)", "text_dark": "#ffffff", "text_medium": "#b8b8b8", "text_light": "#a0a0a0", "text_bubble": "#ffffff", "bg_icon_header": "#b8b8b8", "fg_icon_header": "#000000", "text_header": "#a1a1a1", "text_header_selected": "#000000", "bg_cell": "#16161b", "bg_cell_medium": "#202027", "bg_header": "#212121", "bg_header_has_focus": "#474747", "bg_header_hovered": "#404040", "bg_bubble": "#212121", "bg_bubble_selected": "#000000", "bg_search_result": "#423c24", "border_color": "rgba(225,225,225,0.2)", "drilldown_border": "rgba(225,225,225,0.4)", "link_color": "#4F5DFF", "header_font_style": "bold 14px", "base_font_style": "13px", "font_family": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif", }""" def datatable_page() -> rx.Component: """The UI for the settings page. Returns: rx.Component: The UI for the settings page. """ return rx.box( rx.vstack( rx.heading( "Data Table Demo", font_size="3em", ), rx.hstack( rx.vstack( rx.box( rx.data_editor( columns=DataTableState.cols, data=DataTableState.data, draw_focus_ring=True, row_height=50, smooth_scroll_x=True, smooth_scroll_y=True, column_select="single", # style theme=DataEditorTheme(**darkTheme), width="80vw", ), ), rx.spacer(), spacing="25", ), ), rx.tabs( rx.tab_list( rx.tab("Code", style=tab_style), rx.tab("Data", style=tab_style), rx.tab("State", style=tab_style), rx.tab("Styling", style=tab_style), padding_x=0, ), rx.tab_panels( rx.tab_panel( rx.code_block( code_show, language="python", show_line_numbers=True, ), width="100%", padding_x=0, padding_y=".25em", ), rx.tab_panel( rx.code_block( data_show, language="python", show_line_numbers=True, ), width="100%", padding_x=0, padding_y=".25em", ), rx.tab_panel( rx.code_block( state_show, language="python", show_line_numbers=True, ), width="100%", padding_x=0, padding_y=".25em", ), rx.tab_panel( rx.code_block( darkTheme_show, language="python", show_line_numbers=True, ), width="100%", padding_x=0, padding_y=".25em", ), width="100%", ), variant="unstyled", color_scheme="purple", align="end", width="100%", padding_top=".5em", ), style=template_content_style, ), style=template_page_style, )