feat(ui): export TableBodySkeleton as public API (#33731)

* feat(ui): export TableBodySkeleton as public API

Export the TableBodySkeleton component so it can be used independently
of the built-in Table component. Relax the column type constraint from
ColumnConfig<T> to { id: string } for compatibility with custom column
types.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* fix(ui): use direct index instead of parsing skeleton item ID

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* Update .changeset/export-table-body-skeleton.md

Co-authored-by: Johan Persson <johanopersson@gmail.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* docs(ui): add TableBodySkeleton to table primitives documentation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

---------

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Johan Persson <johanopersson@gmail.com>

packages/ui/report.api.md

@@ -2700,6 +2700,13 @@ export interface TableBodyProps<T extends object>
   extends TableBodyOwnProps,
     Omit<TableBodyProps_2<T>, keyof TableBodyOwnProps> {}
 
+// @public
+export function TableBodySkeleton<
+  T extends {
+    id: string;
+  },
+>(input: { columns: readonly T[] }): JSX_2.Element;
+
 // @public
 export const TableDefinition: {
   readonly styles: {

packages/ui/src/components/Table/components/TableBodySkeleton.tsx

@@ -18,25 +18,33 @@ import { TableBody } from './TableBody';
 import { Row } from './Row';
 import { Cell } from './Cell';
 import { Skeleton } from '../../Skeleton';
-import type { ColumnConfig, TableItem } from '../types';
 
 const SKELETON_ROW_COUNT = 5;
 const SKELETON_WIDTHS = ['75%', '50%', '60%', '45%', '70%'];
 
 const skeletonItems = Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => ({
   id: `skeleton-${i}`,
+  index: i,
 }));
 
-/** @internal */
-export function TableBodySkeleton<T extends TableItem>({
+/**
+ * A table body that renders animated skeleton rows as a loading placeholder.
+ *
+ * @remarks
+ * Accepts any column array whose items have an `id` property, making it
+ * compatible with both `ColumnConfig` and custom column types.
+ *
+ * @public
+ */
+export function TableBodySkeleton<T extends { id: string }>({
   columns,
 }: {
-  columns: readonly ColumnConfig<T>[];
+  columns: readonly T[];
 }) {
   return (
     <TableBody items={skeletonItems} dependencies={[columns]}>
       {item => {
-        const rowIndex = Number(item.id.split('-')[1]);
+        const rowIndex = item.index;
         return (
           <Row id={item.id} columns={columns}>
             {column => (

packages/ui/src/components/Table/index.ts

@@ -23,6 +23,7 @@ export { Row } from './components/Row';
 export { Cell } from './components/Cell';
 export { CellText } from './components/CellText';
 export { CellProfile } from './components/CellProfile';
+export { TableBodySkeleton } from './components/TableBodySkeleton';
 export { useTable } from './hooks/useTable';
 
 export type {