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 index 730c91cddf..9deb776770 100644 Binary files a/packages/components/public-storybook/images/table-basic-version/table-content-template-items.png 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 index 02c9c9d1ea..286d4b3374 100644 Binary files a/packages/components/public-storybook/images/table-basic-version/table-example-compact.png 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 index fd1731e4b8..7c20699900 100644 Binary files a/packages/components/public-storybook/images/table-basic-version/table-example-default.png 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-column-action-reorder.png b/packages/components/public-storybook/images/table-basic-version/table-header-column-action-reorder.png new file mode 100644 index 0000000000..abf0e02112 Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-header-column-action-reorder.png differ diff --git a/packages/components/public-storybook/images/table-basic-version/table-header-column-action-resize.png b/packages/components/public-storybook/images/table-basic-version/table-header-column-action-resize.png new file mode 100644 index 0000000000..33f83fe226 Binary files /dev/null and b/packages/components/public-storybook/images/table-basic-version/table-header-column-action-resize.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 index 4f07ea9e07..96254747f9 100644 Binary files a/packages/components/public-storybook/images/table-basic-version/table-header-content-logic.png 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-template-items.png b/packages/components/public-storybook/images/table-basic-version/table-header-template-items.png index 487161fe11..3ef5d1ba95 100644 Binary files a/packages/components/public-storybook/images/table-basic-version/table-header-template-items.png 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 index 304cef4a51..5496db8ab1 100644 --- a/packages/components/src/components/table-basic-version/Usage.mdx +++ b/packages/components/src/components/table-basic-version/Usage.mdx @@ -12,6 +12,8 @@ import TableBasicVersionExampleDefault from '../../../public-storybook/images/ta 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'; +import TableBasicVersionHeaderColumnActionReorder from '../../../public-storybook/images/table-basic-version/table-header-column-action-reorder.png'; +import TableBasicVersionHeaderColumnActionResize from '../../../public-storybook/images/table-basic-version/table-header-column-action-resize.png'; @@ -67,10 +69,18 @@ To display a table generously with more white space, the DDS offers this default 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 +## Table Actions +### 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 +### Reorder +Users have different preferences and workflows. Allowing them to reorder columns lets them tailor the table layout to suit their specific needs. +Table Column Reorder + +### Resize +Resizing columns enables users to adjust the width of columns to fit the content they contain. This ensures that data is displayed more clearly and is easier to read, reducing the need for horizontal scrolling. +Table Column Resize *** 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)**