Merge pull request #29603 from backstage/canon-table-size

Canon - Add column sizing

.changeset/violet-memes-bet.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add support for column sizing in DataTable.

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}
       >

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>

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',
@@ -73,10 +75,12 @@ export const columns: ColumnDef<DataProps>[] = [
     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,
   },
 ];