fix: allow table columns to specify overflow

packages/renderer/src/lib/image/ImagesList.svelte

@@ -213,7 +213,7 @@ const columns: Column<ImageInfoUI>[] = [
   envColumn,
   ageColumn,
   sizeColumn,
-  new Column<ImageInfoUI>('Actions', { align: 'right', width: '150px', renderer: ImageColumnActions }),
+  new Column<ImageInfoUI>('Actions', { align: 'right', width: '150px', renderer: ImageColumnActions, overflow: true }),
 ];
 
 const row = new Row<ImageInfoUI>({ selectable: image => !image.inUse, disabledText: 'Image is used by a container' });

packages/renderer/src/lib/table/Table.spec.ts

@@ -209,3 +209,26 @@ test('Expect rowgroups', async () => {
   expect(dataRows).toBeDefined();
   expect(dataRows.length).toBe(3);
 });
+
+test('Expect overflow-hidden', async () => {
+  render(TestTable, {});
+
+  // get the 4 rows (first is header)
+  const rows = await screen.findAllByRole('row');
+  expect(rows).toBeDefined();
+  expect(rows.length).toBe(4);
+
+  // and each non-header row should have 6 cells (expander, checkbox, 4 cells).
+  // all 4 data cells should have overflow-hidden, except for age which has it
+  // disabled
+  for (let i = 1; i < 4; i++) {
+    const cells = await within(rows[i]).findAllByRole('cell');
+    expect(cells).toBeDefined();
+    expect(cells.length).toBe(6);
+
+    expect(cells[2]).toHaveClass('overflow-hidden');
+    expect(cells[3]).toHaveClass('overflow-hidden');
+    expect(cells[4]).not.toHaveClass('overflow-hidden');
+    expect(cells[5]).toHaveClass('overflow-hidden');
+  }
+});

packages/renderer/src/lib/table/Table.svelte

@@ -184,7 +184,7 @@ function setGridColumns() {
               ? 'justify-self-end'
               : column.info.align === 'center'
                 ? 'justify-self-center'
-                : 'justify-self-start'} self-center overflow-hidden max-w-full"
+                : 'justify-self-start'} self-center {column.info.overflow === true ? '' : 'overflow-hidden'} max-w-full"
             role="cell">
             {#if column.info.renderer}
               <svelte:component

packages/renderer/src/lib/table/TestTable.svelte

@@ -39,6 +39,7 @@ const ageCol: Column<Person, string> = new Column('Age', {
   renderer: SimpleColumn,
   comparator: (a, b) => a.age - b.age,
   initialOrder: 'descending',
+  overflow: true,
 });
 
 const hobbyCol: Column<Person, string> = new Column('Hobby', {

packages/renderer/src/lib/table/table.ts

@@ -68,6 +68,18 @@ export interface ColumnInformation<Type, RenderType = Type> {
    * Defaults to 'ascending'.
    */
   readonly initialOrder?: 'ascending' | 'descending';
+
+  /**
+   * By default, columns are limited to rendering within their
+   * own cell to stop long or extraneous content (e.g. long
+   * user-provided names) from interfering with other columns.
+   * More advanced column renderers that need to render outside
+   * of their cells (e.g. with popup menus or tooltips) can use
+   * this property to allow this behaviour.
+   *
+   * Defaults to 'false'.
+   */
+  readonly overflow?: boolean;
 }
 
 /**

packages/renderer/src/lib/volume/VolumesList.svelte

@@ -209,7 +209,7 @@ const columns: Column<VolumeInfoUI, VolumeInfoUI | string>[] = [
   envColumn,
   ageColumn,
   sizeColumn,
-  new Column<VolumeInfoUI>('Actions', { align: 'right', renderer: VolumeColumnActions }),
+  new Column<VolumeInfoUI>('Actions', { align: 'right', renderer: VolumeColumnActions, overflow: true }),
 ];
 
 const row = new Row<VolumeInfoUI>({