From 2c5b0f50605ceb095b8dd8d0b2c53eb691186629 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 26 May 2025 17:29:16 +0200 Subject: [PATCH 1/2] Added documentation for tables --- .../overview/AccordionOverviewPage.tsx | 217 +++++++++--------- .../table/overview/TableOverviewPage.tsx | 149 +++++++++++- .../table/overview/images/table_anatomy.png | Bin 0 -> 10016 bytes 3 files changed, 253 insertions(+), 113 deletions(-) create mode 100644 apps/website/screens/components/table/overview/images/table_anatomy.png diff --git a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx index 12b7e2bed..44f3c9320 100644 --- a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx +++ b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx @@ -187,119 +187,116 @@ const sections = [ ), }, + ], + }, + { + title: "Best practices", + content: ( + + To ensure a clean, efficient, and user-friendly experience, follow these best practices when designing and + implementing accordion components: + + ), + subSections: [ { - title: "Best practices", + title: "Use accordions to manage space and structure", content: ( - - To ensure a clean, efficient, and user-friendly experience, follow these best practices when designing and - implementing accordion components: - + + + Apply accordions when you need to organize large or secondary content into collapsible sections. + + + They are particularly useful for FAQs, optional content, or detailed information nested under high-level + summaries. + + + Collapsing content helps reduce scrolling and offers users control over what they choose to engage with. + + + ), + }, + { + title: "Keep headers simple and informative", + content: ( + + + Each accordion header must include a clear, concise title that describes the content inside. + + + Use a sublabel only when additional context is necessary —it should not overpower the title. + + + Avoid hiding essential or primary information inside an accordion panel. + + + ), + }, + { + title: "Limit secondary elements for clarity", + content: ( + + + Use only one secondary element per side of the header (left and right) to avoid clutter. + + + Choose either an icon or a badge for the left side, and a helper text, badge, or status light for the + right side —never more than one per side. + + + Avoid placing two elements of the same type in one header (e.g., two badges), as this reduces scannability + and can confuse users. + + + ), + }, + { + title: "Respect visual hierarchy and semantic meaning", + content: ( + + + Always prioritize the visibility of mandatory elements like the title over optional elements. + + + If both a badge and a status light are present, avoid applying semantic colors (e.g., red, green) to the + badge to prevent visual conflict with the status indicator. + + + Maintain consistency in layout and alignment to support content scanning, especially when multiple + accordion sections are used together. + + + ), + }, + { + title: "Choose the appropriate expand behavior", + content: ( + + + Use single-open behavior when content is interdependent, linear, or when space is + limited. + + + Use multi-open behavior when content is independent or when users may need to view + multiple sections at once. + + + Consider the context of use and user goals when deciding which interaction pattern is most appropriate. + + + ), + }, + { + title: "Design for mobile and accessibility", + content: ( + + + Accordions should span the full width of the screen on smaller devices for easier interaction. + + + Ensure all interactive elements are large enough to be tapped comfortably on touchscreens. + + ), - subSections: [ - { - title: "Use accordions to manage space and structure", - content: ( - - - Apply accordions when you need to organize large or secondary content into collapsible sections. - - - They are particularly useful for FAQs, optional content, or detailed information nested under - high-level summaries. - - - Collapsing content helps reduce scrolling and offers users control over what they choose to engage - with. - - - ), - }, - { - title: "Keep headers simple and informative", - content: ( - - - Each accordion header must include a clear, concise title that describes the content inside. - - - Use a sublabel only when additional context is necessary —it should not overpower the title. - - - Avoid hiding essential or primary information inside an accordion panel. - - - ), - }, - { - title: "Limit secondary elements for clarity", - content: ( - - - Use only one secondary element per side of the header (left and right) to avoid - clutter. - - - Choose either an icon or a badge for the left side, and a helper text, badge, or status light for the - right side —never more than one per side. - - - Avoid placing two elements of the same type in one header (e.g., two badges), as this reduces - scannability and can confuse users. - - - ), - }, - { - title: "Respect visual hierarchy and semantic meaning", - content: ( - - - Always prioritize the visibility of mandatory elements like the title over optional elements. - - - If both a badge and a status light are present, avoid applying semantic colors (e.g., red, green) to - the badge to prevent visual conflict with the status indicator. - - - Maintain consistency in layout and alignment to support content scanning, especially when multiple - accordion sections are used together. - - - ), - }, - { - title: "Choose the appropriate expand behavior", - content: ( - - - Use single-open behavior when content is interdependent, linear, or when space is - limited. - - - Use multi-open behavior when content is independent or when users may need to view - multiple sections at once. - - - Consider the context of use and user goals when deciding which interaction pattern is most - appropriate. - - - ), - }, - { - title: "Design for mobile and accessibility", - content: ( - - - Accordions should span the full width of the screen on smaller devices for easier interaction. - - - Ensure all interactive elements are large enough to be tapped comfortably on touchscreens. - - - ), - }, - ], }, ], }, diff --git a/apps/website/screens/components/table/overview/TableOverviewPage.tsx b/apps/website/screens/components/table/overview/TableOverviewPage.tsx index f4c1f5106..02d242bc2 100644 --- a/apps/website/screens/components/table/overview/TableOverviewPage.tsx +++ b/apps/website/screens/components/table/overview/TableOverviewPage.tsx @@ -1,18 +1,161 @@ -import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; +import { DxcParagraph, DxcFlex, DxcBulletedList } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import anatomy from "./images/table_anatomy.png"; const sections = [ { title: "Introduction", content: ( - The Table component is a powerful and flexible tool for displaying tabular data in a structured format. It - allows users to present information in rows and columns, making it easy to read and analyze large datasets. + The table component provides a lightweight and accessible way to{" "} + display structured data in rows and columns. It is ideal for presenting small to medium-sized + datasets that don't require complex interactions such as in-line editing or row expansion. The component + supports different table densities and content types, ensuring clarity and visual consistency across use cases + like summary lists, comparison views, or static reports. Unlike the datagrid or resultsate table component, our + table is designed for non-complex scenarios where the priority is clear data display over + advanced functionality. ), }, + { + title: "Anatomy", + content: ( + <> + Table's anatomy + + + Header row: defines the label for each column and helps users understand the structure and + meaning of the data presented. It can also include sorting controls when applicable. + + + Cell: displays the individual content within the table. + + + Action cell: contains interactive elements such as buttons or icons that allow users to + perform specific actions related to that row. + + + + ), + }, + { + title: "Using tables", + content: ( + + The table component is designed for clear and structured data presentation, with minimal interactivity and a + strong focus on readability. Below are key aspects to keep in mind when using this component: + + ), + subSections: [ + { + title: "Layout and content", + content: ( + <> + + Tables are best suited for displaying moderate amounts of data with consistent structure. + Each column should represent a single data type or category, while each row corresponds to a data entry. + Keep content concise to avoid horizontal scrolling and ensure legibility. + + + ), + }, + { + title: "Responsiveness", + content: ( + + While the table is not responsive by default, content can be adjusted to fit smaller + screens using wrapping text, truncation, or custom scroll containers. If your use case involves extensive + data manipulation or mobile-first design, consider using the datagrid instead. + + ), + }, + { + title: "Text alignment and formatting", + content: ( + + Align text consistently within columns based on content type: left-align text, right-align numbers, and + center-align icons or action buttons. + + ), + }, + { + title: "Styling and density", + content: ( + + The component supports different visual densities to adapt to the use case. Use higher + density for data-heavy views where space is limited, and lower density for overviews or summary pages where + clarity takes priority. + + ), + }, + { + title: "Table vs ResultsetTable", + content: ( + <> + + While both components present structured data in tabular format, their purposes and features are + different: + + + + Table is a lightweight component intended for static data. It doesn't + include interaction features such as sorting or pagination. It's ideal for small datasets or summary + views where simplicity and clarity are the main goals. + + + Resultset table, on the other hand, is a more advanced component built for dynamic + datasets. It includes support for pagination, sorting, and density control. It's best suited for result + views where users need to browse through large volumes of data efficiently, such as search results or + query outputs. + + + + Choose between them based on your needs: use the table for simple data display, and the resultset table + for user-driven exploration of data. + + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + + + Use the table component for structured, static data that doesn't require user interaction, + such as summaries, configuration overviews, or comparison tables. + + + Keep content concise and scannable: avoid long text blocks inside cells to preserve + readability and prevent layout issues. + + + Maintain a clear visual hierarchy by using appropriate text styles for headers, totals, and + other relevant indicators. + + + Ensure alignment consistency: text should be left-aligned, numbers right-aligned, and icons + or controls centered, depending on their function. + + + Use a maximum of two or three actions per cell: avoid overcrowding cells with multiple + buttons or icons to maintain clarity and avoid interaction confusion. + + + Use density thoughtfully: apply higher density when screen real estate is limited, and lower + density when space allows for better readability. + + + Avoid using this component for large, interactive datasets. For those scenarios, opt for the + resultset table or datagrid instead. + + + ), + }, ]; const TableOverviewPage = () => ( diff --git a/apps/website/screens/components/table/overview/images/table_anatomy.png b/apps/website/screens/components/table/overview/images/table_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..84b5597c251a2d12ee6089fce8e643c7696044ea GIT binary patch literal 10016 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 literal 0 HcmV?d00001 From db3b9d555fd61db3a5943ff13dda473784bfb2a5 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 27 May 2025 12:57:50 +0200 Subject: [PATCH 2/2] Updated resultsetTable doc --- .../ResultsetTablePageLayout.tsx | 6 +- .../code/ResultsetTableCodePage.tsx | 128 +++++++------- .../overview/ResultsetTableOverviewPage.tsx | 161 +++++++++++++++++- .../images/resultset_table_anatomy.png | Bin 0 -> 22608 bytes .../components/table/TablePageLayout.tsx | 5 +- 5 files changed, 223 insertions(+), 77 deletions(-) create mode 100644 apps/website/screens/components/resultset-table/overview/images/resultset_table_anatomy.png diff --git a/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx b/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx index e244a14d8..d860d0b72 100644 --- a/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx +++ b/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx @@ -16,10 +16,8 @@ const ResultsetTablePageHeading = ({ children }: { children: ReactNode }) => { - Data table is a component with a high rate of usage within the applications. It allows to show the user a - big amount of information in a simple and simplified way. All the information contained in the table has a - grid structure, defining columns and rows to place the data and allow the users to scan, analyze, compare - and filter that information. + The resultset table is a data-rich component designed for displaying large sets of information with built-in + features like sorting, pagination, and scroll behavior to support efficient exploration and comparison. diff --git a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx index 546f4d220..32fe8a20a 100644 --- a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx +++ b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx @@ -79,30 +79,55 @@ const sections = [ - - rows + + hidePaginator - Row[] -

- being Row a Cell[] and being Cell an object with the following - properties: -

- {cellTypeString} + boolean + If true, paginator will not be displayed. - An array of objects representing the rows of the table, you will have as many objects as columns in the - table. Each row is a set of cells that have the following properties: -
    -
  • - displayValue: Value to be displayed in the cell. -
    • -
  • - sortValue: Value to be used when sorting the table by that column. If not indicated - displayValue will be used for sorting. -
    • -
+ false + + + + itemsPerPage + + number + + Number of items per page. + + 5 + + + + itemsPerPageFunction + + {"(value: number) => void"} + + + This function will be called when the user selects an item per page option. The value selected will be + passed as a parameter. + + - + + + itemsPerPageOptions + + number[] + + An array of numbers representing the items per page options. + - + + + margin + + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin + + + Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and + 'right' properties in order to specify different margin sizes. - @@ -134,17 +159,32 @@ const sections = [ - - hidePaginator + + rows - boolean + Row[] +

+ being Row a Cell[] and being Cell an object with the following + properties: +

+ {cellTypeString} - If true, paginator will not be displayed. - false + An array of objects representing the rows of the table, you will have as many objects as columns in the + table. Each row is a set of cells that have the following properties: +
    +
  • + displayValue: Value to be displayed in the cell. +
    • +
  • + sortValue: Value to be used when sorting the table by that column. If not indicated + displayValue will be used for sorting. +
    • +
+ - showGoToPage @@ -156,46 +196,6 @@ const sections = [ true - - itemsPerPage - - number - - Number of items per page. - - 5 - - - - itemsPerPageOptions - - number[] - - An array of numbers representing the items per page options. - - - - - itemsPerPageFunction - - {"(value: number) => void"} - - - This function will be called when the user selects an item per page option. The value selected will be - passed as a parameter. - - - - - - margin - - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin - - - Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and - 'right' properties in order to specify different margin sizes. - - - - tabIndex diff --git a/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx index 82f18c1e5..218ca03dd 100644 --- a/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx +++ b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx @@ -1,19 +1,170 @@ -import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; +import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; +import Code from "@/common/Code"; +import anatomy from "./images/resultset_table_anatomy.png"; +import Image from "@/common/Image"; const sections = [ { title: "Introduction", + content: ( + + The resultset table component is designed for displaying large datasets with interactive features such as + sorting, pagination, and selection. Unlike the basic table component, this one offers built-in functionality + that allows users to explore and manipulate data efficiently, making it ideal for use cases like search results, + reports, or management dashboards. + + ), + }, + { + title: "Anatomy", + content: ( + <> + ResultsetTable's anatomy + + + Header row: displays the column titles and defines the data categories for the table. It + also includes optional sorting icons to help users organize content. + + + Cell: represents an individual data point within the table. Cells are aligned with the + header columns and typically show text, numbers, or icons. + + + Sorting icon: indicates whether a column is sortable and shows the current sorting + direction (ascending or descending). Appears next to the header label when sorting is enabled. + + + Row: Represents a single entry in the dataset. Each row groups related cells and can + respond to user interactions like selection or hover. + + + Scrollbar: allows horizontal and vertical navigation when the table's content exceeds the + visible area. It ensures accessibility for large datasets. + + + Paginator: provides controls to navigate through multiple pages of results. It helps manage + large sets of data by splitting them into manageable views. + + + + ), + }, + { + title: "Using resultset tables", + content: ( + + The resultset table is intended for scenarios where users need to work with dynamic or high-volume data. Here + are key aspects to keep in mind: + + ), + subSections: [ + { + title: "Sorting and filtering", + content: ( + + Resultset tables support client-side or server-side sorting, which allows users to reorganize the data by + column. Use this feature to improve discoverability and simplify decision-making. + + ), + }, + { + title: "Pagination", + content: ( + + Built-in pagination controls prevent overwhelming the user with too much data at once and help maintain + performance. Choose the pagination strategy depending on your backend setup. + + ), + }, + { + title: "Row selection", + content: ( + + Users can select one or multiple rows to perform bulk actions. Use checkboxes for multi-selection and radio + buttons for single-selection. Selected rows can persist across pages if needed. + + ), + }, + { + title: "Action column", + content: ( + + Resultset tables can include an action column where users can perform row-level actions (e.g., edit, delete, + view details). This column should remain consistent across rows to maintain usability. + + ), + }, + { + title: "Custom content and responsiveness", + content: ( + + Cells can contain more than just text: icons, buttons, or status indicators are supported. However, maintain + clarity and avoid overloading. The layout can adapt to different screen sizes with horizontal scroll if + necessary. + + ), + }, + { + title: "Virtualization", + content: ( + + For very large datasets, virtualization improves performance by rendering only the visible rows within the + viewport, significantly reducing DOM load and enabling smooth scrolling. To enable virtualization, the{" "} + height prop must be set to a valid value on the resultset table. This defines the scrollable + area and allows the table to calculate which rows should be rendered dynamically. + + ), + }, + { + title: "Accessibility", + content: ( + + The resultset table is fully keyboard navigable and screen-reader friendly. Ensure all custom content also + follows accessibility guidelines. + + ), + }, + ], + }, + { + title: "Best practices", content: ( - Use the table component to compare information in rows and columns. - Every table cell requires a logical column header/row header. - Don't use the table for create visual layout of the content of a page. + Use the resultset table when displaying large sets of interactive data: it is ideal for + workflows where users need to search, sort, or take action on rows. + + + Limit the number of columns to what is strictly necessary. Too many columns can make the + table hard to read and navigate. + + + Keep cell content focused: if you need to include actions or visuals, make sure they serve a + purpose and don't clutter the interface. + + + Do not place more than one or two actions per row. If additional actions are needed, consider + using a dropdown or context menu. + + + Label all interactive elements inside the table properly. This improves accessibility and + helps users understand the functionality. + + + Use consistent patterns across all rows. Keep the structure and interaction model predictable + to support learnability. + + + Optimize performance by using pagination, enabling virtualization and minimizing real-time + rendering when working with large datasets. + + + Adapt for responsiveness. If the table is used in narrow viewports, allow horizontal + scrolling or collapse less relevant columns. - Avoid truncating content, wrap instead. ), }, diff --git a/apps/website/screens/components/resultset-table/overview/images/resultset_table_anatomy.png b/apps/website/screens/components/resultset-table/overview/images/resultset_table_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..4ad897af542c47ec8e87260cc41b98e5fc0cb95e GIT binary patch literal 22608 zcmeIa2UJsA*ESl3BiKNibWjkGUZppsi6}*yLMVb%X`%OKqvMehkPb>O(nA-7pcDa- z8j29Yxn63;a(;C*jM-1&ytu&5u4H* zzpqeqdQ37)5zO%;f%cgt6Jr}`_RH;vGbu}Sv8PhP$ryyH2hz!+_&h%{&kNf|aR{A1 z)23*g-+y|oCQ5st@${xGIy5ZNyI8i!ddp<*azXZ;uDFEQ!ju*><=5|uQzV?N)9$Vv zE_k(6PJc<0nbrV}gg{&caU-UO#a{3H^m!NpYbkyaqe`_XYnS z7zfnRSx9iq`1Y5Ws+pmqs-2r5tW&8u7%X?f=3a&^15nA}DpZHr)_8;Q1R@1c0f zUi(^LvD)M_A`rz$s1J&rpFB|mCpq9t1c79lJnM!)`1>pEO*DM@u=iw5?=p}=ApK;( zn1eYZd1ljxR_=4Pqic$c7(i#7PEN1ry=ThCx^l6yf>SIfry>ex5}t_XYDRQQ)Pb}8 z_9thTF{sz7L`|R*!3HRWQ;>c!-Vs^2>pjWEVE2Kg3{A7637FmT+p`^xIz9*AMFlTY z5j77hlFxZ+ae_v;vnGJH-J=X~Vb59{iqyIX&)6Abdpz}X8G9d#yw_3Rd{BoTG%*Y) zK*$+7yd0(jBgR_*R;BIhi)Gt+s!+d9wA~;h>T5*C@khlgOf)^@&;|rTenV6(uYoZ? zZ0e^`&>K0&J79g={&8}v3NYOT6kt9N2Dx_f#bUxwpswU;LGqch>@V?!ifu-&Y8TmA+4fN8%%CVns zO~~idYV~s9$Nbn&I#>{g%=_~}18nd^pH4MXww!8J_im&DaUW)a1sGF^(yy z{q48AjHZVsuu0oLTq_9;%}gYije2%k$Euy~{ZhoVc9;4gLvp`hjU{3WjD*Gpv(_4_Gqh3SnSEI5sq|bM8FJ^KP`-kfE{%A55wdCXKDu)YB7H7>0&9L0ydq zQ%-xb9_|usaY5qC6Q2)EE6$y0!YqprMlZ61ILL5n`!=xQ)HnP_kCdOg6OVyUG1mz9 zi6g9wzCw=zdbYbUpYhqXqJJ;f@#}?2?2k?BtS#-ofgVMMW`!XARo(3K#;uz}+fp>^Q+?_KG?$Kk{t{-1lFM9`99IQfV`f zTR@m;T0d(AAq?Jw^`-sDxw%spoqIKa7nlfaE1ynmg;HXq`FFH-b^@sSQ){r4FgCc~V# zrm2$M(Yso~(bv*%{9B9T_w9l>&bI|GW3)Ph9PYny=|6QAl0U5$*fL#ue3SxOCG_Sj z{PX3Ibw~0;OW?nt&~2;jDsDUAvpr3;1a8?t%(0w@v9Jb#v%v4@Q3>eQ=HFd=*d##k z$t!`?S2qc+xMHvJSr5U6gpg<91sZ>$6LyMLcPN{=X^pu77&-_9$vGq9NAqa?D|Xt< z5Fg1zq1P$x40V0OV@>#!?kSRkPPM945lstLJ8#U98?syvl>2;r} z5PbVE@1BNGB3-RsIPPu&T_1S4AQpM{a8yZ;qVus|+ND@Oq)m)SD{DV>2iZoWT?a?8 z-&?^}Tbqgd97s`p3t3(8(tno+KBklxI(I1mF0;4We~yI3Us2i``9lo%9v8mN?Uh7w z6j0X{#e{UUp{p%f4r!Fo$abC$dL_2hBp(O1Ua(T$N8 zJ4BIVGNuCXJ4?rSRvF!#nAE@r^{Zv`v@1T34ioh}V6QIqNnzj-3lnFnWqMXv)-*_1 zToubrL^b7kn)Xl_yNzz=w>-j5jI?Nr`3cL25utRqMo+>D@VHeQjhdnBi;i^RL`LFd zed+posmi8dT!F>jQ<$k1p>!|N^psBT!0F^jt-Bvaxmqn1oz2k4N-c|!Anx{S;(VVwN7kcZy@Su#Nj8| z21c%B)UqL4Bxl#;kE3*?BYO6R%t{+oWVy)hR;17xKB%r<@`F9xiJ|tRa5^LH)sD8v z1?tv5^OJGzr9m%bJEsl(d3YW@=Itborq5@a5g{@Vr#o}}v#(Fxrsu%hJ`v!?+g`k0 z6|<0o5LCvU6+bg>CxxHi$uZLA8G5N~+ilMEd9Sl|aMJux-#g21Ne#|mg_k z0oS&iCgMw*&^Y(4S>3_aCEdZ>?Vj!1-wbXl@hXQ=%REdm^UWD8U}&VGsqOqi>qk4I zLhOMvD!~TSVS;^3IzXy)F45T^Rpq z)^|f=50mEV(S6cdS79es#Nm>hX~XVbxqizO4K>q!e|c6>^v@9O{DdeQblq6j*-iuK zjv{JD@Z@cjO=jV2oI$UKV&A(V{!KL67$^7BrM$A3k zm^XT|fqa!V)#Lbj`n^39?$KgWqXnON$Lf4uGyak)BNxC2D9+zT-AMx{3#~HL2nCZa&taPK3 zc}E+t(qoY)>RDykDdFjANg}JsUX)jBwc3Lub9uNV^I)|RiH%ghaRwvSDc<>*ryR{3 z%REBytOKof&&_J@N)D?d-8MQmRF0R5Lj>QWZ)634 z`Jun^(j~bKz+*cxdPkJf)?F$49nDE?nG!!L8j|vl4-J+RyQUJ$(cT|Nu$m>5u~anV zxKS$__0XqEPJ+pq@a-z9qvV^YIYDia4 zV!#)<;nd5}r}HORAr4A<^D0B84jQS$_g3ipu+BTTJKY)uaE<6d_JWB#7;*!Ta+D=n zO(C@IbXPg$eUX|uJ@R%tmq!Smn8im1cLOO!ZE9`vd=Sf(qsanVV~opQAJdjwYMY1yKXmOZK* zcK%Y?7=s1+KBTCk95A+AKp&{aF~WN^BIoaFMak*FrYe0m4by04;G$jXG0R14VG)r+ z6W5sL$e!q3ue#H~!xF*lIJ2H_Ik9GvgBCB8%TasGbTApXkrTcxl)fY2C99@lTH<|C zU|-ATvZdcoyGgMOT%*@k%tEDrY&q%vUB2Om$c-ubK8PO!{E7-ygP6i>No^?3jHUm4d34mmaKtOCjv$}+yHcDP+0{`Ce?}&r6E^6+d=6)n z2zNbQMat=Q>~}xg1AHQy9^%9X&2>4T$XN-p&2jY0Pv2@PqaK;#_TLIqZ*FtR`;s8@ z;-kL9w)%$~a=jl5V2YX#HTepgTEn#1x zgiuzwYt@lB|HqR%!s$DD2F~3XA4mSal!aDY`UVHtFZwy>1?a z7+lI_n(IzbZJ!pl-V&Ic+BkaaKqS+{IvH@7#-X5T`6mn|Tixo4>A_)!FQPpqk!~vq zS6gp?O!Woxx^Y`M2sL9`OUg-W>VL=AVQ4=)&zb&l&1;;4Z0s}K1$U~1?h9esUT+C| zW&K{BRxU}<)_p=u*vVo066HMAr0X$I`-P|ZGi%qHsarz_nFVxKthRM}87_LW^UKWn zma!c&@4Aoj-+V0&e?+$2OZBCjy}`#TYVVcwkw}3BMO8>w%PwIQI@ixnXxqjo45n(U z@^XeA6mD5O1e}D=H8wpyv$$5cYjzDnAhb_B)y_hev5)oie7&&FXpa&z{2dCX4$aA^xL7_OI_n;Jop1GHp#^HH^GjOK0h)>+!3;98a6$r!DyJ0TEq)nyfIc=`A6&*!8JD z%1wI~PQpqtG!Nb}TcbT6qqloUrpIkkf<1T4)?UD5n9x3t(NajwsN_j1Rc6x(1NjAS z%(7Hk(->iv^6^nW+^Xa7v;Z#1egob;cn4GKw(w<#@}TuE0^|;AYN?02t)=m(sBKQT z6c8}kr;ie7-~c_gBn3SQH3(n+w*F0BrYDL9$^RFq)fX{BZtNHc-up0`=b9|1{Jz1V zwRkg4=19KUShm!h-Zrs9Bxg~00rEpWY3SIbYuW_jB={VqfG8UU6D`%zy^{ohA}xVSBOGG{rW72HsQ^y{j#mU)4;+f( zfJh=7|Aq@3kBR%Q9^=a!UOo3w~L@e|p*ss<6=` zYKIxGR`~#Z()R4^(vLVT&5VN|T#-Rqsgkf!k1epN`x=yKloccRPUWOL26Q4Mm?Bbp zZ$ORpQ1LxejUy_N#s6ok1%0OUufdAC{j76~xU;+`_g)I6_C-JngG2R4I9GbU-!^nZ%si+4=fcPN^4+};F4Il^`-Z;ekc!Zz{u}>^AbVTo*NoH9 z{>Py;UBs_+5DyPeoF5n~;FNmm%^XRaY`<()IUMm_6=nU^9!QkkdO zembiCG?xEz8|5gpZ5K&cf>qxdoUyl8SOS|7Utq(}xi~Td3DhQvCjt%2-a@8LLz5Ow zPbMexom0!+Kvnb3T)YP2!q&>e>Qbu`p%+xKv~gzyqz<1cd;Mx5zy6u-HVfP6e72a+ z+tOEAcB1;2tU_A^IG|^2v+^${G3?sEx-mq&^W%QU5CKM0duAz{_~IvHjBmj@edQ1unkI#}ElL;qkO3?X5CrTTPq zyVIaVOR#wQ^^|{rpYKL3DiURh&t(d*eIty|xA3!U$V$kz_nCVWZFenuc~|gq55w+` zS+Td|Tv+Gv_8&oSIGMzxr!uNyUFa8my(VC4^;^Tnkxz@Wpl-c4mL}Z#?xj(a#KV5l zk%T-Y=ULMH?S{YQ4Y2fd%8E#tY#VOqa;dyJ_z(*sQ;Y3As zZVQ)dTR=-XP8l9J&G!Ib#uBhOU?G$B_-}qg>5yTm_22_WizdX8tHV=Gh~<>4-gQFc zXEKA^%)VcDAy%SgQvm8$~{M_sy#YkQYR9pXydSv!3Y$)*?6zn4TG7kOo`t-Iyb7XUek^uG|m1R`K9 zRExtlanVcmwYJ3gBjq7i@1M!EgUO-_=?pX|3RKPwRWAwwA`@;+{U&TPKB6m|(YaB$ z;rNl>q3rgkWruIJ;S6odZpUn9`IrU%vY=^dDPlGv+lzg&_wU{A#d2iCoXCS1#l{OA zIXrvY>1M0t4$pce`~$4&UB+l566q*Jv}7IpVaI-n3V-G@$rX@hX3>L)I75{!bdEF$ zdo=f=Y8}p~MlC>#+W3`A%Jw4+4>gI)fU^+Ulq+X>_|xV^9XgW7uog*3)F3qHTt1E5 zc{JqGo!=IsXIzB{)0X^prdtI&C*w)-#f`Ry4k5?6hhn}~MxPY?{=j6SdA6S9YppZB zD?d5uRko?6y1|iWxQjxrXNjs!kGtk=pfldT7115;Rkbm5$5l}`d)i6iKSlYm*cZdMwD*GUy zUoK3rbjMTe69An~lkDy`X{MV|=m!_^EoY5rqoXaih!q<0LnU9w5#Kjd0us$~QTN)c zGI>?>wLcXIL`1w@d`G9R{?w1tG+=9}gS*6vRq0=Ei+Mi1ny&2PQuZSsN;WWW@t!oB zU0DFm-61`@z1YeJovO{xwZbxBYN0hB!-RI{Gvt#qb-?czF}r@c>LJLO*Z3l<@O5^r z1(S9n3B3Pb26V7^Fqa0y$6~y-l6|L+I&SYdX(S2i;Qle_jRo_~zPbI);>!ZHw}iu| zeHyrMGRONF*XYgyrZ-_Wm|s&VV5OvXxmjyd;?G>}?tB_yc8t~|gxtj^suPi~$D(Lb$V_Wt?utID*rXuz?cA?+zxn2V&7nKzDm3D_`oExd&{t$O!uNY~u>bZ5XB zLoubCTup|t2MhuiVo=AsndI+0oyjc;p6pJ>@xel*{ELCU_fyG(-OE{$0XNpjG1kBD zw57rrN%|c7@JN}0QcV!pyk$i*w;HR_1dIM>0!fO)?wU++B{nP!bA8>Pf=6z(V??c4 z6ABlDiO6otc&_IAJ$!@SW#^omdY7-d_He6JzT3use$jpFdERA(zCGk|!qHsX{!u#n zBnuM2sQv^C*VJ|DVZ=Alhnf$=sk>!J-%|bK*K2vILc+G`sK`^^^WHX%8HXfW`DlSWnA1(`cNBZZ9%fCk3qTt|Pez&S4O#LX^zK-#3 znsha3^hl{m!^oUP@>#08`@?rNG!?FH6`R6Um&X9TuaRS|B}(Ba0YHEWKiPQp$RoXr z33(OBn7zdr(L`G?e^B^I&NApNg{7rLchrEOpvDz8>Mp^7i}wws!iDB zZw&F!0<0eQ9`Rb64>o45J`;GC)%M@MqJre*+8Ztky?(JHXQ z+9{UUS@%A%Q0?9O8_62#%{GITsT@G?W;SMiBd?m`Q8Vz7AbrHdJG~Pa=19ZOZc))7 zB2;R)DQoSpyW6Q?3blg5;;KMQ_fqf3N(Ms2 zm$vVXm&557HIJvxE-mym#uHGuXZUAgcyC6+-*~HpOmJp4y|pz*^{6 zB%}9jEqrI5X2u185tFMMZVjap*p0w}Ba7`#ZoAKoRC+w3e1BaDeby5>D`MmOOE6P? zR87m6e!e7x0+s~vmu_XxuPBRBXdhF%(tB)rdNCM=cAp1mIzRO2 z=%{#(OEWboxLm8^Bo_R4#(@9EFq5Fk0ntJK|1LU!sQzWq_W?+=1)G{{7r^y@MPZ5> z39S|H=`xK#Ovb;tIjEKQkz7IcUb?K$_nL)_AbH2>X1O%)+3>Tf?0-XyWF8=G(CZGA z@mlj2JmvlY0n2%!IUs3{s`q#@USXxdpb+RU4M1C@#=%6`gT8~kjlr+)G$J*)ozDM< z7=N(B&6&H@Z>^yU;q;bdqdhi83*^2;z|MHePAtqZ2=H;6ZTtLSDc0sm1T{1vq3gy7G>+i5zNy0$eF(wE z{~cK0!14G@eI(d!?MF=g9P0`0IwDQ-{TmrCCm0^Mc6}z74y^T;)MV);5J>aaQ2hgC zzLovS(gTo%9>u8VeFraMG;o#A*M&vNrfFET1bGs=e|m3dI8&e6+^-g-J+)c?5+8vv z1wcUMhNxn~e+H;8bHJgm7oC2CQ87*l=-ONF16M}2Yo>_JcsA{r@4MS6K|0U6D5P0M zEnO+DnR)Ngetl>rWtZ9I)8RpWxwg;bX92M`4FS4z6cp}EdYS1wbVo-^SnnuA6=rm@ z_!U3U+T=NyrEPh@Bqna`Fg@E5ISBSQolU2=4Zp)d?Esx}=$UScFnE@?9>?_5MxZ(HT4%9{6= zffy`0Q~&oynO{R2Sm{UE+S>Fw$5l!>C9<`vhIUTmoh$ReQ~Jzvgl5Y8c%`&#Dz52s zQAwXe#koT=laE{=E8(A?$bFcHDU}U$7%JNVA;!jeop9OFdHDX$gIv8*r9P`no~jN= z{e7nQ9d`N7O@oh!@x&PF^A;gh|7co_&Pj+ak5pYj+N^5lsgsOT`^r7xe^2j^x)w5!v+S z#RM#}w2^V_KhXITte+CU`OOO7>zZcKc%^@}t^p+5tr-x=={##6(2zPkpHxin2bXKr z^w$AJpnV_{NV^k0w^p|mPGCPQmNbQyXm{~7t z(htGY^Q3<|@9uY1txgz6bbBQpAP@jBus?`_>@x;c-hO{U@AZEfilir`jTH?epVlmT z(CI796%@m?Y4d83KV+ZcIgyy!30DoHW`7^pD>{-GSU(-ytxs-;D6cv(@AGh>Tz?P6 z4!wPVJL_+IsMjF=M8VSeN2c*#oVX%M6l0z!IZ%h@*s@Z%8dRDii?>bvxE@jKki(g$-r;@TjweJ5`R*(U^DDy4&@umz5{q<6cEFu-M=2dA0h~<>4@d^mUL&yu zgvm%;Bsn+Xx^azkCEnFvxs`8Mn?EoAC3(7GPY5x_4j#(KU;oRx6ls3r17*KYZnhjV zA|Bz+HM38zH_zF>*i|$F`lsxM6Uw#lCPG&FvzzS=f)I*TUZW)_$RtnWN5mj6P@2AR zZmLfrFv0|FSx%(vOHT>`(PBx**-*y7dNs=(>qzo!f@qukErB{cvAFfct9@B%*JLgf zFtaLG#{x0~XiI@2EdhL4x31@v!0w8lk?V51%WQmvOiP{6fXOeD_TIrT1LxC6J0kU^ z{^#5F(M(q#_g4%3PIxZ5w;*Ly6L{&lccZOH%a2VeO7Me2uK3>A+^r_TJZPI$eunHz z%}WB6FC|N^T2o-2c~6MSyTu0*6vs5WCsgl6AF?zys5N=o{*`kBd0Z^VNRACky^cXG zg)}mSgP&qP>pwzJ=|M+(RRQ>I_t|hRPP*vdF04=yaiIisOLr4$t?1vqRaX=ke&9sk6B?AYqm0-&MeUFRv+h* ze2SMbU#!``)h5zhs+prG(?TPq^OJV!Z6CJ)pnXkx`G>ntHmRG~}_>;k= zohf6z)%K8~i8{AP)U@wP$!suhpoH6e&o}j0`F-2+G;NXJ~ygZDW3S)WY})$Pj6qH0_clQf})8ubEGVw4*UnCjl&Mu(76kfv&I-cyKyq@s&#l! z6RW0+j=nH7)2jO+HK~rcdsY4}!`>xHxA}pNtzLxy*AWRL!OIE?_+{)@oZ9NS#J=6l z(&?baEElPo&I0NxBR!gqo2IGR`%hU9z7ypYATepBe1JYli8zf&Z`-Hu_eyl1}ZMkq>!qEXIADil0wi~c=PpH*J@&&-+Kwh5Sf8^W_dGa~n3 zLf)%2k5Wt{$LGtp*j0I=fRCjY7S_z1Zueg4Thas)FGkbem1sSlmPv+#o0n;N*vHdH z_6LC`fwJmOYN79Rzz$7PtZS7^9!>*PWK+&ojuy&3u3z` z<$Iq(QAt$n&B9$d_nqS+K(9^Hj!=*u<4U`qtTTz6g>yRq6{&r@%e0dU;M8kE2Cqk8 zmZq!a1}UrVGJQ~KX_fTuPHyKU+s{^e#Pq7;a26t@=@!kCX|Tx`MWlHBAH423Fbfcs zHX|Qx6C69rEZJuwWchtN>4&q|t43?{({1ZsFg$=gx2KyiygAkuw~#fe8>u@*k<+~M zU*E_DEU#^0&cV^En+=S%)#do3^;9QzXs*!LJ7}ZofFwVI5{+ov`Rxzd`}>|+%{tq+ zibr;ucbaA)EW+|Vq*19s=hSm&jG4G{chBpSFVm?n6oc;HG^b##28i==;c zTiq#-LCE(7W3s?-wJ*A*1I1&`acl_+~Xa8C|k2UqLSds4Z;A5%j7kC?~ddW0s9`B z-rdkPH`F$#8PQ{%Kap!Q6sLk;qqc zUYKe~+-U;wjT`pia$Z(5$VqujbM3Rekkt2ZUU_aH{4diqE;;@{IgIJ5+e4Tv`bW;! zknRkS@7Nc3N#YbF4Rnt0lG?FJT206DF;*612osH{ctVwf#Seqhv82*Q%*;2wIpUy4 z_Cz!5w>LPDEHfg{3*y$Tt4j45`OL~^vnWWq0iB$$_V6J!N$A!Wq$vwAa;Zpo=8Lwg z&C8ceze8O;R0v7Xb(75!(ZQW#R}YFyFG*jbw?XRbwG(zv1?IQc@bzJ&7DGO?^e|w; z#zjR`tPmKC#PQbaY-uS@Y=h5G98qnCY(UqCzP{%DhIozi!2qE2iczq*Z{JQRSE5bB zEzK_M_9uhf44Xr#KK|;^GA6_~;AkU5aGy?9;iIpOreM*_+07w@Le;-6ct<`q>Smig zDwW$zP4VpJF`xGdiAtEC9tSI+H#%C-Ua*V@Yw5-rw}HY{V3?}5FDXDT)Y?u=;UR7# z==!-o*ayS6a~VxBg7Y_cMAI9B>aq|`Ca9029MIfL(+0ii;v5ZqxMa~-mfgKLR{U)k zJ)Z(YIIzTfv)%8KJYANI;C&EG5R(R5+|8MblDyRr^#rB{6J8SS{3 z!NOgn_J!1bLN!-uLtHnZrm)GUD&G%)tUsb3t<2WOd4m&l2aro>k&Ks zmjV{63sx8a+oG9S zh92j=6miFlZYAE|n(y~s`b)x0H(m8O6@H@gzSgVlpSd;P6b_M2Z!w^&x&t79fA$zW49zJ!QCq8nTRlNBD=eR}twIH493nkxf zr|bHHG-srS=%-)Xw@yeS5Dr-64rqpVN>pCQP?IRwGs3e3e%6ESOdBHDsa0;rW=KxLJ zi;_P)Jbc&U>Ehws-nU^uXTMum=0{v z?Op*WGTRjh{C|$@JeGLM8g9!HM35KN16>igjV7V2;x7ulb|fHU(M0yiRJku*?0p`% z8i@}Xh7)Ri8^)lLs!5TjUuERq-~mdvHuw!`PgDtdPhEZ?-q*}8sC&PoaHnRTf)YDO zrqmCqDj@xQl)y?2i%{Zi_r5)G0v7!qNop^O_KcWC87z z)yT`QZXUgg40#%WOn$d(&D%T|`ucY)006fE5KOTNpI>@0vhNk3=s0c3`E{4`$?{v= z5=fctK`b5+BpJc>mjq(@*O}e`@rirX-(T+s0Ro}<|4Y?K|3kRCtp#CTFFW2Z111t& zj*UH9jHT=k*ang1g5TLpq7&85q}_xh*Ps%OHy42^7qZ_3BBGeaMf_R1!~c1zo?k?^ zV>t*tHnom7wU&}?($%%gwESnO?A9jg&YD+&lsM4UFiv=km@K_iICw-Mq*O{Et^+Vn z%rq8K-84_r@t?G(--3dt(+X%QR21nF^3k2KTH3Ms?%1Uz_36VkuR%hRO_*4SVX=-N z{^F;8WKP_z1KY0+!q=*N;CsNS7L`m8UUkq#l)o)GCuBsZ)dOX^Y!~>989v;Gg2Y1y zEtLX(tdH`8?MbpG__FT-t~0W0kTmJhH8QCmuiTdl@-ADR`&ADJQ9R#492jc#h6DLp z{c6a-t-my9f611#eNaSSX&y2+0?&ECMVP^f^qHGbec#lJy2jB%fWQqR{j9=cpQ_6A5~(0Z#?N&t$*cv z@?Y78z*;Zvi19xV=-4NOu@UyRq&$QHf@HF>?P4BIj{mHM9utb6C-2Rji0bqd_4sO~ z!S!h6q6_tZmD(c_whsqN&Fg@g@wj=ZM1szkFmu{h`xK7-eF3iiD%vL-SK~aL4hdd! zX}zd$k1$B%+$`8G6pOmMpd7fPZ3C&?@lwW70gx7D?6z}#E$?JWIf-N6sJP&PyMLD~ zYP051=dBs5aO6D>JUcGcV$VRK*1M;uw7!ru;lyV4`;PY%uv_wT(^n5ZXB?;lN`H+c zkvC(fxqTXTu!{>v#s|gHNx;HKM2v1 z_=j);Jp;*fWRq=JDQ$@8*4D2!!;g;aLX*OkWTX^h4*fh_$H}hGfx^{;1F=Lz&&|*^a3S{9z_}Awdb`v))#2dSb998aPV?7F5}?w_dTQtPWA;= z&|v<1J(Cnc(-8%Hr2=m$8cSi>!o-gI;|88tBk8I-dN*zJgoMI@K?Am^q9qI#e{^4tcOe7fLYkLE+ftw+h zM4V#JHTrDK(_pSGpM|quar8)VAg-A{n3srrC0HYPdba6#F~#VM2Q~gNFy>=Zgv%q? zv4K8=D#94MqGKRSW-4#G<6VlAWwR9^DrqW_Fpb@{xU$9z{bG2g`=fqMryqNBl-)be zM!41Ku8c4#6XWr5wDsygD3lSVCddfQCx_KI#p4VRG3GaR-ae8RCuJQQ$ax-af_Od8XE_%mm&ZX(9Es$YE zM||;JqiWsNUWwgG4cHzdawK22Q@GSU8FYL|Bxjhj<5cYDqV>bI?oyfhp0DzCDZS$# zUtJzqObC7(w3LdE9qCGB)u%ZXc+krx>9D!QXrJ1S&rHXSf7!X;C^3thts5>aTIH65 zdK=*nx*Soc_3|}ulkOU!r?rCP$ZyTZFMLgvN@S)Q%ArjefAmuJnLS@$q{U`Q5`8zG z-XDISfyLD}uGO!6t+49$r%)T*+ICd06OcX}RC&cj)45=F9Je{n%9BxM>Th4a7^Ovf zYGbmYZ8r7n=^)_Ss7}hbKjdq_=(0jcrH-?_r65&#MLlcYBz`HcXlB9D z`JIRFyh~T)ttl(^rAY*8dmCG^2Lh-hWm_6F?~yfbCv0nY5ZyqJeK*c?*c5Iq&Qf%6 z`ti?g=aZir3Z1iOG@XU9z+rqs?;d(EfIN#ohv!^Np6GRcOx#82mt zhMysEu(D;8dzB-nCaRQD@zo2FS>j(z%DT-_Q|{2A!)P#~$wN2foRtc7*-?z$r)NI8Yry9Cf!K^+}TQhW*ehO)of9{9TRwKOYGPhC_oNYI{ z+z9JeaKYKKClO_gdST__JVW{nElgs_*lCGe2NBe}dk22`n5c*)TSuzybX}@*ofS9+ zVC|+nBdo2i&(?Siis`&#pN~#esHil2(_DMdEZFThfPCy8zN1Oc(&^#&0m{e+w`o%p zy+O$rv~C%9=JfZ)IREvkf~BZrwLAs+MI}4%Xo3PSbgta#1tuMprrU@KeL^X`ZRI*d zR)E4mWt8#JXYIozHx-E9nfFhhF0a>A?3X9oKh4aFPxyehm(Z!X6K4LzC72q;QmX=~ zDeHWqOn;Q7Yjga=`=Vu?!47e0c17<;mn??^{xfFw2{d&&&&}|)JX{`8TdIoEl)?sR zXQnLd)Rabb>q2vTfPJmR6z$wL*;abg97&6+)orE>_IK-BvNqcKFe!2N$EEr)lcf9h zBdjx?jh(YnL(QFRmx30vUP|B3Vhvi^Wy@-e&q%@BUsc9`Gr+-*gCcRFk`GF2zp}bI zEcZ>bCiyPnXRtsh^seCu4UaIOi_8~`Gv74klGWR+C6}wZ1;wBEQKzEBbuKc!ctU<(zO41p*zE-UNu}rOO592=O^IsO zh;4SO;0JyM%#{=d9ey_X+XCfZNcGW8Vy__;{*5zJ8grO|<#(n^(JP};bM{(KwP(@C}^dDs)XARB}W5J*{l-M_l3J zIotiYL-p%;)&=8jahUmmQ`HL*tJ~txpZchy%!gg(Qr{SZ7b|nC|RJwbYJG{@z8M7oV*1p?)dmb;4?< zn}^CPgy%_s!m8%(ccgG^{c?~xmsZA`nB!43kjDsun>!PbiaT`diPWtO(x8PKx6@DAY0bLm#<(bviQ!Iv`l^^ za;k77WgxD>laGw6=Bf?qrJpl-V34vlQ(5=-v-@2h7dZB{)QZ9?dNrkRbKhY`@~Tbz z=2r~qh2RQ<2&?nYy73j@2|24S0EpmEty8>=nPyi^HyV86Gsqad>E<-`_;b`nUw}-6 z?BlZrZifzvEHadG!5*HHhH9Zz6CTY>u}GY54fq4bmF{f;lbi7EO7CI6*vV-3oMP5T z`O*XI+n@_&7sQ>L_vYh^R&`{dKN-<^>9`sRtDtr3X7~&I`ny#P#=h&?DxTP#gQ6sA0q9*YtK)(>+$F}$*!)NL`C3GZc{5j3;h^ee$nyb#lcjor( zRbFiZXjQvgM?({dL*VG1YK_I-nI28g3a!W*rsykMRWRW_jaa|Ipl&;A3!cH#`9vEh z<%*MtYVkTSIX-MT-gy{Mm2*!S0d`sWpAD|71QdXW_BBswPzaF^ZPaZy={af0B?_7y zg(%ieOpObh1h$GHu&}XZi|cc4`CLLV;tb^z5j4Ep^`-Y4UzXJ`7uLKO`1l8|{NjMK zlsD^Xih1#`5wj6ATGjY;LxPivIv5x@=;q6&njO(_UBlqpiAkyk(sZ{C?7^T|JFP^nITO zWxc2z6;*B)UZk7-@oC5tQ&=}V1XIOq1 zbwlRG-r>y{P4dVfO*|f133}b^HP9&LxBqRHGFwIU?z#km)=iF~AlrJCpzZ4yx3Y33 zF0F1#=r-qW%gWlnK+bWijC8n*2RW|0!7hY9ajB0ZH0ak7LyU9uTXb}q%7nO17q~Wb zbw)4H#2RDWA|Wg3erxnepGy4GEaW~msalzv#rpDQkkoR8FHr3ir8&g>89pKj{(YWKOR}{|rapzx1rbOY4K|C^9$okC%qXtW(gfGo^}bQo&BA5KYl7wG@$D~k zpY)six&)`YFuX)-o=)e5>iPF4U}H0`*NNuy{g2QJdI~KyD>W}_Ex*9R*M65O{rtr< z1TRMxE|S9h{QPt)Remxg4Cy4xLL+1H6Jr$jvtF{?NfYwhUcJi2^-Q%LE&#LZz!#(; zqZylZpAa6_1D?LM*%i@ExwSW;ufWqbs~Mh1M<}WbU&{dv2iiY_G4aRF361Q@*Qm|; z9)J*d`K_jceA?-|Yy=LgQP?@O!o&AOge4(4fqeYPV!%?K3pfoPOt|Hd>BbW%=&G8+&;YYfSR zKV}ESAP7uy*vw;G>Wa-{BIdn&l7t3+cqvMRott$w`Ca;U7=qUZF;wfd%ObO z9t|2BwC`Iqg<9SDRiBlg1S`tUchuuSzL?F`%!k@>m%r?!9Emjiml@U1`1_R23c` zB>yHWuoU8*uDayR83f{7+7jgZJcxUQm`?PiRs98d>2Fwq4sal;?3s0iow9Wu#P+&T z+_rjE)&1k4*1wbrMvJL#U${f(($mw4*>OPO@SZfOWxKkJBX|HLo z&&gb+ty>Pa36+QLw4I^a%)e%2TorMF@Q@j4PS5MBdV~+jJA<|P+pIEkh$yOYz zULR1lezf-zBEUW%ZdLRkjnAro*8L&hB9Fk)m^+LTbkkkL1iA(CDf`6W|KFx+`CnLi z`9F}I|MS?&|Lz6B1pjNP>;In3lR5amShIW_B;$FP2y%f)$e}X~?xS(Fh5tE7rv&!^ zgbR)#- { - Data table is a component with a high rate of usage within the applications. It allows to show the user a - big amount of information in a simple and simplified way. All the information contained in the table has a - grid structure, defining columns and rows to place the data and allow the users to scan, analyze, compare - and filter that information. + Tables allow users to show a big amount of information in a easy and simplified way.