From 4c8df8c7744322a9b8662d70874152e403fd2879 Mon Sep 17 00:00:00 2001
From: Abhishek Verma <abhishek.verma@gojek.com>
Date: Wed, 29 May 2024 16:55:27 +0530
Subject: [PATCH 1/2] feat(table): add support for configurable column size

---
 .../apsara-ui/src/TableV2/Table.stories.tsx   |  1 +
 packages/apsara-ui/src/TableV2/Table.tsx      | 20 ++++++++++++++++---
 .../src/TableV2/VirtualisedTable.tsx          | 18 +++++++++++++++--
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/apsara-ui/src/TableV2/Table.stories.tsx b/packages/apsara-ui/src/TableV2/Table.stories.tsx
index cd6d2e7d..4bf54988 100644
--- a/packages/apsara-ui/src/TableV2/Table.stories.tsx
+++ b/packages/apsara-ui/src/TableV2/Table.stories.tsx
@@ -84,6 +84,7 @@ const columns = [
         title: "Age",
         dataIndex: "age",
         key: "age",
+        size: 20,
     },
     {
         title: "Address",
diff --git a/packages/apsara-ui/src/TableV2/Table.tsx b/packages/apsara-ui/src/TableV2/Table.tsx
index 48385d8a..2be01d13 100644
--- a/packages/apsara-ui/src/TableV2/Table.tsx
+++ b/packages/apsara-ui/src/TableV2/Table.tsx
@@ -60,6 +60,7 @@ function Table({
             columnHelper.accessor(item.key, {
                 cell: item.render ? item.render : (info) => info.getValue(),
                 header: item.title ?? item.dataIndex,
+                size: item.size,
             }),
         );
     });
@@ -145,14 +146,21 @@ function Table({
     };
 
     return (
-        <StyledTable className={`${alternate ? "alternate" : ""} ${alternateHover ? "alternate-hover" : ""}`} height={height}>
+        <StyledTable
+            className={`${alternate ? "alternate" : ""} ${alternateHover ? "alternate-hover" : ""}`}
+            height={height}
+        >
             <TableWrapper className="apsara-table-content">
                 <table>
                     <thead>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <tr key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => (
-                                    <th key={header.id} className="table-cell">
+                                    <th
+                                        key={header.id}
+                                        className="table-cell"
+                                        style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
+                                    >
                                         {header.isPlaceholder ? null : (
                                             <div
                                                 style={{
@@ -201,7 +209,13 @@ function Table({
                             {table.getRowModel().rows.map((row) => (
                                 <tr key={row.id} onClick={() => (rowClick ? rowClick(row) : "")}>
                                     {row.getVisibleCells().map((cell) => (
-                                        <td key={cell.id}>
+                                        <td
+                                            key={cell.id}
+                                            style={{
+                                                width:
+                                                    cell.column.getSize() !== 150 ? cell.column.getSize() : undefined,
+                                            }}
+                                        >
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </td>
                                     ))}
diff --git a/packages/apsara-ui/src/TableV2/VirtualisedTable.tsx b/packages/apsara-ui/src/TableV2/VirtualisedTable.tsx
index 106e72bb..9ac7e3a9 100644
--- a/packages/apsara-ui/src/TableV2/VirtualisedTable.tsx
+++ b/packages/apsara-ui/src/TableV2/VirtualisedTable.tsx
@@ -74,6 +74,7 @@ function VirtualisedTable({
             columnHelper.accessor(item.key, {
                 cell: item.render ? item.render : (info) => info.getValue(),
                 header: item.title ?? item.dataIndex,
+                size: item.size,
             }),
         );
     });
@@ -117,7 +118,11 @@ function VirtualisedTable({
                             {table.getHeaderGroups().map((headerGroup) => (
                                 <tr key={headerGroup.id}>
                                     {headerGroup.headers.map((header) => (
-                                        <th key={header.id} className="table-cell">
+                                        <th
+                                            key={header.id}
+                                            className="table-cell"
+                                            style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
+                                        >
                                             {header.isPlaceholder ? null : (
                                                 <div
                                                     style={{
@@ -178,7 +183,16 @@ function VirtualisedTable({
                                         <tr key={row.id} onClick={() => (rowClick ? rowClick(row) : "")}>
                                             {row.getVisibleCells().map((cell) => {
                                                 return (
-                                                    <td key={cell.id} className="virtual-table-cell">
+                                                    <td
+                                                        key={cell.id}
+                                                        className="virtual-table-cell"
+                                                        style={{
+                                                            width:
+                                                                cell.column.getSize() !== 150
+                                                                    ? cell.column.getSize()
+                                                                    : undefined,
+                                                        }}
+                                                    >
                                                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                                     </td>
                                                 );

From 7a1142c82ac24f4715a5dbf002dce203ecf77015 Mon Sep 17 00:00:00 2001
From: Abhishek Verma <abhishek.verma@gojek.com>
Date: Tue, 4 Jun 2024 09:59:56 +0530
Subject: [PATCH 2/2] chore: resolve comments

---
 packages/apsara-ui/src/TableV2/Table.stories.tsx | 2 +-
 packages/apsara-ui/src/TableV2/Table.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/apsara-ui/src/TableV2/Table.stories.tsx b/packages/apsara-ui/src/TableV2/Table.stories.tsx
index 4bf54988..d1285ded 100644
--- a/packages/apsara-ui/src/TableV2/Table.stories.tsx
+++ b/packages/apsara-ui/src/TableV2/Table.stories.tsx
@@ -84,7 +84,7 @@ const columns = [
         title: "Age",
         dataIndex: "age",
         key: "age",
-        size: 20,
+        width: 20,
     },
     {
         title: "Address",
diff --git a/packages/apsara-ui/src/TableV2/Table.tsx b/packages/apsara-ui/src/TableV2/Table.tsx
index 2be01d13..c3c09f94 100644
--- a/packages/apsara-ui/src/TableV2/Table.tsx
+++ b/packages/apsara-ui/src/TableV2/Table.tsx
@@ -60,7 +60,7 @@ function Table({
             columnHelper.accessor(item.key, {
                 cell: item.render ? item.render : (info) => info.getValue(),
                 header: item.title ?? item.dataIndex,
-                size: item.size,
+                size: item.width,
             }),
         );
     });