Comments

src/components/HighTable/HighTable.module.css

@@ -115,19 +115,17 @@
     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);
   }
 
   /* table corner */
   /* 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 */

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<typeof HighTable> = {
   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<Selection>({
+      ranges: [],
+    })
+    return (
+      <HighTable
+        {...args}
+        selection={selection}
+        onSelectionChange={onSelectionChange}
+      />
+    )
+  },
+  args: {
+    data: emptyData,
+  },
+}
 export const Placeholders: Story = {
   args: {
     data: delayedData,

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)

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', () => {