Migrate Table component from useStyles to useDefinition

Split monolithic TableDefinition into 8 per-sub-component definitions
(TableRoot, TableHeader, TableBody, Row, Column, Cell, CellText,
CellProfile) following the established defineComponent pattern.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/report.api.md

@@ -35,15 +35,15 @@ import type { RadioProps as RadioProps_2 } from 'react-aria-components';
 import type { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
-import { RowProps } from 'react-aria-components';
+import { RowProps as RowProps_2 } from 'react-aria-components';
 import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components';
 import type { SelectProps as SelectProps_2 } from 'react-aria-components';
 import type { SeparatorProps } from 'react-aria-components';
 import type { SortDescriptor as SortDescriptor_2 } from 'react-stately';
 import type { SubmenuTriggerProps as SubmenuTriggerProps_2 } from 'react-aria-components';
 import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
-import { TableBodyProps } from 'react-aria-components';
-import { TableHeaderProps } from 'react-aria-components';
+import { TableBodyProps as TableBodyProps_2 } from 'react-aria-components';
+import { TableHeaderProps as TableHeaderProps_2 } from 'react-aria-components';
 import { TableProps as TableProps_2 } from 'react-aria-components';
 import type { TabListProps as TabListProps_2 } from 'react-aria-components';
 import type { TabPanelProps as TabPanelProps_2 } from 'react-aria-components';
@@ -688,25 +688,33 @@ export const Cell: {
   displayName: string;
 };
 
+// @public (undocumented)
+export type CellOwnProps = {
+  className?: string;
+};
+
 // @public (undocumented)
 export const CellProfile: (props: CellProfileProps) => JSX_2.Element;
 
 // @public (undocumented)
-export interface CellProfileProps extends CellProps_2 {
-  // (undocumented)
-  color?: TextColors;
-  // (undocumented)
-  description?: string;
-  // (undocumented)
-  href?: string;
-  // (undocumented)
-  name?: string;
-  // (undocumented)
+export type CellProfileOwnProps = {
   src?: string;
-}
+  name?: string;
+  href?: string;
+  description?: string;
+  color?: TextColors;
+  className?: string;
+};
 
 // @public (undocumented)
-export interface CellProps extends CellProps_2 {}
+export interface CellProfileProps
+  extends CellProfileOwnProps,
+    Omit<CellProps_2, keyof CellProfileOwnProps> {}
+
+// @public (undocumented)
+export interface CellProps
+  extends CellOwnProps,
+    Omit<CellProps_2, keyof CellOwnProps> {}
 
 // @public (undocumented)
 export const CellText: {
@@ -715,18 +723,19 @@ export const CellText: {
 };
 
 // @public (undocumented)
-export interface CellTextProps extends CellProps_2 {
-  // (undocumented)
-  color?: TextColors;
-  // (undocumented)
-  description?: string;
-  // (undocumented)
-  href?: string;
-  // (undocumented)
-  leadingIcon?: React.ReactNode | null;
-  // (undocumented)
+export type CellTextOwnProps = {
   title: string;
-}
+  description?: string;
+  color?: TextColors;
+  leadingIcon?: React.ReactNode | null;
+  href?: string;
+  className?: string;
+};
+
+// @public (undocumented)
+export interface CellTextProps
+  extends CellTextOwnProps,
+    Omit<CellProps_2, keyof CellTextOwnProps> {}
 
 // @public (undocumented)
 export const Checkbox: ForwardRefExoticComponent<
@@ -800,10 +809,15 @@ export interface ColumnConfig<T extends TableItem> {
 }
 
 // @public (undocumented)
-export interface ColumnProps extends Omit<ColumnProps_2, 'children'> {
-  // (undocumented)
+export type ColumnOwnProps = {
   children?: React.ReactNode;
-}
+  className?: string;
+};
+
+// @public (undocumented)
+export interface ColumnProps
+  extends ColumnOwnProps,
+    Omit<ColumnProps_2, keyof ColumnOwnProps> {}
 
 // @public (undocumented)
 export type Columns =
@@ -1924,6 +1938,18 @@ export interface RowConfig<T extends TableItem> {
   onClick?: (item: T) => void;
 }
 
+// @public (undocumented)
+export type RowOwnProps<T = object> = {
+  columns?: RowProps_2<T>['columns'];
+  children?: RowProps_2<T>['children'];
+  href?: string;
+};
+
+// @public (undocumented)
+export interface RowProps<T>
+  extends RowOwnProps<T>,
+    Omit<RowProps_2<T>, keyof RowOwnProps> {}
+
 // @public (undocumented)
 export type RowRenderFn<T extends TableItem> = (params: {
   item: T;
@@ -2169,31 +2195,26 @@ export const TableBody: <T extends object>(
   props: TableBodyProps<T>,
 ) => JSX_2.Element;
 
+// @public (undocumented)
+export type TableBodyOwnProps = {};
+
+// @public (undocumented)
+export interface TableBodyProps<T extends object>
+  extends TableBodyOwnProps,
+    Omit<TableBodyProps_2<T>, keyof TableBodyOwnProps> {}
+
 // @public
 export const TableDefinition: {
-  readonly classNames: {
-    readonly table: 'bui-Table';
-    readonly header: 'bui-TableHeader';
-    readonly body: 'bui-TableBody';
-    readonly row: 'bui-TableRow';
-    readonly head: 'bui-TableHead';
-    readonly headContent: 'bui-TableHeadContent';
-    readonly headSortButton: 'bui-TableHeadSortButton';
-    readonly caption: 'bui-TableCaption';
-    readonly cell: 'bui-TableCell';
-    readonly cellContentWrapper: 'bui-TableCellContentWrapper';
-    readonly cellContent: 'bui-TableCellContent';
-    readonly cellIcon: 'bui-TableCellIcon';
-    readonly cellProfileAvatar: 'bui-TableCellProfileAvatar';
-    readonly cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage';
-    readonly cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback';
-    readonly cellProfileName: 'bui-TableCellProfileName';
-    readonly cellProfileLink: 'bui-TableCellProfileLink';
-    readonly headSelection: 'bui-TableHeadSelection';
-    readonly cellSelection: 'bui-TableCellSelection';
+  readonly styles: {
+    readonly [key: string]: string;
   };
-  readonly dataAttributes: {
-    readonly stale: readonly [true, false];
+  readonly classNames: {
+    readonly root: 'bui-Table';
+  };
+  readonly propDefs: {
+    readonly stale: {
+      readonly dataAttribute: true;
+    };
   };
 };
 
@@ -2202,6 +2223,17 @@ export const TableHeader: <T extends object>(
   props: TableHeaderProps<T>,
 ) => JSX_2.Element;
 
+// @public (undocumented)
+export type TableHeaderOwnProps<T = object> = {
+  columns?: TableHeaderProps_2<T>['columns'];
+  children?: TableHeaderProps_2<T>['children'];
+};
+
+// @public (undocumented)
+export interface TableHeaderProps<T>
+  extends TableHeaderOwnProps<T>,
+    Omit<TableHeaderProps_2<T>, keyof TableHeaderOwnProps> {}
+
 // @public (undocumented)
 export interface TableItem {
   // (undocumented)
@@ -2298,10 +2330,14 @@ export interface TableProps<T extends TableItem> {
 export const TableRoot: (props: TableRootProps) => JSX_2.Element;
 
 // @public (undocumented)
-export interface TableRootProps extends TableProps_2 {
-  // (undocumented)
+export type TableRootOwnProps = {
   stale?: boolean;
-}
+};
+
+// @public (undocumented)
+export interface TableRootProps
+  extends TableRootOwnProps,
+    Omit<TableProps_2, keyof TableRootOwnProps> {}
 
 // @public (undocumented)
 export interface TableSelection {

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

@@ -14,29 +14,16 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { Cell as ReactAriaCell } from 'react-aria-components';
 import type { CellProps } from '../types';
-import { useStyles } from '../../../hooks/useStyles';
-import { TableDefinition } from '../definition';
-import styles from '../Table.module.css';
+import { useDefinition } from '../../../hooks/useDefinition';
+import { CellDefinition } from '../definition';
 
 /** @public */
 const Cell = (props: CellProps) => {
-  const { classNames, cleanedProps } = useStyles(TableDefinition, {
-    color: 'primary' as const,
-    ...props,
-  });
-  const { className, children, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(CellDefinition, props);
 
-  return (
-    <ReactAriaCell
-      className={clsx(classNames.cell, styles[classNames.cell], className)}
-      {...rest}
-    >
-      {children}
-    </ReactAriaCell>
-  );
+  return <ReactAriaCell className={ownProps.classes.root} {...restProps} />;
 };
 
 Cell.displayName = 'Cell';

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

@@ -14,45 +14,26 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { CellProfileProps } from '../types';
 import { Text } from '../../Text/Text';
 import { Link } from '../../Link/Link';
 import { Avatar } from '../../Avatar';
-import { useStyles } from '../../../hooks/useStyles';
-import { TableDefinition } from '../definition';
+import { useDefinition } from '../../../hooks/useDefinition';
+import { CellProfileDefinition } from '../definition';
 import { Cell as ReactAriaCell } from 'react-aria-components';
-import styles from '../Table.module.css';
 
 /** @public */
 export const CellProfile = (props: CellProfileProps) => {
-  const { classNames, cleanedProps } = useStyles(TableDefinition, {
-    color: 'primary' as const,
-    ...props,
-  });
-  const { className, src, name, href, description, color, ...rest } =
-    cleanedProps;
+  const { ownProps, restProps } = useDefinition(CellProfileDefinition, props);
+  const { classes, src, name, href, description, color } = ownProps;
 
   return (
-    <ReactAriaCell
-      className={clsx(classNames.cell, styles[classNames.cell], className)}
-      {...rest}
-    >
-      <div
-        className={clsx(
-          classNames.cellContentWrapper,
-          styles[classNames.cellContentWrapper],
-        )}
-      >
+    <ReactAriaCell className={classes.root} {...restProps}>
+      <div className={classes.cellContentWrapper}>
         {src && name && (
           <Avatar src={src} name={name} size="x-small" purpose="decoration" />
         )}
-        <div
-          className={clsx(
-            classNames.cellContent,
-            styles[classNames.cellContent],
-          )}
-        >
+        <div className={classes.cellContent}>
           {name && href ? (
             <Link href={href}>{name}</Link>
           ) : (

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

@@ -14,48 +14,23 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { Text } from '../../Text';
 import { Link } from '../../Link';
 import { Cell as ReactAriaCell } from 'react-aria-components';
 import type { CellTextProps } from '../types';
-import { useStyles } from '../../../hooks/useStyles';
-import { TableDefinition } from '../definition';
-import styles from '../Table.module.css';
+import { useDefinition } from '../../../hooks/useDefinition';
+import { CellTextDefinition } from '../definition';
 
 /** @public */
 const CellText = (props: CellTextProps) => {
-  const { classNames, cleanedProps } = useStyles(TableDefinition, {
-    color: 'primary' as const,
-    ...props,
-  });
-  const { className, title, description, color, leadingIcon, href, ...rest } =
-    cleanedProps;
+  const { ownProps, restProps } = useDefinition(CellTextDefinition, props);
+  const { classes, title, description, color, leadingIcon, href } = ownProps;
 
   return (
-    <ReactAriaCell
-      className={clsx(classNames.cell, styles[classNames.cell], className)}
-      {...rest}
-    >
-      <div
-        className={clsx(
-          classNames.cellContentWrapper,
-          styles[classNames.cellContentWrapper],
-        )}
-      >
-        {leadingIcon && (
-          <div
-            className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}
-          >
-            {leadingIcon}
-          </div>
-        )}
-        <div
-          className={clsx(
-            classNames.cellContent,
-            styles[classNames.cellContent],
-          )}
-        >
+    <ReactAriaCell className={classes.root} {...restProps}>
+      <div className={classes.cellContentWrapper}>
+        {leadingIcon && <div className={classes.cellIcon}>{leadingIcon}</div>}
+        <div className={classes.cellContent}>
           {href ? (
             <Link
               href={href}

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

@@ -15,39 +15,23 @@
  */
 
 import { Column as ReactAriaColumn } from 'react-aria-components';
-import { useStyles } from '../../../hooks/useStyles';
-import { TableDefinition } from '../definition';
-import styles from '../Table.module.css';
-import clsx from 'clsx';
+import { useDefinition } from '../../../hooks/useDefinition';
+import { ColumnDefinition } from '../definition';
 import { ColumnProps } from '../types';
 import { RiArrowUpLine } from '@remixicon/react';
 
 /** @public */
 export const Column = (props: ColumnProps) => {
-  const { classNames, cleanedProps } = useStyles(TableDefinition, props);
-  const { className, children, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(ColumnDefinition, props);
+  const { classes, children } = ownProps;
 
   return (
-    <ReactAriaColumn
-      className={clsx(classNames.head, styles[classNames.head], className)}
-      {...rest}
-    >
+    <ReactAriaColumn className={classes.root} {...restProps}>
       {({ allowsSorting }) => (
-        <div
-          className={clsx(
-            classNames.headContent,
-            styles[classNames.headContent],
-          )}
-        >
+        <div className={classes.headContent}>
           {children}
           {allowsSorting && (
-            <span
-              aria-hidden="true"
-              className={clsx(
-                classNames.headSortButton,
-                styles[classNames.headSortButton],
-              )}
-            >
+            <span aria-hidden="true" className={classes.headSortButton}>
               <RiArrowUpLine size={16} />
             </span>
           )}

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

@@ -16,24 +16,23 @@
 
 import {
   Row as ReactAriaRow,
-  RowProps,
   useTableOptions,
   Cell as ReactAriaCell,
   Collection,
 } from 'react-aria-components';
 import { Checkbox } from '../../Checkbox';
-import { useStyles } from '../../../hooks/useStyles';
-import { TableDefinition } from '../definition';
+import { useDefinition } from '../../../hooks/useDefinition';
+import { RowDefinition } from '../definition';
+import type { RowProps } from '../types';
 import { isExternalLink } from '../../../utils/isExternalLink';
 import { InternalLinkProvider } from '../../InternalLinkProvider';
-import styles from '../Table.module.css';
 import clsx from 'clsx';
 import { Flex } from '../../Flex';
 
 /** @public */
 export function Row<T extends object>(props: RowProps<T>) {
-  const { classNames, cleanedProps } = useStyles(TableDefinition, props);
-  const { id, columns, children, href, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(RowDefinition, props);
+  const { classes, columns, children, href } = ownProps;
   const hasInternalHref = !!href && !isExternalLink(href);
 
   let { selectionBehavior, selectionMode } = useTableOptions();
@@ -41,13 +40,7 @@ export function Row<T extends object>(props: RowProps<T>) {
   const content = (
     <>
       {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (
-        <ReactAriaCell
-          className={clsx(
-            classNames.cellSelection,
-            styles[classNames.cell],
-            styles[classNames.cellSelection],
-          )}
-        >
+        <ReactAriaCell className={clsx(classes.cell, classes.cellSelection)}>
           <Flex justify="center" align="center">
             <Checkbox slot="selection">
               <></>
@@ -62,11 +55,10 @@ export function Row<T extends object>(props: RowProps<T>) {
   return (
     <InternalLinkProvider href={href}>
       <ReactAriaRow
-        id={id}
         href={href}
-        className={clsx(classNames.row, styles[classNames.row])}
+        className={classes.root}
         data-react-aria-pressable={hasInternalHref ? 'true' : undefined}
-        {...rest}
+        {...restProps}
       >
         {content}
       </ReactAriaRow>

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

@@ -14,23 +14,16 @@
  * limitations under the License.
  */
 
-import {
-  TableBody as ReactAriaTableBody,
-  type TableBodyProps,
-} from 'react-aria-components';
-import { useStyles } from '../../../hooks/useStyles';
-import { TableDefinition } from '../definition';
-import styles from '../Table.module.css';
-import clsx from 'clsx';
+import { TableBody as ReactAriaTableBody } from 'react-aria-components';
+import { useDefinition } from '../../../hooks/useDefinition';
+import { TableBodyDefinition } from '../definition';
+import type { TableBodyProps } from '../types';
 
 /** @public */
 export const TableBody = <T extends object>(props: TableBodyProps<T>) => {
-  const { classNames, cleanedProps } = useStyles(TableDefinition, props);
+  const { ownProps, restProps } = useDefinition(TableBodyDefinition, props);
 
   return (
-    <ReactAriaTableBody
-      className={clsx(classNames.body, styles[classNames.body])}
-      {...cleanedProps}
-    />
+    <ReactAriaTableBody className={ownProps.classes.root} {...restProps} />
   );
 };

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

@@ -16,39 +16,31 @@
 
 import {
   TableHeader as ReactAriaTableHeader,
-  type TableHeaderProps,
   Collection,
   useTableOptions,
 } from 'react-aria-components';
 import { Checkbox } from '../../Checkbox';
 import { Column } from './Column';
-import { useStyles } from '../../../hooks/useStyles';
-import { TableDefinition } from '../definition';
-import styles from '../Table.module.css';
-import clsx from 'clsx';
+import { useDefinition } from '../../../hooks/useDefinition';
+import { TableHeaderDefinition } from '../definition';
+import type { TableHeaderProps } from '../types';
 import { Flex } from '../../Flex';
 
 /** @public */
 export const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {
   let { selectionBehavior, selectionMode } = useTableOptions();
 
-  const { classNames, cleanedProps } = useStyles(TableDefinition, props);
-  const { columns, children, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(TableHeaderDefinition, props);
+  const { classes, columns, children } = ownProps;
 
   return (
-    <ReactAriaTableHeader
-      className={clsx(classNames.header, styles[classNames.header])}
-      {...rest}
-    >
+    <ReactAriaTableHeader className={classes.root} {...restProps}>
       {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (
         <Column
           width={40}
           minWidth={40}
           maxWidth={40}
-          className={clsx(
-            classNames.headSelection,
-            styles[classNames.headSelection],
-          )}
+          className={classes.headSelection}
         >
           <Flex justify="center" align="center">
             <Checkbox slot="selection">

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

@@ -14,27 +14,25 @@
  * limitations under the License.
  */
 
-import { useStyles } from '../../../hooks/useStyles';
+import { useDefinition } from '../../../hooks/useDefinition';
 import { TableDefinition } from '../definition';
 import { Table as ReactAriaTable } from 'react-aria-components';
-import styles from '../Table.module.css';
-import clsx from 'clsx';
 import { TableRootProps } from '../types';
 
 /** @public */
 export const TableRoot = (props: TableRootProps) => {
-  const { classNames, dataAttributes, cleanedProps } = useStyles(
+  const { ownProps, restProps, dataAttributes } = useDefinition(
     TableDefinition,
     props,
   );
 
   return (
     <ReactAriaTable
-      className={clsx(classNames.table, styles[classNames.table])}
+      className={ownProps.classes.root}
       aria-label="Data table"
-      aria-busy={props.stale}
+      aria-busy={ownProps.stale}
       {...dataAttributes}
-      {...cleanedProps}
+      {...restProps}
     />
   );
 };

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

@@ -14,35 +14,149 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type {
+  TableRootOwnProps,
+  TableHeaderOwnProps,
+  TableBodyOwnProps,
+  RowOwnProps,
+  ColumnOwnProps,
+  CellOwnProps,
+  CellTextOwnProps,
+  CellProfileOwnProps,
+} from './types';
+import styles from './Table.module.css';
 
 /**
  * Component definition for Table
  * @public
  */
-export const TableDefinition = {
+export const TableDefinition = defineComponent<TableRootOwnProps>()({
+  styles,
   classNames: {
-    table: 'bui-Table',
-    header: 'bui-TableHeader',
-    body: 'bui-TableBody',
-    row: 'bui-TableRow',
-    head: 'bui-TableHead',
+    root: 'bui-Table',
+  },
+  propDefs: {
+    stale: { dataAttribute: true },
+  },
+});
+
+/**
+ * Component definition for TableHeader
+ * @internal
+ */
+export const TableHeaderDefinition = defineComponent<TableHeaderOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-TableHeader',
+    headSelection: 'bui-TableHeadSelection',
+  },
+  propDefs: {
+    columns: {},
+    children: {},
+  },
+});
+
+/**
+ * Component definition for TableBody
+ * @internal
+ */
+export const TableBodyDefinition = defineComponent<TableBodyOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-TableBody',
+  },
+  propDefs: {},
+});
+
+/**
+ * Component definition for Row
+ * @internal
+ */
+export const RowDefinition = defineComponent<RowOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-TableRow',
+    cell: 'bui-TableCell',
+    cellSelection: 'bui-TableCellSelection',
+  },
+  propDefs: {
+    columns: {},
+    children: {},
+    href: {},
+  },
+});
+
+/**
+ * Component definition for Column
+ * @internal
+ */
+export const ColumnDefinition = defineComponent<ColumnOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-TableHead',
     headContent: 'bui-TableHeadContent',
     headSortButton: 'bui-TableHeadSortButton',
-    caption: 'bui-TableCaption',
-    cell: 'bui-TableCell',
+  },
+  propDefs: {
+    children: {},
+    className: {},
+  },
+});
+
+/**
+ * Component definition for Cell
+ * @internal
+ */
+export const CellDefinition = defineComponent<CellOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-TableCell',
+  },
+  propDefs: {
+    className: {},
+  },
+});
+
+/**
+ * Component definition for CellText
+ * @internal
+ */
+export const CellTextDefinition = defineComponent<CellTextOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-TableCell',
     cellContentWrapper: 'bui-TableCellContentWrapper',
     cellContent: 'bui-TableCellContent',
     cellIcon: 'bui-TableCellIcon',
-    cellProfileAvatar: 'bui-TableCellProfileAvatar',
-    cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',
-    cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',
-    cellProfileName: 'bui-TableCellProfileName',
-    cellProfileLink: 'bui-TableCellProfileLink',
-    headSelection: 'bui-TableHeadSelection',
-    cellSelection: 'bui-TableCellSelection',
   },
-  dataAttributes: {
-    stale: [true, false] as const,
+  propDefs: {
+    title: {},
+    description: {},
+    color: { default: 'primary' },
+    leadingIcon: {},
+    href: {},
+    className: {},
   },
-} as const satisfies ComponentDefinition;
+});
+
+/**
+ * Component definition for CellProfile
+ * @internal
+ */
+export const CellProfileDefinition = defineComponent<CellProfileOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-TableCell',
+    cellContentWrapper: 'bui-TableCellContentWrapper',
+    cellContent: 'bui-TableCellContent',
+  },
+  propDefs: {
+    src: {},
+    name: {},
+    href: {},
+    description: {},
+    color: { default: 'primary' },
+    className: {},
+  },
+});

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

@@ -26,11 +26,22 @@ export { CellProfile } from './components/CellProfile';
 export { useTable } from './hooks/useTable';
 
 export type {
+  CellOwnProps,
   CellProps,
+  CellTextOwnProps,
   CellTextProps,
+  CellProfileOwnProps,
   CellProfileProps,
+  ColumnOwnProps,
   ColumnProps,
+  RowOwnProps,
+  RowProps,
+  TableBodyOwnProps,
+  TableBodyProps,
+  TableHeaderOwnProps,
+  TableHeaderProps,
   TableProps,
+  TableRootOwnProps,
   TableRootProps,
   TableItem,
   ColumnConfig,

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

@@ -18,6 +18,9 @@ import {
   CellProps as ReactAriaCellProps,
   ColumnProps as ReactAriaColumnProps,
   TableProps as ReactAriaTableProps,
+  TableHeaderProps as ReactAriaTableHeaderProps,
+  TableBodyProps as ReactAriaTableBodyProps,
+  RowProps as ReactAriaRowProps,
 } from 'react-aria-components';
 import type { ReactElement, ReactNode } from 'react';
 import type { SortDescriptor as ReactStatelySortDescriptor } from 'react-stately';
@@ -37,35 +40,96 @@ export interface SortState {
 }
 
 /** @public */
-export interface CellProps extends ReactAriaCellProps {}
+export type TableRootOwnProps = {
+  stale?: boolean;
+};
 
 /** @public */
-export interface CellTextProps extends ReactAriaCellProps {
+export interface TableRootProps
+  extends TableRootOwnProps,
+    Omit<ReactAriaTableProps, keyof TableRootOwnProps> {}
+
+/** @public */
+export type TableHeaderOwnProps<T = object> = {
+  columns?: ReactAriaTableHeaderProps<T>['columns'];
+  children?: ReactAriaTableHeaderProps<T>['children'];
+};
+
+/** @public */
+export interface TableHeaderProps<T>
+  extends TableHeaderOwnProps<T>,
+    Omit<ReactAriaTableHeaderProps<T>, keyof TableHeaderOwnProps> {}
+
+/** @public */
+export type TableBodyOwnProps = {};
+
+/** @public */
+export interface TableBodyProps<T extends object>
+  extends TableBodyOwnProps,
+    Omit<ReactAriaTableBodyProps<T>, keyof TableBodyOwnProps> {}
+
+/** @public */
+export type RowOwnProps<T = object> = {
+  columns?: ReactAriaRowProps<T>['columns'];
+  children?: ReactAriaRowProps<T>['children'];
+  href?: string;
+};
+
+/** @public */
+export interface RowProps<T>
+  extends RowOwnProps<T>,
+    Omit<ReactAriaRowProps<T>, keyof RowOwnProps> {}
+
+/** @public */
+export type ColumnOwnProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+/** @public */
+export interface ColumnProps
+  extends ColumnOwnProps,
+    Omit<ReactAriaColumnProps, keyof ColumnOwnProps> {}
+
+/** @public */
+export type CellOwnProps = {
+  className?: string;
+};
+
+/** @public */
+export interface CellProps
+  extends CellOwnProps,
+    Omit<ReactAriaCellProps, keyof CellOwnProps> {}
+
+/** @public */
+export type CellTextOwnProps = {
   title: string;
   description?: string;
   color?: TextColors;
   leadingIcon?: React.ReactNode | null;
   href?: string;
-}
+  className?: string;
+};
 
 /** @public */
-export interface CellProfileProps extends ReactAriaCellProps {
+export interface CellTextProps
+  extends CellTextOwnProps,
+    Omit<ReactAriaCellProps, keyof CellTextOwnProps> {}
+
+/** @public */
+export type CellProfileOwnProps = {
   src?: string;
   name?: string;
   href?: string;
   description?: string;
   color?: TextColors;
-}
+  className?: string;
+};
 
 /** @public */
-export interface ColumnProps extends Omit<ReactAriaColumnProps, 'children'> {
-  children?: React.ReactNode;
-}
-
-/** @public */
-export interface TableRootProps extends ReactAriaTableProps {
-  stale?: boolean;
-}
+export interface CellProfileProps
+  extends CellProfileOwnProps,
+    Omit<ReactAriaCellProps, keyof CellProfileOwnProps> {}
 
 /** @public */
 export interface TableItem {