Merge pull request #447 from Infineon/444-documentation-table

Documentation: table

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';
+
+<Meta of={TableBasicVersionStories} />
+
+# 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.
+<img src={TableBasicVersionHeaderTemplateItems} alt="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.
+<img src={TableBasicVersionHeaderContentLogic} alt="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.
+<img src={TableBasicVersionCellTextItems} alt="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".
+<img src={TableBasicVersionCellButtonItems} alt="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.
+<img src={TableBasicVersionCellTreeItems} alt="Table Cell Tree Items" width="50%" />
+
+### 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. 
+<img src={TableBasicVersionCellCheckboxItems} alt="Table Cell Checkbox Items" width="50%" />
+
+### 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.
+<img src={TableBasicVersionCellStatusItems} alt="Table Cell Status Items" width="50%" />
+
+## 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.
+<img src={TableBasicVersionExampleDefault} alt="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.
+<img src={TableBasicVersionExampleCompact} alt="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.
+<img src={TableBasicVersionHeaderSortingItems} alt="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)**
+***