From f1ad7280b1e2070847687bd078881891e71c56ce Mon Sep 17 00:00:00 2001 From: Ddouglasz Date: Wed, 10 Jul 2024 19:31:01 +0200 Subject: [PATCH] feat(data table manager): fix data table manager scroll issue --- .changeset/quiet-eagles-enjoy.md | 6 ++++++ packages/components/data-table/src/data-table.styles.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/quiet-eagles-enjoy.md diff --git a/.changeset/quiet-eagles-enjoy.md b/.changeset/quiet-eagles-enjoy.md new file mode 100644 index 0000000000..72e4df2ed3 --- /dev/null +++ b/.changeset/quiet-eagles-enjoy.md @@ -0,0 +1,6 @@ +--- +'@commercetools-uikit/data-table': minor +--- + +When there is a horizontally long table that requires scrolling. +The user should be able to horizontally scroll only the table container without any other element of view scrolling along. diff --git a/packages/components/data-table/src/data-table.styles.tsx b/packages/components/data-table/src/data-table.styles.tsx index 5488f5af26..497a78c4e5 100644 --- a/packages/components/data-table/src/data-table.styles.tsx +++ b/packages/components/data-table/src/data-table.styles.tsx @@ -55,7 +55,7 @@ const TableContainer = styled.div` ${(props) => // this is needed in order to have a sticky header - props.maxHeight ? `overflow-x: auto;` : ''} + props.maxHeight ? `overflow-x: auto;` : 'overflow-x: scroll;'} ${(props) => props.maxWidth && !props.disableSelfContainment