> ## 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.

# MarkdownTable – Code

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

<Tabs>
  <Tab title="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.
  </Tab>

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

    ## `MarkdownTable` Props

    <ParamField path="content" type="ReactNode" required>
      The table's rows, in order — one or more `MarkdownTableRow` elements.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the root element.
    </ParamField>

    ## `MarkdownTableRow` Props

    <ParamField path="content" type="ReactNode" required>
      The row's cells — `MarkdownTableHeaderCell` or `MarkdownTableCell` elements.
    </ParamField>

    <ParamField path="isHeaderRow" type="boolean" default="false">
      Paints the row with the header fill.
    </ParamField>

    <ParamField path="isLastRow" type="boolean" default="false">
      Clears the row's own bottom divider, so the table doesn't double it up with its own bottom edge.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the row's root element.
    </ParamField>

    ## `MarkdownTableHeaderCell` / `MarkdownTableCell` Props

    Both cell components accept the same props.

    <ParamField path="content" type="ReactNode" required>
      The cell's rendered content — typically inline markdown (text, links, emphasis).
    </ParamField>

    <ParamField path="align" type={`"start" | "center" | "end"`} default="start">
      Text alignment within the cell.
    </ParamField>

    <ParamField path="width" type="number">
      Fixed column width in dp. Omit to share the row's width equally with sibling cells.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the cell's root element.
    </ParamField>
  </Tab>
</Tabs>