From 2a4f1b9824357ff70c14bb7c78831149ce82229e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 11 Oct 2022 15:15:07 +0200
Subject: [PATCH 1/2] feat: cell width

---
 src/lib/elements/table/cell.svelte     | 2 +-
 src/lib/elements/table/cellHead.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index 8d45be20a9..fa93798996 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-    width={width?.toString() ?? ''}
+    style={`--p-col-width:${width?.toString() ?? ''}`}
     class="table-col"
     class:u-overflow-visible={showOverflow}
     class:is-only-desktop={onlyDesktop}
diff --git a/src/lib/elements/table/cellHead.svelte b/src/lib/elements/table/cellHead.svelte
index 1ff8ade15c..7edb608f89 100644
--- a/src/lib/elements/table/cellHead.svelte
+++ b/src/lib/elements/table/cellHead.svelte
@@ -2,7 +2,7 @@
     export let width: number = null;
 </script>
 
-<div style={`width: ${width?.toString() + 'px' ?? ''}`} class="table-thead-col" role="columnheader">
+<div style={`--p-col-width:${width?.toString() ?? ''}`} class="table-thead-col" role="columnheader">
     <span class="eyebrow-heading-3">
         <slot />
     </span>

From ed6ea566178589766f91f891bf1642890e2c215e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 11 Oct 2022 15:26:01 +0200
Subject: [PATCH 2/2] feat: better implementation

---
 src/lib/elements/table/cell.svelte     | 2 +-
 src/lib/elements/table/cellHead.svelte | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index fa93798996..4c778d31ac 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-    style={`--p-col-width:${width?.toString() ?? ''}`}
+    style={width ? `--p-col-width:${width?.toString()}` : ''}
     class="table-col"
     class:u-overflow-visible={showOverflow}
     class:is-only-desktop={onlyDesktop}
diff --git a/src/lib/elements/table/cellHead.svelte b/src/lib/elements/table/cellHead.svelte
index 7edb608f89..7be4a06558 100644
--- a/src/lib/elements/table/cellHead.svelte
+++ b/src/lib/elements/table/cellHead.svelte
@@ -2,7 +2,10 @@
     export let width: number = null;
 </script>
 
-<div style={`--p-col-width:${width?.toString() ?? ''}`} class="table-thead-col" role="columnheader">
+<div
+    style={width ? `--p-col-width:${width?.toString()}` : ''}
+    class="table-thead-col"
+    role="columnheader">
     <span class="eyebrow-heading-3">
         <slot />
     </span>