feat(table): add support for configurable column size (#45)

* feat(table): add support for configurable column size * chore: resolve comments
goto · Jun 4, 2024 · 2da148d · 2da148d
1 parent 790afc4
commit 2da148d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git 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",
+        width: 20,
     },
     {
         title: "Address",

diff --git 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.width,
             }),
         );
     });
@@ -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
@@ -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>
                                                 );