# TableRow

**📖 Live documentation:** https://cds.coinbase.com/components/data-display/TableRow/

Defines rows within a Table.

## Import

```tsx
import { TableRow } from '@coinbase/cds-web/tables/TableRow'
```

## Examples

### Basic usage

```tsx live
<Table bordered variant="ruled">
  <TableBody>
    <TableRow>
      <TableCell title="Basic Row" />
    </TableRow>
    <TableRow backgroundColor="bgAlternate">
      <TableCell title="Row with Background" />
    </TableRow>
    <TableRow color="fgPrimary">
      <TableCell title="Row with Custom Text Color" />
    </TableRow>
  </TableBody>
</Table>
```

### Interactive Rows

```tsx live
function InteractiveExample() {
  const handlePress = () => console.log('Row clicked');

  return (
    <Table bordered>
      <TableBody>
        <TableRow onClick={handlePress}>
          <TableCell
            direction="horizontal"
            title="Clickable Row"
            end={
              <Button variant="secondary" compact>
                Action
              </Button>
            }
          />
        </TableRow>
        <TableRow onClick={handlePress} disableHoverIndicator>
          <TableCell
            direction="horizontal"
            title="Clickable Row (No Hover)"
            end={
              <Button variant="secondary" compact>
                Action
              </Button>
            }
          />
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

### Full Width Rows

```tsx live
<Table bordered>
  <TableBody>
    <TableRow fullWidth>
      <HStack gap={2} alignItems="center">
        <Icon name="check" />
        <Text>Full Width Content</Text>
        <Button variant="secondary" compact>
          Action
        </Button>
      </HStack>
    </TableRow>
    <TableRow fullWidth>
      <HStack gap={2} alignItems="center">
        <Icon active name="warning" />
        <Text>Another Full Width Row</Text>
        <Button variant="secondary" compact>
          Action
        </Button>
      </HStack>
    </TableRow>
  </TableBody>
</Table>
```

### Responsive Spacing

```tsx live
function ResponsiveExample() {
  const responsiveConfig = {
    phone: {
      innerSpacing: { spacingHorizontal: 2 },
      outerSpacing: { spacingVertical: 1 },
    },
    desktop: {
      innerSpacing: { spacingHorizontal: 4 },
      outerSpacing: { spacingVertical: 2 },
    },
  };

  return (
    <Table bordered>
      <TableBody>
        <TableRow fullWidth innerSpacing={responsiveConfig.phone.innerSpacing}>
          <HStack gap={2} alignItems="center">
            <Icon name="check" />
            <Text>Responsive Spacing Row</Text>
            <Button variant="secondary" compact>
              Action
            </Button>
          </HStack>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `backgroundColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `undefined` | Set the background color for this entire row to some CDS Palette background color name |
| `children` | `string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| string & ReactElement<any, string \| JSXElementConstructor<any>> \| string & Iterable<ReactNode> \| string & ReactPortal \| number & ReactElement<any, string \| JSXElementConstructor<any>> \| number & Iterable<ReactNode> \| number & ReactPortal \| false & ReactElement<any, string \| JSXElementConstructor<any>> \| false & Iterable<ReactNode> \| false & ReactPortal \| true & ReactElement<any, string \| JSXElementConstructor<any>> \| true & Iterable<ReactNode> \| true & ReactPortal \| ReactElement<any, string \| JSXElementConstructor<any>> & string \| ReactElement<any, string \| JSXElementConstructor<any>> & number \| ReactElement<any, string \| JSXElementConstructor<any>> & false \| ReactElement<any, string \| JSXElementConstructor<any>> & true \| ReactElement<any, string \| JSXElementConstructor<any>> & Iterable<ReactNode> \| ReactElement<any, string \| JSXElementConstructor<any>> & ReactPortal \| Iterable<ReactNode> & string \| Iterable<ReactNode> & number \| Iterable<ReactNode> & false \| Iterable<ReactNode> & true \| Iterable<ReactNode> & ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> & ReactPortal \| ReactPortal & string \| ReactPortal & number \| ReactPortal & false \| ReactPortal & true \| ReactPortal & ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal & Iterable<ReactNode>` | No | `-` | Children are required, and should always include TableCell \| TableCell[]. |
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `undefined` | Set the text color for this entire row to some CDS Palette foreground color name |
| `disableHoverIndicator` | `boolean` | No | `false` | By default, we set a hover background color of palette.backgroundAlternate on hover for the row. Use this prop to disable this behavior |
| `fullWidth` | `boolean` | No | `undefined` | Should this row span the entire width of the table? Useful for treating a row as a Control Strip. |
| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of Cell. Will only take effect when fullWidth is set to true |
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
| `onClick` | `MouseEventHandler<Element> \| (() => void)` | No | `noop` | Callback to fire when pressed |
| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell. Will only take effect when fullWidth is set to true |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |