From 5ee4fc24ab68e280d025b198e03271d5ae972eb3 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 15 Apr 2025 10:09:19 +0200
Subject: [PATCH] Add column sizing

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/violet-memes-bet.md                 |  5 +++++
 .../Pagination/DataTablePagination.tsx         |  1 +
 .../DataTable/Table/DataTableTable.tsx         | 18 +++++++++++++++---
 .../components/DataTable/mocked-columns.tsx    |  5 +++++
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/violet-memes-bet.md

diff --git a/.changeset/violet-memes-bet.md b/.changeset/violet-memes-bet.md
new file mode 100644
index 0000000000..440c762ffa
--- /dev/null
+++ b/.changeset/violet-memes-bet.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add support for column sizing in DataTable.
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
index c1c73ee13c..eabea109fa 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
@@ -36,6 +36,7 @@ const DataTablePagination = forwardRef(
     return (
       <div
         ref={ref}
+        style={{ minWidth: table?.getTotalSize() }}
         className={clsx('canon-DataTablePagination', className)}
         {...rest}
       >
diff --git a/packages/canon/src/components/DataTable/Table/DataTableTable.tsx b/packages/canon/src/components/DataTable/Table/DataTableTable.tsx
index 6b0fafa67d..954cf9f703 100644
--- a/packages/canon/src/components/DataTable/Table/DataTableTable.tsx
+++ b/packages/canon/src/components/DataTable/Table/DataTableTable.tsx
@@ -28,13 +28,21 @@ const DataTableTable = forwardRef(
     const { table } = useDataTable();
 
     return (
-      <Table.Root ref={ref} className={clsx(className)} {...rest}>
+      <Table.Root
+        ref={ref}
+        style={{ minWidth: table.getTotalSize() }}
+        className={clsx(className)}
+        {...rest}
+      >
         <Table.Header>
           {table.getHeaderGroups().map(headerGroup => (
             <Table.Row key={headerGroup.id}>
               {headerGroup.headers.map(header => {
                 return (
-                  <Table.Head key={header.id}>
+                  <Table.Head
+                    key={header.id}
+                    style={{ width: header.getSize() }}
+                  >
                     {header.isPlaceholder
                       ? null
                       : flexRender(
@@ -55,7 +63,10 @@ const DataTableTable = forwardRef(
                 data-state={row.getIsSelected() && 'selected'}
               >
                 {row.getVisibleCells().map(cell => (
-                  <Table.Cell key={cell.id}>
+                  <Table.Cell
+                    key={cell.id}
+                    style={{ width: cell.column.getSize() }}
+                  >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </Table.Cell>
                 ))}
@@ -66,6 +77,7 @@ const DataTableTable = forwardRef(
               <Table.Cell
                 colSpan={table.getAllColumns().length}
                 className="h-24 text-center"
+                style={{ width: table.getTotalSize() }}
               >
                 No results.
               </Table.Cell>
diff --git a/packages/canon/src/components/DataTable/mocked-columns.tsx b/packages/canon/src/components/DataTable/mocked-columns.tsx
index 9f2ce72378..e2d898769f 100644
--- a/packages/canon/src/components/DataTable/mocked-columns.tsx
+++ b/packages/canon/src/components/DataTable/mocked-columns.tsx
@@ -42,6 +42,7 @@ export const columns: ColumnDef<DataProps>[] = [
     ),
     enableSorting: false,
     enableHiding: false,
+    size: 50,
   },
   {
     accessorKey: 'name',
@@ -53,6 +54,7 @@ export const columns: ColumnDef<DataProps>[] = [
         href="/"
       />
     ),
+    size: 450,
   },
   {
     accessorKey: 'owner',
@@ -60,15 +62,18 @@ export const columns: ColumnDef<DataProps>[] = [
     cell: ({ row }) => (
       <DataTable.TableCellText title={row.getValue('owner')} />
     ),
+    size: 200,
   },
   {
     accessorKey: 'type',
     header: 'Type',
     cell: ({ row }) => <DataTable.TableCellText title={row.getValue('type')} />,
+    size: 150,
   },
   {
     accessorKey: 'tags',
     header: 'Tags',
     cell: ({ row }) => <DataTable.TableCellText title={row.getValue('tags')} />,
+    size: 150,
   },
 ];