diff --git a/pages/table/resizable-columns-rounding.page.tsx b/pages/table/resizable-columns-rounding.page.tsx index 33949263fd..375eac6991 100644 --- a/pages/table/resizable-columns-rounding.page.tsx +++ b/pages/table/resizable-columns-rounding.page.tsx @@ -39,11 +39,11 @@ const items: Array = [ ]; export default function () { - const [width, setWidth] = useState(649); + const [width, setWidth] = useState(609); return ( <>

Table in container with special size

-
diff --git a/pages/table/resizable-columns.page.tsx b/pages/table/resizable-columns.page.tsx index 39055d8bf8..26e2e94d8c 100644 --- a/pages/table/resizable-columns.page.tsx +++ b/pages/table/resizable-columns.page.tsx @@ -1,6 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useContext, useState } from 'react'; +import React, { useState } from 'react'; import range from 'lodash/range'; import zipObject from 'lodash/zipObject'; import Button from '~components/button'; @@ -13,7 +13,6 @@ import SpaceBetween from '~components/space-between'; import Table, { TableProps } from '~components/table'; import { NonCancelableCustomEvent } from '~components/interfaces'; import ScreenshotArea from '../utils/screenshot-area'; -import AppContext, { AppContextType } from '../app/app-context'; declare global { interface Window { @@ -91,22 +90,7 @@ const items: Item[] = [ })), ]; -type PageContext = React.Context< - AppContextType<{ - wrapLines: boolean; - stickyHeader: boolean; - resizableColumns: boolean; - fullPage: boolean; - }> ->; - export default function App() { - const { urlParams, setUrlParams } = useContext(AppContext as PageContext); - const wrapLines = urlParams.wrapLines ?? false; - const stickyHeader = urlParams.stickyHeader ?? false; - const resizableColumns = urlParams.resizableColumns ?? true; - const fullPage = urlParams.fullPage ?? false; - const [renderKey, setRenderKey] = useState(0); const [columns, setColumns] = useState(columnsConfig); const [columnDisplay, setColumnDisplay] = useState([ @@ -116,7 +100,9 @@ export default function App() { { id: 'state', visible: true }, { id: 'extra', visible: false }, ]); - + const [wrapLines, setWrapLines] = useState(false); + const [stickyHeader, setStickyHeader] = useState(false); + const [resizableColumns, setResizableColumns] = useState(true); const [sorting, setSorting] = useState>(); function handleWidthChange(event: NonCancelableCustomEvent) { @@ -141,26 +127,23 @@ export default function App() { Preferences}>
- setUrlParams({ wrapLines: event.detail.checked })}> + setWrapLines(event.detail.checked)}> Wrap lines setUrlParams({ stickyHeader: event.detail.checked })} + onChange={event => setStickyHeader(event.detail.checked)} > Sticky header setUrlParams({ resizableColumns: event.detail.checked })} + onChange={event => setResizableColumns(event.detail.checked)} > Resizable columns - setUrlParams({ fullPage: event.detail.checked })}> - Full page table -
{columnsConfig.map(column => ( @@ -199,7 +182,6 @@ export default function App() { sortingDescending={sorting?.isDescending} onSortingChange={event => setSorting(event.detail)} onColumnWidthsChange={handleWidthChange} - variant={fullPage ? 'full-page' : undefined} /> diff --git a/src/table/__integ__/resizable-columns.test.ts b/src/table/__integ__/resizable-columns.test.ts index 9d0e29f536..5a5adedab4 100644 --- a/src/table/__integ__/resizable-columns.test.ts +++ b/src/table/__integ__/resizable-columns.test.ts @@ -186,31 +186,6 @@ describe.each([true, false])('StickyHeader=%s', sticky => { }) ); - // The page width of 620px is an empirical value defined for the respective test page in VR - // so that the container width is slightly less than the table width (a sum of the column widths). - // In that case we expect the container to be scrollable and no auto-width set for the last column. - test( - 'should set explicit width for the last column when table width exceeds container width', - useBrowser({ width: 620, height: 1000 }, async browser => { - const page = new TablePage(browser); - await browser.url('#/light/table/resizable-columns?visualRefresh=true'); - await page.waitForVisible(tableWrapper.findBodyCell(2, 1).toSelector()); - - await expect(page.getColumnStyle(4)).resolves.toContain('width: 120px;'); - }) - ); - - test( - 'should set explicit width for the last column when full-page table width exceeds container width', - useBrowser({ width: 600, height: 1000 }, async browser => { - const page = new TablePage(browser); - await browser.url('#/light/table/resizable-columns?visualRefresh=true&fullPage=true'); - await page.waitForVisible(tableWrapper.findBodyCell(2, 1).toSelector()); - - await expect(page.getColumnStyle(4)).resolves.toContain('width: 120px;'); - }) - ); - test( 'should shrink the last column after revealing a column', setupStickyTest(async page => { diff --git a/src/table/internal.tsx b/src/table/internal.tsx index ea776d6584..56475340e5 100644 --- a/src/table/internal.tsx +++ b/src/table/internal.tsx @@ -119,8 +119,6 @@ const InternalTable = React.forwardRef( const [tableWidth, tableMeasureRef] = useContainerQuery(rect => rect.contentBoxWidth); const tableRefObject = useRef(null); - console.log(containerWidth, tableWidth); - const secondaryWrapperRef = React.useRef(null); const theadRef = useRef(null); const stickyHeaderRef = React.useRef(null); @@ -235,7 +233,7 @@ const InternalTable = React.forwardRef( tableRole, }; - const wrapperRef = useMergeRefs(wrapperRefObject, stickyState.refs.wrapper); + const wrapperRef = useMergeRefs(wrapperMeasureRef, wrapperRefObject, stickyState.refs.wrapper); const tableRef = useMergeRefs(tableMeasureRef, tableRefObject, stickyState.refs.table); const wrapperProps = getTableWrapperRoleProps({ @@ -334,7 +332,6 @@ const InternalTable = React.forwardRef( onScroll={handleScroll} {...wrapperProps} > -
{!!renderAriaLive && !!firstIndex && ( diff --git a/src/table/styles.scss b/src/table/styles.scss index 48e08c7bb4..7e48f04260 100644 --- a/src/table/styles.scss +++ b/src/table/styles.scss @@ -68,8 +68,7 @@ scrollbar-width: none; /* Hide scrollbar in Firefox */ &.variant-stacked, &.variant-container { - & > .table, - & > .wrapper-content-measure { + & > .table { padding-left: awsui.$space-table-horizontal; padding-right: awsui.$space-table-horizontal; } @@ -108,6 +107,8 @@ @supports (position: sticky) { position: sticky; left: 0; + // Offset table paddings to position centered when sticky + margin: 0 calc(-2 * #{awsui.$space-table-horizontal}); } /* stylelint-enable plugin/no-unsupported-browser-features */ } diff --git a/src/table/thead.tsx b/src/table/thead.tsx index dfb4b4e62f..04a0f73083 100644 --- a/src/table/thead.tsx +++ b/src/table/thead.tsx @@ -18,7 +18,7 @@ import { TableThElement } from './header-cell/th-element'; import { findUpUntil } from '@cloudscape-design/component-toolkit/dom'; export interface TheadProps { - containerWidth: null | number; + containerWidth: number | null; selectionType: TableProps.SelectionType | undefined; columnDefinitions: ReadonlyArray>; sortingColumn: TableProps.SortingColumn | undefined;