> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Markdown Table - React Native

> MarkdownTable renders a markdown-sourced table: a bordered, rounded shell of rows and cells.

> [!NOTE]
>
> For development, import `MarkdownTable` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**Implementation**

```tsx theme={null}
import {
  MarkdownTable,
  MarkdownTableCell,
  MarkdownTableHeaderCell,
  MarkdownTableRow,
} from "@servicetitan/anvil2-rn";

function App() {
  return (
    <MarkdownTable
      content={
        <>
          <MarkdownTableRow
            isHeaderRow
            content={
              <>
                <MarkdownTableHeaderCell content="Month" />
                <MarkdownTableHeaderCell content="Revenue" />
              </>
            }
          />
          <MarkdownTableRow
            isLastRow
            content={
              <>
                <MarkdownTableCell content="January" />
                <MarkdownTableCell content="$42,300" />
              </>
            }
          />
        </>
      }
    />
  );
}
```

## Common Examples

`MarkdownTable` is a rendering target, not a markdown parser: wire it into the `table` / `tr` / `th` / `td` rules of whatever markdown library your app uses (for example `react-native-markdown-display`), passing each node's already-rendered children through as `content`.

Four components, used together, because a table's row/column structure can't be expressed as one flat prop:

* `MarkdownTable` — the outer bordered, rounded shell with horizontal scroll.
* `MarkdownTableRow` — one row; set `isHeaderRow` on the header row and `isLastRow` on the final row.
* `MarkdownTableHeaderCell` / `MarkdownTableCell` — the cells within a row.

This matches the web kit's `MarkdownTable` (`@servicetitan/anvil2-ai-kit`), not the general `Table` internal component — that one is a data grid with sorting and row selection; this one only renders what a markdown parser hands it.

### Column widths

React Native has no HTML table-layout auto-sizing, so cells split the row equally (`flex: 1`) unless every cell in a column is given the same explicit `width` — the way to keep columns lined up across rows.

```tsx theme={null}
<MarkdownTableRow
  isHeaderRow
  content={
    <>
      <MarkdownTableHeaderCell width={90} content="SKU" />
      <MarkdownTableHeaderCell width={180} content="Description" />
    </>
  }
/>
<MarkdownTableRow
  isLastRow
  content={
    <>
      <MarkdownTableCell width={90} content="A-1029" />
      <MarkdownTableCell width={180} content="Condenser fan motor" />
    </>
  }
/>
```

A table wider than its container scrolls horizontally; there's nothing extra to configure for that.

### Alignment

`align` on a cell follows the markdown table's own column alignment syntax (`:--`, `:-:`, `--:`) — `"start"` (default), `"center"`, or `"end"`.

```tsx theme={null}
<MarkdownTableCell align="end" content="$129.00" />
```

## Not implemented yet

The web kit's sticky header-on-scroll and scroll-edge fade gradients aren't in the React Native version: React Native has no CSS `position: sticky`, and reproducing the effect needs a measure-and-sync two-scroll-view approach.

**MarkdownTable Props**

```tsx theme={null}
<MarkdownTable content={<MarkdownTableRow content={<MarkdownTableCell content="x" />} />} />
```

## `MarkdownTable` Props

**content** `ReactNode` *required*

The table's rows, in order — one or more `MarkdownTableRow` elements.

**testID** `string`

Test hook forwarded to the root element.

## `MarkdownTableRow` Props

**content** `ReactNode` *required*

The row's cells — `MarkdownTableHeaderCell` or `MarkdownTableCell` elements.

**isHeaderRow** `boolean` (default: false)

Paints the row with the header fill.

**isLastRow** `boolean` (default: false)

Clears the row's own bottom divider, so the table doesn't double it up with its own bottom edge.

**testID** `string`

Test hook forwarded to the row's root element.

## `MarkdownTableHeaderCell` / `MarkdownTableCell` Props

Both cell components accept the same props.

**content** `ReactNode` *required*

The cell's rendered content — typically inline markdown (text, links, emphasis).

**align** `"start" | "center" | "end"` (default: start)

Text alignment within the cell.

**width** `number`

Fixed column width in dp. Omit to share the row's width equally with sibling cells.

**testID** `string`

Test hook forwarded to the cell's root element.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.