diff --git a/packages/components/public-storybook/images/table-basic-version/table-cell-button-items.png b/packages/components/public-storybook/images/table-basic-version/table-cell-button-items.png new file mode 100644 index 0000000000..e00d570beb Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-cell-button-items.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-cell-checkbox-items.png b/packages/components/public-storybook/images/table-basic-version/table-cell-checkbox-items.png new file mode 100644 index 0000000000..2e7956ee5f Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-cell-checkbox-items.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-cell-status-items.png b/packages/components/public-storybook/images/table-basic-version/table-cell-status-items.png new file mode 100644 index 0000000000..ff4d8d425c Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-cell-status-items.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-cell-text-items.png b/packages/components/public-storybook/images/table-basic-version/table-cell-text-items.png new file mode 100644 index 0000000000..f01e7be12b Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-cell-text-items.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-cell-tree-items.png b/packages/components/public-storybook/images/table-basic-version/table-cell-tree-items.png new file mode 100644 index 0000000000..42caab3a82 Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-cell-tree-items.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-content-template-items.png b/packages/components/public-storybook/images/table-basic-version/table-content-template-items.png new file mode 100644 index 0000000000..730c91cddf Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-content-template-items.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-example-compact.png b/packages/components/public-storybook/images/table-basic-version/table-example-compact.png new file mode 100644 index 0000000000..02c9c9d1ea Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-example-compact.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-example-default.png b/packages/components/public-storybook/images/table-basic-version/table-example-default.png new file mode 100644 index 0000000000..fd1731e4b8 Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-example-default.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-header-content-logic.png b/packages/components/public-storybook/images/table-basic-version/table-header-content-logic.png new file mode 100644 index 0000000000..4f07ea9e07 Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-header-content-logic.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-header-sorting-items.png b/packages/components/public-storybook/images/table-basic-version/table-header-sorting-items.png new file mode 100644 index 0000000000..bdfc86e151 Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-header-sorting-items.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-header-template-items.png b/packages/components/public-storybook/images/table-basic-version/table-header-template-items.png new file mode 100644 index 0000000000..487161fe11 Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-header-template-items.png differ diff --git a/packages/components/src/components/table-basic-version/Usage.mdx b/packages/components/src/components/table-basic-version/Usage.mdx new file mode 100644 index 0000000000..304cef4a51 --- /dev/null +++ b/packages/components/src/components/table-basic-version/Usage.mdx @@ -0,0 +1,77 @@ +import { Meta } from '@storybook/blocks' + +import * as TableBasicVersionStories from './table.stories'; +import TableBasicVersionCellButtonItems from '../../../public-storybook/images/table-basic-version/table-cell-button-items.png'; +import TableBasicVersionCellCheckboxItems from '../../../public-storybook/images/table-basic-version/table-cell-checkbox-items.png'; +import TableBasicVersionCellStatusItems from '../../../public-storybook/images/table-basic-version/table-cell-status-items.png'; +import TableBasicVersionCellTextItems from '../../../public-storybook/images/table-basic-version/table-cell-text-items.png'; +import TableBasicVersionCellTreeItems from '../../../public-storybook/images/table-basic-version/table-cell-tree-items.png'; +import TableBasicVersionContentTemplateItems from '../../../public-storybook/images/table-basic-version/table-content-template-items.png'; +import TableBasicVersionExampleCompact from '../../../public-storybook/images/table-basic-version/table-example-compact.png'; +import TableBasicVersionExampleDefault from '../../../public-storybook/images/table-basic-version/table-example-default.png'; +import TableBasicVersionHeaderTemplateItems from '../../../public-storybook/images/table-basic-version/table-header-template-items.png'; +import TableBasicVersionHeaderSortingItems from '../../../public-storybook/images/table-basic-version/table-header-sorting-items.png'; +import TableBasicVersionHeaderContentLogic from '../../../public-storybook/images/table-basic-version/table-header-content-logic.png'; + + + +# Table +The table component is a crucial element within our design system, designed to display tabular data in a structured and user-friendly manner. It enhances consistency and usability across our products by providing a standardized way to present data. + +## Usage + +### When to use +- If you want to display data in rows and columns, such as lists, grids, or matrices. +- When users need to compare values across different categories or entities. +- If you want to present a relatively large amount of data in a compact manner. + +## Headers +Headers define the columns of the table and provide context for the data presented. Each header represents a different attribute or piece of information related to the dataset. There is a set of maximum 10 header columns available. +Table Header Items + +## Rows +Rows contain the actual data entries. Each row corresponds to a unique item, record, or data point. The data within a row aligns with the headers, making it easy to read and comprehend. +Table Header Content Logic + +## Cells +Cells are the individual units within a row. They align with a specific header and contain the data relevant to that column. + +### Text & Text Links +The basis of a table is the presentation of information in the form of text. The DDS offers both left and right aligned text cells. For pure numbers or prices, the right-aligned variant should be used. +Table Cell Text Items + +### Button & Icon Button +If a table should offer the user further possibilities for interaction, buttons can be used. A button should be used for primary actions such as "Buy" and icon buttons for secondary actions like "PDF Download" or "More". +Table Cell Button Items + +### Tree Navigation +A tree navigation offers the possibility to nest more complex data rows and the user the possibility to expand and collapse them. The DDS offers tree navigation up to the third level. +Table Cell Tree Items + +### Checkbox +If it is a question of selecting certain rows in a table in order to carry out a type of batch processing, for example, the DDS offers the checkbox cell. +Table Cell Checkbox Items + +### Status +If you want to highlight the status of processes to enhance the user's understanding of the content. In those cases use the status cell. +Table Cell Status Items + +## Layout +Two layout variants are available. The default and the compact variant. + +### Default +To display a table generously with more white space, the DDS offers this default variant. +Table Example Default + +### Compact +When it comes to show a lot of data in a table, you can end up with a very long table. In such cases, the compact table variant is the best option. +Table Example Compact + +## Sorting +Our table component supports sorting columns in ascending or descending order, facilitating quick data analysis. Additionally, users can often filter data directly within the table, enhancing data manipulation capabilities. +Table Sorting Items + + +*** +Check out the Figma component: **[Table](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=16048-11054&mode=design&t=vxTx374xQDtV53ic-4)** +*** \ No newline at end of file