diff --git a/src/components/HighTable/HighTable.module.css b/src/components/HighTable/HighTable.module.css index 873ef530..ee4f98dc 100644 --- a/src/components/HighTable/HighTable.module.css +++ b/src/components/HighTable/HighTable.module.css @@ -115,9 +115,8 @@ position: sticky; left: 0; user-select: none; - min-width: 48px; - max-width: none; - width: 48px; + min-width: var(--row-label-width); + max-width: var(--row-label-width); z-index: var(--header-z-index, auto); } @@ -125,9 +124,8 @@ /* TODO: find a better selector for the table corner */ thead td:first-child { position: sticky; - min-width: 48px; - max-width: none; - width: 48px; + min-width: var(--row-label-width); + max-width: var(--row-label-width); top: 0; left: 0; z-index: var(--header-corner-z-index, auto); @@ -178,6 +176,8 @@ bottom: 0; background: var(--mock-row-label-background, transparent); z-index: var(--header-background-z-index, auto); + min-width: var(--row-label-width); + max-width: var(--row-label-width); } } @@ -205,6 +205,8 @@ --focusable-background-color: #f1f1f3; --light-border-color: #c9c9c9; + --row-label-width: 36px; + .top-border { border-top: var(--top-border-height) solid var(--top-border-color); width: 100%; @@ -421,8 +423,6 @@ font-size: 0.68rem; padding: 0 2px; text-align: center; - min-width: 32px; - width: 32px; } /* highlight the selected rows */ tr[aria-selected="true"] { @@ -438,7 +438,6 @@ background-color: #f9f4ff; border-right: 1px solid #ccc; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); - min-width: 32px; } thead td:first-child[aria-disabled="false"] { background: #f9f4ff; /* redundant with td:first-child, but allows to force the background if it has been overridden with a logo */ diff --git a/src/components/HighTable/HighTable.stories.tsx b/src/components/HighTable/HighTable.stories.tsx index 43bf08c9..80785d8a 100644 --- a/src/components/HighTable/HighTable.stories.tsx +++ b/src/components/HighTable/HighTable.stories.tsx @@ -148,6 +148,12 @@ const manyColumnsData: DataFrame = { }), } +const emptyData: DataFrame = { + header: ['ID', 'Count', 'Double', 'Constant', 'Value1', 'Value2', 'Value3'], + numRows: 0, + rows: () => [], +} + const meta: Meta = { component: HighTable, } @@ -165,6 +171,28 @@ export const Unstyled: Story = { styled: false, }, } +export const Empty: Story = { + args: { + data: emptyData, + }, +} +export const EmptySelectable: Story = { + render: (args) => { + const [selection, onSelectionChange] = useState({ + ranges: [], + }) + return ( + + ) + }, + args: { + data: emptyData, + }, +} export const Placeholders: Story = { args: { data: delayedData, diff --git a/src/components/HighTable/HighTable.tsx b/src/components/HighTable/HighTable.tsx index f67c6a2f..b51ad5c1 100644 --- a/src/components/HighTable/HighTable.tsx +++ b/src/components/HighTable/HighTable.tsx @@ -430,7 +430,9 @@ export function HighTableInner({ // minimum left column width based on number of rows - it depends on CSS, so it's // only a bottom limit const rowHeaderWidth = useMemo(() => { - return Math.ceil(Math.log10(numRows + 1)) * 4 + 22 + if (numRows > 0) { + return Math.ceil(Math.log10(numRows + 1)) * 4 + 22 + } }, [numRows]) const cornerStyle = useMemo(() => { return cellStyle(rowHeaderWidth) diff --git a/test/helpers/selection.test.ts b/test/helpers/selection.test.ts index 66a9ddf4..c60f0e44 100644 --- a/test/helpers/selection.test.ts +++ b/test/helpers/selection.test.ts @@ -127,6 +127,9 @@ describe('areAllSelected', () => { test('should throw an error if the length is invalid', () => { expect(() => areAllSelected({ ranges: [], length: -1 })).toThrow('Invalid length') }) + test('should return false if the length is zero', () => { + expect(areAllSelected({ ranges: [], length: 0 })).toBe(false) + }) }) describe('toggleAll', () => {