Skip to content

Table and resultset table redesigns (Documentation) #2234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 4 commits into from
Jun 17, 2025
Merged

Table and resultset table redesigns (Documentation) #2234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c5b0f5
Added documentation for tables
May 26, 2025
db3b9d5
Updated resultsetTable doc
May 27, 2025
048714d
Merge branch 'master' into Mil4n0r/add_tables_doc
Mil4n0r May 27, 2025
f9a7326
Merge branch 'master' into Mil4n0r/add_tables_doc
Jialecl Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 107 additions & 110 deletions apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,119 +187,116 @@ const sections = [
</>
),
},
],
},
{
title: "Best practices",
content: (
<DxcParagraph>
To ensure a clean, efficient, and user-friendly experience, follow these best practices when designing and
implementing accordion components:
</DxcParagraph>
),
subSections: [
{
title: "Best practices",
title: "Use accordions to manage space and structure",
content: (
<DxcParagraph>
To ensure a clean, efficient, and user-friendly experience, follow these best practices when designing and
implementing accordion components:
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>
Apply accordions when you need to organize large or secondary content into collapsible sections.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
They are particularly useful for FAQs, optional content, or detailed information nested under high-level
summaries.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Collapsing content helps reduce scrolling and offers users control over what they choose to engage with.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Keep headers simple and informative",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Each accordion header must include a clear, concise title that describes the content inside.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use a sublabel only when additional context is necessary —it should not overpower the title.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid hiding essential or primary information inside an accordion panel.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Limit secondary elements for clarity",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use <strong>only one secondary element per side</strong> of the header (left and right) to avoid clutter.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid placing two elements of the same type in one header (e.g., two badges), as this reduces scannability
and can confuse users.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Respect visual hierarchy and semantic meaning",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Always prioritize the visibility of mandatory elements like the title over optional elements.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Maintain consistency in layout and alignment to support content scanning, especially when multiple
accordion sections are used together.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Choose the appropriate expand behavior",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use <strong>single-open behavior</strong> when content is interdependent, linear, or when space is
limited.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use <strong>multi-open behavior</strong> when content is independent or when users may need to view
multiple sections at once.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Consider the context of use and user goals when deciding which interaction pattern is most appropriate.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Design for mobile and accessibility",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Accordions should span the full width of the screen on smaller devices for easier interaction.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Ensure all interactive elements are large enough to be tapped comfortably on touchscreens.
</DxcBulletedList.Item>
</DxcBulletedList>
),
subSections: [
{
title: "Use accordions to manage space and structure",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Apply accordions when you need to organize large or secondary content into collapsible sections.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
They are particularly useful for FAQs, optional content, or detailed information nested under
high-level summaries.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Collapsing content helps reduce scrolling and offers users control over what they choose to engage
with.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Keep headers simple and informative",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Each accordion header must include a clear, concise title that describes the content inside.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use a sublabel only when additional context is necessary —it should not overpower the title.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid hiding essential or primary information inside an accordion panel.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Limit secondary elements for clarity",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use <strong>only one secondary element per side</strong> of the header (left and right) to avoid
clutter.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid placing two elements of the same type in one header (e.g., two badges), as this reduces
scannability and can confuse users.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Respect visual hierarchy and semantic meaning",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Always prioritize the visibility of mandatory elements like the title over optional elements.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Maintain consistency in layout and alignment to support content scanning, especially when multiple
accordion sections are used together.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Choose the appropriate expand behavior",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use <strong>single-open behavior</strong> when content is interdependent, linear, or when space is
limited.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use <strong>multi-open behavior</strong> when content is independent or when users may need to view
multiple sections at once.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Consider the context of use and user goals when deciding which interaction pattern is most
appropriate.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Design for mobile and accessibility",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Accordions should span the full width of the screen on smaller devices for easier interaction.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Ensure all interactive elements are large enough to be tapped comfortably on touchscreens.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
],
},
Expand Down
6 changes: 2 additions & 4 deletions apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,8 @@ const ResultsetTablePageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<ComponentHeading name="Resultset table" />
<DxcParagraph>
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.
</DxcParagraph>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
Expand Down
128 changes: 64 additions & 64 deletions apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,30 +79,55 @@ const sections = [
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
rows
<StatusBadge status="new" />
hidePaginator
</DxcFlex>
</td>
<td>
<TableCode>Row[]</TableCode>
<p>
being <Code>Row</Code> a <Code>Cell[]</Code> and being <Code>Cell</Code> an object with the following
properties:
</p>
<ExtendedTableCode>{cellTypeString}</ExtendedTableCode>
<TableCode>boolean</TableCode>
</td>
<td>If true, paginator will not be displayed.</td>
<td>
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:
<ul>
<li>
<b>displayValue</b>: Value to be displayed in the cell.
</li>
<li>
<b>sortValue</b>: Value to be used when sorting the table by that column. If not indicated
displayValue will be used for sorting.
</li>
</ul>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>itemsPerPage</td>
<td>
<TableCode>number</TableCode>
</td>
<td>Number of items per page.</td>
<td>
<TableCode>5</TableCode>
</td>
</tr>
<tr>
<td>itemsPerPageFunction</td>
<td>
<TableCode>{"(value: number) => void"}</TableCode>
</td>
<td>
This function will be called when the user selects an item per page option. The value selected will be
passed as a parameter.
</td>
<td>-</td>
</tr>
<tr>
<td>itemsPerPageOptions</td>
<td>
<TableCode>number[]</TableCode>
</td>
<td>An array of numbers representing the items per page options.</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
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.
</td>
<td>-</td>
</tr>
Expand Down Expand Up @@ -134,17 +159,32 @@ const sections = [
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="new" />
hidePaginator
<StatusBadge status="required" />
rows
</DxcFlex>
</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>Row[]</TableCode>
<p>
being <Code>Row</Code> a <Code>Cell[]</Code> and being <Code>Cell</Code> an object with the following
properties:
</p>
<ExtendedTableCode>{cellTypeString}</ExtendedTableCode>
</td>
<td>If true, paginator will not be displayed.</td>
<td>
<TableCode>false</TableCode>
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:
<ul>
<li>
<b>displayValue</b>: Value to be displayed in the cell.
</li>
<li>
<b>sortValue</b>: Value to be used when sorting the table by that column. If not indicated
displayValue will be used for sorting.
</li>
</ul>
</td>
<td>-</td>
</tr>
<tr>
<td>showGoToPage</td>
Expand All @@ -156,46 +196,6 @@ const sections = [
<TableCode>true</TableCode>
</td>
</tr>
<tr>
<td>itemsPerPage</td>
<td>
<TableCode>number</TableCode>
</td>
<td>Number of items per page.</td>
<td>
<TableCode>5</TableCode>
</td>
</tr>
<tr>
<td>itemsPerPageOptions</td>
<td>
<TableCode>number[]</TableCode>
</td>
<td>An array of numbers representing the items per page options.</td>
<td>-</td>
</tr>
<tr>
<td>itemsPerPageFunction</td>
<td>
<TableCode>{"(value: number) => void"}</TableCode>
</td>
<td>
This function will be called when the user selects an item per page option. The value selected will be
passed as a parameter.
</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
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.
</td>
<td>-</td>
</tr>
<tr>
<td>tabIndex</td>
<td>
Expand Down
Loading