fix: hide special first column if empty

schummar · Dec 19, 2024 · 002c168 · 002c168
1 parent c5f089c
commit 002c168
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/docs/stories/aIntro.stories.tsx b/docs/stories/aIntro.stories.tsx
@@ -145,3 +145,12 @@ export const WithDetails = {
     },
   } satisfies TableProps<Item>,
 };
+
+export const WithNoSpecialColumns = {
+  args: {
+    ...Primary.args,
+    enableSelection: false,
+    enableColumnSelection: false,
+    enableExport: false,
+  } satisfies TableProps<Item>,
+};
diff --git a/src/components/row.tsx b/src/components/row.tsx
@@ -99,7 +99,7 @@ export const Row = memo(function Row<T>({
       <div className={className} css={[defaultClasses.cellFill, css_]} ref={divRef} />
 
       <div className={className} css={[defaultClasses.cell, defaultClasses.firstCell, css_]}>
-        <div css={{ width: indent * 20 }} />
+        {indent > 0 && <div css={{ width: indent * 20 }} />}
 
         {enableSelection && <SelectComponent itemId={itemId} />}
 

diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -138,8 +138,12 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
 
             {enableExport && <Export />}
 
-            <div css={{ flex: 1 }} />
-            <ResizeHandleView />
+            {(enableSelection || enableColumnSelection || enableExport) && (
+              <>
+                <div css={{ flex: 1 }} />
+                <ResizeHandleView />
+              </>
+            )}
           </div>
 
           <ColumnHeaderContext.Provider>

diff --git a/src/theme/defaultTheme/defaultClasses.ts b/src/theme/defaultTheme/defaultClasses.ts
@@ -6,13 +6,16 @@ export const gray = '#bdbdbd';
 export const darkGray = '#777';
 
 const cell = css({
-  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,
   display: 'flex',
   alignItems: 'center',
   borderBottom: `1px solid #dfe2e9`,
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   background: 'white',
+
+  '&:not(:empty)': {
+    padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,
+  },
 });
 
 export const defaultClasses = {
@@ -28,8 +31,11 @@ export const defaultClasses = {
   }),
 
   headerCell: css(cell, {
-    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,
     borderBottom: `1px solid #c9cfda`,
+
+    '&:not(:empty)': {
+      padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,
+    },
   }),
 
   footerCell: css(cell, {