fix: Fixes table column min width when only width is set

cloudscape-design · Oct 21, 2024 · b5d421b · b5d421b
1 parent 01aecc9
commit b5d421b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/pages/table/sticky-scrollbar-in-container.page.tsx b/pages/table/sticky-scrollbar-in-container.page.tsx
@@ -4,12 +4,12 @@ import React, { useContext } from 'react';
 
 import { useCollection } from '@cloudscape-design/collection-hooks';
 
-import { Checkbox, Container, Header, Pagination, SpaceBetween, Table } from '~components';
+import { Button, Checkbox, Container, Header, Pagination, SpaceBetween, Table } from '~components';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import ScreenshotArea from '../utils/screenshot-area';
 import { generateItems } from './generate-data';
-import { columnsConfig, paginationLabels } from './shared-configs';
+import { columnsConfig as sharedColumnsConfig, paginationLabels } from './shared-configs';
 
 type PageContext = React.Context<
  AppContextType<{
@@ -20,6 +20,15 @@ type PageContext = React.Context<
 
 const allItems = generateItems();
 const PAGE_SIZE = 50;
+const columnsConfig = [
+ ...sharedColumnsConfig,
+ {
+ id: 'actions',
+ header: 'Fav',
+ cell: () => <Button variant="icon" iconName="star" ariaLabel="make favorite" />,
+ width: 70,
+ },
+];
 
 export default function App() {
  const {
@@ -44,6 +53,8 @@ export default function App() {
  footer={hasFooter ? <Pagination {...paginationProps} ariaLabels={paginationLabels} /> : undefined}
  columnDefinitions={columnsConfig}
  items={items}
+ stickyColumns={{ last: 1 }}
+ resizableColumns={true}
  />
  </Container>
  </div>

diff --git a/src/table/__tests__/resizable-columns.test.tsx b/src/table/__tests__/resizable-columns.test.tsx
@@ -212,6 +212,20 @@ test('should not allow to resize column below 120px if min width is not defined'
  expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '120px' });
 });
 
+test('takes width as min width if it is less than 120px and min width is not set', () => {
+ const props: TableProps<Item> = {
+ ...defaultProps,
+ columnDefinitions: [{ header: 'id', cell: item => item.id, width: 100 }, defaultProps.columnDefinitions[1]],
+ };
+ const { wrapper } = renderTable(<Table {...props} />);
+ expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '100px' });
+
+ fireMousedown(wrapper.findColumnResizer(1)!);
+ fireMouseMove(100);
+ fireMouseup(100);
+ expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '100px' });
+});
+
 test('should follow along each mouse move event', () => {
  const { wrapper } = renderTable(<Table {...defaultProps} />);
  expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '150px' });

diff --git a/src/table/use-column-widths.tsx b/src/table/use-column-widths.tsx
@@ -44,7 +44,13 @@ function updateWidths(
  columnId: PropertyKey
 ) {
  const column = visibleColumns.find(column => column.id === columnId);
- const minWidth = typeof column?.minWidth === 'number' ? column.minWidth : DEFAULT_COLUMN_WIDTH;
+ let minWidth = DEFAULT_COLUMN_WIDTH;
+ if (typeof column?.width === 'number' && column.width < DEFAULT_COLUMN_WIDTH) {
+ minWidth = column?.width;
+ }
+ if (typeof column?.minWidth === 'number') {
+ minWidth = column?.minWidth;
+ }
  newWidth = Math.max(newWidth, minWidth);
  if (oldWidths.get(columnId) === newWidth) {
  return oldWidths;